Welcome to CODEBOX! (Copy 1584) (Copy 1598)

✨ นายณัฐภัทร วัฒนพิทักษ์พงศ์

<html lang="en">
  <head>
    <style>@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans:wght@700&display=swap');
@import url(//db.onlinewebfonts.com/c/f4d1593471d222ddebd973210265762a?family=Pokemon);
/*? GLOBAL */
html {
  min-height: 100%;
  cursor: url("https://cur.cursors-4u.net/games/images13/gam1282.png"), auto;
}
:root {
  --mainBgColor: #f3f3f3;
  --secondaryBgColor: #fff;
  --hoverColor: #f5465d;
  --mainTextColor: #444;
}
@font-face {font-family: "Pokemon"; src: url("//db.onlinewebfonts.com/t/f4d1593471d222ddebd973210265762a.eot"); src: url("//db.onlinewebfonts.com/t/f4d1593471d222ddebd973210265762a.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/f4d1593471d222ddebd973210265762a.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/f4d1593471d222ddebd973210265762a.woff") format("woff"), url("//db.onlinewebfonts.com/t/f4d1593471d222ddebd973210265762a.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/f4d1593471d222ddebd973210265762a.svg#Pokemon") format("svg"); }
* {
  font-family: 'Pokemon', svg;
  font-weight: 200;
  font-size: 50;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: var(--mainTextColor);
}
body {
  margin: 0;
  background-image: url("https://i.pinimg.com/originals/ea/f2/10/eaf2102aaa597054f587c5caaeb9e3da.gif");
  background-size:cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  display: grid;
  grid-auto-columns: 0.5;
}
h1 {
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  color: white;
  text-shadow: 2px 2px #ff0000;
  text-align: center;
}
/*? CONTAINER */
.wrapper {
  margin: 0.5em;
  opacity: 100%;
  background-color: var(--secondaryBgColor);
  border-radius: 50px;
  padding: 2rem;
  box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.66);
  -webkit-box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.66);
  -moz-box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.66);
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  width: 33em;
  height: 15em;
}
/*? PLAYER */
.score_board{
  border: 1px solid black;
	width: 200px;
  height: 100px;
	margin: 30px auto;
	font-size: 50px;
  color: black;
	border-radius: 4px;
	text-align: center;
  line-height: 100px;
  background-color: white;
  box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.66);
}
.player {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.player button {
  margin-right: 1rem;
  height:500px;
  width:200px;
  border: none;
}
.player-option {
  border-radius: 25px;
  cursor: pointer;
  height: 1em;
  width: 1em;
}
.option-rock {
  background: linear-gradient(to top left, #EB7777, #CD8069);
  
}
.option-rock:hover {
  background-image: url("https://i.pinimg.com/originals/c9/7b/14/c97b14d7e3e825cdb563bd4219299ed8.gif");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.2);
  transition-duration: 0.3s;
}
.option-scissor {
  background: linear-gradient(to top left, #39b385, #9be15d);
}
.option-scissor:hover {
  background-image: url("https://i.pinimg.com/originals/c9/7b/14/c97b14d7e3e825cdb563bd4219299ed8.gif");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.2);
  transition-duration: 0.3s;
}
.option-paper {
  background: linear-gradient(to top left, #66B6C0, #A5F5FF);
}
.option-paper:hover {
  background-image: url("https://i.pinimg.com/originals/c9/7b/14/c97b14d7e3e825cdb563bd4219299ed8.gif");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
   transform: scale(1.2);
   transition-duration: 0.3s;
}
/*? COMPUTER */
.computer {
  padding-left: 200px;
  place-content: center;
  border-left: 1px solid var(--mainTextColor);
}
.computer-option {
  margin-right: 2em;
  padding: 1rem 1.5rem;
  border-radius: 25px;
  height: 8em;
  width: 8em;
}
/*? NEXT GAME */
#next-round {
  font-size: 0.5rem;
  color:black;
  text-shadow: 0.5px 0.5px #ff0000;
  padding: 0.5rem;
  border-radius: 10px;
  border: 2px solid var(--mainTextColor);
  outline: none;
  cursor: pointer;
  background: linear-gradient(to top left, #ffb003, #ffcb03);
}
#next-round:hover {
  background: linear-gradient(to bottom right, #ffb003, #ffcb03);
}
#Reset {
  padding: 0.5rem;
  font-size: 0.5rem;
  color:black;
  text-shadow: 0.5px 0.5px #ff0000;
  border-radius: 10px;
  border: 2px solid var(--mainTextColor);
  outline: none;
  cursor: pointer;
  background: linear-gradient(to top left, #ffb003, #ffcb03);
}
#Reset:hover {
  background: linear-gradient(to bottom right, #ffb003, #ffcb03);
}
.message {
  position: absolute;
  color:black;
  top: 1rem;
  left: 50%;
  transform: translate(-50%);
  background-color: var(--secondaryBgColor);
  border-radius: 25px;
  font-size: 2rem;
  padding: 1rem;
  box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.66);
  -webkit-box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.66);
  -moz-box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.66);
  opacity: 0;
  transition: opacity 0.3s;
}</style>
    <audio autoplay id="bgMusic"src="https://cdn.discordapp.com/attachments/807588926332207136/807588978148507708/y2mate.com_-_Pokemon_Red_Yellow_Blue_Battle_Music_Trainer.mp3"></audio>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.15.1/css/all.css"
      integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp"
      crossorigin="anonymous"
    />
    <link href="//db.onlinewebfonts.com/c/f4d1593471d222ddebd973210265762a?family=Pokemon" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="style.css" />
    <script defer src="main.js"></script>
    <title>Pokemon Rock Paper Scisscors</title>
  </head>
  <body>
    <div class="container">
      <h1 style=font-size:70px>Pokemon Rock Paper Scisscors</h1>
      <div class="score_board">
        <span id="user-score" style=color:black;>0</span> : <span id="computer-score"style=color:black;>0</span> </div>
      <div class="wrapper">
        <div class="message"></div>
        <div class="player">
          <button class="player-option option-rock" data-options="rock">
            <div class="rock-wrapper">
              <img src="https://webstockreview.net/images/pokemon-clipart-eve-3.png"width="100x"></img>
            </div>
          </button>
          <button class="player-option option-paper" data-options="paper">
            <img src="https://www.pinclipart.com/picdir/big/130-1301897_its-a-baby-penguin-for-arceus-sake-pokemon.png"width="100x"></img>
          </button>
          <button class="player-option option-scissor" data-options="scissors">
            <img src="https://sickr.files.wordpress.com/2015/12/pokemon_caterpie.png"width="100x">
          </button>
        </div>
        <div class="computer">
          <div class="computer-option">
          </div>
  </div>
      </div>
      <button id="next-round">Next Round</button>
  <button id="Reset">Reset</button>
    </div>
