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>