Week4-Homework-2-A:P’Getty (Branch 1493)

✨ นายกิตติภพ ปังตระกูล

<head>
  <style>
    body{
		background:hsl(200, 40%, 40%);
      display: flex;
  		justify-content: center;
      z-index: 0;
      transform-style: preserve-3d;
    }
    .field {
      width: 100%;
      max-width: 360px;
      margin: auto;
      position: relative;
    }
    
    .holesCont {
      justify-items: center;
      width: 100%;
    }
    
    .hole{
		position: relative;
      height: 80px;
      width: 80px;
      border-radius: 50%;
      overflow: hidden;
      margin-left: -40px;
      background: radial-gradient(hsl(0, 0%, 30%), hsl(0, 10%, 15%));
    	transform-style: preserve-3d;
      transform: rotatex(80deg);
    }
    .row{
      display:flex;
      justify-content:center;
      align-items:center;
      width:100%;
  	}
    .mole {
      position: absolute;
      z-index: 1;
      height: 60px;
      bottom: 0;
      left: 50%;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      transform: translateX(-50%);
      animation: appear 3s;
      pointer-events: none;
    }
    @keyframes appear {
      0%{
        opacity: 0;
        bottom: -60px;
      }
      20%{
        opacity: 1;
        bottom: 0;
      }
      50%{
        bottom: -120px;
      }
    }
  	.buttons {
      margin-top: 3em;
      text-align: center;
    }
  	.buttons button {
      padding: 15px 45px;
      background-color: inherit;
      border: 1px solid #fff;
      color: #fff;
      border-radius: 3px;
      outline: none;
    }
    button.stop {
      display: none;
    }
    .cursor img {
      position: absolute;
      height: 125px;
      z-index: 2;
      transform: translate(-10px, -40px);
      pointer-events: none;
    }
    .showMole{
		width: 80px;
      transform-style: preserve-3d;
      position:relative;
      left: 11%;
      transform:translatey(-50px);
      height: 100px;
      background:;
    }
    
  </style>
</head>
<body>
  <div class="field">
    <div class="row">
      <div class="showMole"></div>
      <div class="hole hole1"></div>
      <div class="showMole"></div>
      <div class="hole hole2"></div>
    </div>
    <div class="row">
      <div class="showMole"></div>
      <div class="hole hole3"></div>
      <div class="showMole"></div>
      <div class="hole hole4"></div>
      <div class="showMole"></div>
      <div class="hole hole5"></div>
    </div>
    <div class="row">
      <div class="showMole"></div>
      <div class="hole hole6"></div>
      <div class="showMole"></div>
      <div class="hole hole7"></div>
    </div>
    <div class="buttons">
    <button class="play">PLAY</button>
    <button class="stop">STOP</button>
  </div>
  <div class="cursor">
  </div>
  </div>
  
  
  <script>
    const score = document.querySelector(".score span");
    const holes = document.querySelectorAll(".showMole");
    const playBtn = document.querySelector(".buttons .play");
    const stopBtn = document.querySelector(".buttons .stop");
    const cursor = document.querySelector(".cursor img");

window.addEventListener("mousemove", (e) => {
      cursor.style.top = e.pageY + "px";
      cursor.style.left = e.pageX + "px";

window.addEventListener("click", () => {
        cursor.style.animation = "hit 0.1s ease";
        setTimeout(() => {
          cursor.style.removeProperty("animation");
        }, 100);
      });
    });

playBtn.addEventListener("click", () => {
      playBtn.style.display = "none";
      stopBtn.style.display = "inline-block";

let hole;
      let points = 0;

const startGame = setInterval(() => {
        let arrayNo = Math.floor(Math.random() * 7);
        hole = holes[arrayNo];

let image = document.createElement("img");
        image.setAttribute("src", "https://cdn.discordapp.com/attachments/798210272027869245/807288967766081550/bb1.png");
        image.setAttribute("class", "mole");
        hole.appendChild(image);

setTimeout(() => {
          hole.removeChild(image);
        }, 1000);
      }, 1500);

window.addEventListener("click", (e) => {
        if (e.target === hole) score.innerText = ++points;
      });

stopBtn.addEventListener("click", () => {
        clearInterval(startGame);
        stopBtn.style.display = "none";
        playBtn.style.display = "inline-block";
        score.innerText = 0;
      });
    });
  </script>
</body>