<script>var audio = document.getElementById("bgMusic");
  audio.volume = 0.01;
//score
let userScore = 0;
let computerScore = 0;
const Reset = document.getElementById('Reset')
const userScore_span = document.getElementById('user-score');
const computerScore_span = document.getElementById('computer-score');
//Variables
const playerEl = document.querySelector('.player');
const computerEl = document.querySelector('.computer-option');
const playershow = document.querySelector('.player-show');
const nextRound = document.querySelector('#next-round');
const message = document.querySelector('.message');
const PlayerBtns = document.querySelectorAll('.player-option');
let gameActive = true;
let winner, computer;

//Game won function
const win = () => {
  if (winner === computer) {
    message.textContent = `You Lost!`;
    message.style.opacity = 1;
    computerScore++;
    computerScore_span.innerHTML = computerScore;
  } else {
    message.textContent = `You Won!`;
    message.style.opacity = 1;
    userScore++;
    userScore_span.innerHTML = userScore;
  }
};

//next round button
nextRound.addEventListener('click', function () {
  computerEl.innerHTML = ``;
  computerEl.style.background = `linear-gradient(to top left, #c8c8c8, #a8a7a7)`;
  message.style.opacity = 0;
  message.textContent = ``;
  gameActive = true;
  PlayerBtns.forEach((btn) => (btn.style.cursor = 'pointer'));
});

Reset.addEventListener('click', function (){computerEl.innerHTML = ``;
  computerEl.style.background = `linear-gradient(to top left, #c8c8c8, #a8a7a7)`;
  message.style.opacity = 0;
  message.textContent = ``;
  gameActive = true;
  PlayerBtns.forEach((btn) => (btn.style.cursor = 'pointer'));
  userScore = 0;                         userScore_span.innerHTML = userScore;
  computerScore = 0;                      computerScore_span.innerHTML = computerScore;
});
</script>
  </body>
</html>