Week4-Homework-2-A:P’Getty (Copy 7510)

✨ นายไกรวิน แนวอินทร์

<head>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Wendy+One&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  		cursor:none;
		scroll-behavior:smooth;
    }
    body{
      display: flex;
      width: 100%;
      max-width: 1400px;
  		justify-content: center;
      z-index: 0;
      transform-style: preserve-3d;
      background-image: url(https://cutewallpaper.org/21/minion-background/Best-37+-Minion-Backgrounds-on-HipWallpaper-Cute-Minion-.jpg);
      background-size: 100% 50%;
    }
    
    .title {
      font-family: 'Wendy One', sans-serif;
      color: #ff8c00;
      font-size: 24px;
      letter-spacing: 2px;
      text-shadow: 1px 1px rgb(123, 67, 0);
      text-transform: uppercase;
      text-shadow: 2px 2px 4px hsl(24, 100%, 35%); 
      text-align:center;
      
    }
    
    .field {
      background-image: url(https://cutewallpaper.org/21/minion-background/Best-37+-Minion-Backgrounds-on-HipWallpaper-Cute-Minion-.jpg);
      background-size: 100% 50%;
      background-repeat: no-repeat;
      width: 100%;
      margin: auto;
      position: relative;
    }
    .hole{
      display: flex;
      align-items: center;
      height: 110px;
      position: relative;
      margin-top:-15%;
      margin-right: 8%;
    }
    .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 0.1s;
      pointer-events: none;
    }
    @keyframes appear {
      0%{
			bottom: -20px;
      }
      50%{
			bottom: 0px;
      }

}
  	.buttons {
      margin-top: -20px;
      text-align: center;
    }
  	.play {
      padding: 15px 45px;
      background-color: #ff8c00;
      border: none;
      color: #fff;
      border-radius: 7px;
      outline: none;
     	margin-bottom: 30px;
     	box-shadow: 0px 5px hsl(24, 100%, 35%);
     transition: 0.1s;
    }
    .play:hover{
      background-color: hsl(24, 100%, 55%);
      transform: translatey(3px);
      box-shadow: 0px 3px hsl(24, 100%, 35%)
    }
    .cursor img {
      height: 80px;
    	position: fixed;
      z-index: 2;
      transform-style:preserve-3d;
      transform: translate(-10px, -40px) rotate(20deg);
      pointer-events: none;
	}
    .showMole{
		width: 75px;
      z-index:1;
      transform-style: preserve-3d;
      position:relative;
      left:6.5%;
      bottom: 110px;
      height: 100px;
      background:;
    }
    @keyframes hit {
      from {
        transform: rotate(20deg);
      }
      to {
        transform: rotate(-20deg);
      }
    }
    h5{
		text-align:center;
      color: white;
    }
    .scoreboard{
      padding: 1em;
		font-family: 'Ubuntu', sans-serif;
      font-size: 20;
      text-align:center;
      color: white;
      text-shadow: 1px 1px 5px hsl(24,100%, 35%);
      margin-bottom:100px;
    }
    .creditBoard{
      background-image: url(https://i.pinimg.com/originals/a3/74/0e/a3740e0d7e4f2aadfec4cffd49210dfb.png);
      width: 1400px;
      height: 100%;
      margin-top: 20%;
		background-size: 100% 100%;
  	}
    #credit-title{
      padding: 1em;
		font-size: 4em;
    }
    .btn-credit{
		padding: 15px 45px;
      background-color: #ff8c00;
      border: none;
      color: white;
      border-radius: 7px;
      outline: none;
     	box-shadow: 1px 5px 3px hsl(24, 100%, 35);
      margin-top: 30;
      font-family: 'Wendy One', sans-serif;
      font-size:2rem;
      transition: 0.1s;
      box-shadow: 0px 10px hsl(24, 100%, 35%)
	 }
    .btn-credit:hover{
      background-color: hsl(24, 100%, 55%);
      transform: translatey(3px);
      box-shadow: 0px 6px hsl(24, 100%, 35%)
    }
    
    a{
		font-size: 2em;
      color: white;
      font-family: 'Wendy One', sans-serif;
    }
	 a:hover{
		color: hsl(240, 30%, 60%);
    }
    
    .game-over {
      display: none;
      position: fixed;
      width: 100%;
      height: 58%;
      background-color: hsla(50, 30%, 30%, 50%);
      color: white;
      font-size: 3rem;
      font-family: 'Wendy One', sans-serif;
      flex-direction: column;
      z-index:5;
      text-transform: uppercase;
      text-align:center;
    }
    .game-over.there-is{
		display:flex;
    }
    .game-over h2{
		margin-top: 10%;
    } 
    .game-over h5{
		margin-top: 20%;
      font-size: 2rem
    }
  </style>
  
  <body onload="bgMusic.play()">
  <div class="field">
  <div class="game-over" id="game-over">
    <h2>  
    Your Score is : <span>0</span>
    </h2>
    <h5>
    click to play again  
    </h5>
    </div>
	<div class="title"><h1>
      Whack a Minnion!
      	</h1>
      <h5>
      Group A p' Getty  
      </h5>
  </div>
    <div class="scoreboard">
      <div class="score">
      Score: <span>0</span>
        
      </div>
      <div class="time">
      Time: <span>30</span>s
      </div>
    </div>
    <div class="row">
      <div class="showMole"></div>
      <div class="hole hole1">
      	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="158.22 300.71 109.78 106.41" width="109.78" height="106.41">
    <clipPath id="_clipPath_iyFpZlomJkfyPxMy5FoWrjPUsTxfrOtl">
        <path d=" M 178.312 390.733 Q 171.834 390.756 158.355 390.818 L 158.22 300.71 L 267.759 300.71 L 268 390.818 L 247.86 390.728 C 247.759 399.508 232.844 407.191 213.092 407.12 C 196.053 407.058 178.797 401.189 178.312 390.733 Z " id="PeekingDino_2" fill="rgb(255,255,255)"></path>
    </clipPath>
    <g clip-path="url(#_clipPath_iyFpZlomJkfyPxMy5FoWrjPUsTxfrOtl)">
        <ellipse vector-effect="non-scaling-stroke" cx="213.1098590741296" cy="390.81926107003596" rx="34.697922494492445" ry="16.319261070035964" id="Hole" fill="rgb(93,93,93)"></ellipse>
        <clipPath id="_clipPath_c8QjgyLlDC94cLkhLSUMTysbC6Mandia">
            <ellipse vector-effect="non-scaling-stroke" cx="213.1098590741296" cy="390.81926107003596" rx="34.697922494492445" ry="16.319261070035964" id="Hole" fill="rgb(93,93,93)"></ellipse>
        </clipPath>
        <g clip-path="url(#_clipPath_c8QjgyLlDC94cLkhLSUMTysbC6Mandia)">
            <ellipse vector-effect="non-scaling-stroke" cx="213.1098590741296" cy="394.1380159686848" rx="34.29522846510352" ry="16.129864457083556" id="Hole" fill="rgb(66,66,66)"></ellipse>
        		</g>
           </g>
        </svg>
      </div>
      <div class="showMole"></div>
      <div class="hole hole2">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="158.22 300.71 109.78 106.41" width="109.78" height="106.41">
    <clipPath id="_clipPath_iyFpZlomJkfyPxMy5FoWrjPUsTxfrOtl">
        <path d=" M 178.312 390.733 Q 171.834 390.756 158.355 390.818 L 158.22 300.71 L 267.759 300.71 L 268 390.818 L 247.86 390.728 C 247.759 399.508 232.844 407.191 213.092 407.12 C 196.053 407.058 178.797 401.189 178.312 390.733 Z " id="PeekingDino_2" fill="rgb(255,255,255)"></path>
    </clipPath>
    <g clip-path="url(#_clipPath_iyFpZlomJkfyPxMy5FoWrjPUsTxfrOtl)">
        <ellipse vector-effect="non-scaling-stroke" cx="213.1098590741296" cy="390.81926107003596" rx="34.697922494492445" ry="16.319261070035964" id="Hole" fill="rgb(93,93,93)"></ellipse>
        <clipPath id="_clipPath_c8QjgyLlDC94cLkhLSUMTysbC6Mandia">
            <ellipse vector-effect="non-scaling-stroke" cx="213.1098590741296" cy="390.81926107003596" rx="34.697922494492445" ry="16.319261070035964" id="Hole" fill="rgb(93,93,93)"></ellipse>
        </clipPath>
        <g clip-path="url(#_clipPath_c8QjgyLlDC94cLkhLSUMTysbC6Mandia)">
            <ellipse vector-effect="non-scaling-stroke" cx="213.1098590741296" cy="394.1380159686848" rx="34.29522846510352" ry="16.129864457083556" id="Hole" fill="rgb(66,66,66)"></ellipse>
        		</g>
           </g>
        </svg>
      </div>
    </div>
    <div class="row">
      <div class="showMole"></div>
      <div class="hole hole3">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="158.22 300.71 109.78 106.41" width="109.78" height="106.41">
    <clipPath id="_clipPath_iyFpZlomJkfyPxMy5FoWrjPUsTxfrOtl">
        <path d=" M 178.312 390.733 Q 171.834 390.756 158.355 390.818 L 158.22 300.71 L 267.759 300.71 L 268 390.818 L 247.86 390.728 C 247.759 399.508 232.844 407.191 213.092 407.12 C 196.053 407.058 178.797 401.189 178.312 390.733 Z " id="PeekingDino_2" fill="rgb(255,255,255)"></path>
    </clipPath>
    <g clip-path="url(#_clipPath_iyFpZlomJkfyPxMy5FoWrjPUsTxfrOtl)">
        <ellipse vector-effect="non-scaling-stroke" cx="213.1098590741296" cy="390.81926107003596" rx="34.697922494492445" ry="16.319261070035964" id="Hole" fill="rgb(93,93,93)"></ellipse>
        <clipPath id="_clipPath_c8QjgyLlDC94cLkhLSUMTysbC6Mandia">
            <ellipse vector-effect="non-scaling-stroke" cx="213.1098590741296" cy="390.81926107003596" rx="34.697922494492445" ry="16.319261070035964" id="Hole" fill="rgb(93,93,93)"></ellipse>
        </clipPath>
        <g clip-path="url(#_clipPath_c8QjgyLlDC94cLkhLSUMTysbC6Mandia)">
            <ellipse vector-effect="non-scaling-stroke" cx="213.1098590741296" cy="394.1380159686848" rx="34.29522846510352" ry="16.129864457083556" id="Hole" fill="rgb(66,66,66)"></ellipse>
        		</g>
           </g>
        </svg>
      </div>
      <div class="showMole"></div>
      <div class="hole hole4">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="158.22 300.71 109.78 106.41" width="109.78" height="106.41">
    <clipPath id="_clipPath_iyFpZlomJkfyPxMy5FoWrjPUsTxfrOtl">
        <path d=" M 178.312 390.733 Q 171.834 390.756 158.355 390.818 L 158.22 300.71 L 267.759 300.71 L 268 390.818 L 247.86 390.728 C 247.759 399.508 232.844 407.191 213.092 407.12 C 196.053 407.058 178.797 401.189 178.312 390.733 Z " id="PeekingDino_2" fill="rgb(255,255,255)"></path>
    </clipPath>
    <g clip-path="url(#_clipPath_iyFpZlomJkfyPxMy5FoWrjPUsTxfrOtl)">
        <ellipse vector-effect="non-scaling-stroke" cx="213.1098590741296" cy="390.81926107003596" rx="34.697922494492445" ry="16.319261070035964" id="Hole" fill="rgb(93,93,93)"></ellipse>
        <clipPath id="_clipPath_c8QjgyLlDC94cLkhLSUMTysbC6Mandia">
            <ellipse vector-effect="non-scaling-stroke" cx="213.1098590741296" cy="390.81926107003596" rx="34.697922494492445" ry="16.319261070035964" id="Hole" fill="rgb(93,93,93)"></ellipse>
        </clipPath>
        <g clip-path="url(#_clipPath_c8QjgyLlDC94cLkhLSUMTysbC6Mandia)">
            <ellipse vector-effect="non-scaling-stroke" cx="213.1098590741296" cy="394.1380159686848" rx="34.29522846510352" ry="16.129864457083556" id="Hole" fill="rgb(66,66,66)"></ellipse>
        		</g>
           </g>
        </svg>
      </div>
      <div class="showMole"></div>
      <div class="hole hole5">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="158.22 300.71 109.78 106.41" width="109.78" height="106.41">
    <clipPath id="_clipPath_iyFpZlomJkfyPxMy5FoWrjPUsTxfrOtl">
        <path d=" M 178.312 390.733 Q 171.834 390.756 158.355 390.818 L 158.22 300.71 L 267.759 300.71 L 268 390.818 L 247.86 390.728 C 247.759 399.508 232.844 407.191 213.092 407.12 C 196.053 407.058 178.797 401.189 178.312 390.733 Z " id="PeekingDino_2" fill="rgb(255,255,255)"></path>
    </clipPath>
    <g clip-path="url(#_clipPath_iyFpZlomJkfyPxMy5FoWrjPUsTxfrOtl)">
        <ellipse vector-effect="non-scaling-stroke" cx="213.1098590741296" cy="390.81926107003596" rx="34.697922494492445" ry="16.319261070035964" id="Hole" fill="rgb(93,93,93)"></ellipse>
        <clipPath id="_clipPath_c8QjgyLlDC94cLkhLSUMTysbC6Mandia">
            <ellipse vector-effect="non-scaling-stroke" cx="213.1098590741296" cy="390.81926107003596" rx="34.697922494492445" ry="16.319261070035964" id="Hole" fill="rgb(93,93,93)"></ellipse>
        </clipPath>
        <g clip-path="url(#_clipPath_c8QjgyLlDC94cLkhLSUMTysbC6Mandia)">
            <ellipse vector-effect="non-scaling-stroke" cx="213.1098590741296" cy="394.1380159686848" rx="34.29522846510352" ry="16.129864457083556" id="Hole" fill="rgb(66,66,66)"></ellipse>
        		</g>
           </g>
        </svg>
      </div>
    </div>
    <div class="row">
      <div class="showMole"></div>
      <div class="hole hole6">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="158.22 300.71 109.78 106.41" width="109.78" height="106.41">
    <clipPath id="_clipPath_iyFpZlomJkfyPxMy5FoWrjPUsTxfrOtl">
        <path d=" M 178.312 390.733 Q 171.834 390.756 158.355 390.818 L 158.22 300.71 L 267.759 300.71 L 268 390.818 L 247.86 390.728 C 247.759 399.508 232.844 407.191 213.092 407.12 C 196.053 407.058 178.797 401.189 178.312 390.733 Z " id="PeekingDino_2" fill="rgb(255,255,255)"></path>
    </clipPath>
    <g clip-path="url(#_clipPath_iyFpZlomJkfyPxMy5FoWrjPUsTxfrOtl)">
        <ellipse vector-effect="non-scaling-stroke" cx="213.1098590741296" cy="390.81926107003596" rx="34.697922494492445" ry="16.319261070035964" id="Hole" fill="rgb(93,93,93)"></ellipse>
        <clipPath id="_clipPath_c8QjgyLlDC94cLkhLSUMTysbC6Mandia">
            <ellipse vector-effect="non-scaling-stroke" cx="213.1098590741296" cy="390.81926107003596" rx="34.697922494492445" ry="16.319261070035964" id="Hole" fill="rgb(93,93,93)"></ellipse>
        </clipPath>
        <g clip-path="url(#_clipPath_c8QjgyLlDC94cLkhLSUMTysbC6Mandia)">
            <ellipse vector-effect="non-scaling-stroke" cx="213.1098590741296" cy="394.1380159686848" rx="34.29522846510352" ry="16.129864457083556" id="Hole" fill="rgb(66,66,66)"></ellipse>
        		</g>
           </g>
        </svg>
      </div>
      <div class="showMole"></div>
      <div class="hole hole7">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="158.22 300.71 109.78 106.41" width="109.78" height="106.41">
    <clipPath id="_clipPath_iyFpZlomJkfyPxMy5FoWrjPUsTxfrOtl">
        <path d=" M 178.312 390.733 Q 171.834 390.756 158.355 390.818 L 158.22 300.71 L 267.759 300.71 L 268 390.818 L 247.86 390.728 C 247.759 399.508 232.844 407.191 213.092 407.12 C 196.053 407.058 178.797 401.189 178.312 390.733 Z " id="PeekingDino_2" fill="rgb(255,255,255)"></path>
    </clipPath>
    <g clip-path="url(#_clipPath_iyFpZlomJkfyPxMy5FoWrjPUsTxfrOtl)">
        <ellipse vector-effect="non-scaling-stroke" cx="213.1098590741296" cy="390.81926107003596" rx="34.697922494492445" ry="16.319261070035964" id="Hole" fill="rgb(93,93,93)"></ellipse>
        <clipPath id="_clipPath_c8QjgyLlDC94cLkhLSUMTysbC6Mandia">
            <ellipse vector-effect="non-scaling-stroke" cx="213.1098590741296" cy="390.81926107003596" rx="34.697922494492445" ry="16.319261070035964" id="Hole" fill="rgb(93,93,93)"></ellipse>
        </clipPath>
        <g clip-path="url(#_clipPath_c8QjgyLlDC94cLkhLSUMTysbC6Mandia)">
            <ellipse vector-effect="non-scaling-stroke" cx="213.1098590741296" cy="394.1380159686848" rx="34.29522846510352" ry="16.129864457083556" id="Hole" fill="rgb(66,66,66)"></ellipse>
        		</g>
           </g>
        </svg>
      </div>
    </div>
    <div class="buttons">
    <button class="play">PLAY</button>
      <br>
    <a href="#credit-title">
    	<h3>
      Go to credit  
      </h3>
    </a>
  </div>
  <div class="cursor">
    <img src="https://cdn.discordapp.com/attachments/798210272027869245/807303116873138176/321_2.png" style="top: 306px; left: 340px;">
  </div>
  <div class="creditBoard">
    <div class="title" id="credit-title">
      Credit<br>
      <a href="https://www.youtube.com/watch?v=DNR2AY7b6kI" target="_blank">
      <button class="btn-credit"> Background Music</button><br>
      </a>
      <a href="https://codepen.io/codegrind6/pen/wvGeLov" target="_blank">
      <button class="btn-credit"> Code reference1</button>
      </a>
      <a href="https://codepen.io/evansbrown/pen/KrLQJw" target="_blank">
      <button class="btn-credit"> Code reference2</button><br>
      </a>
      <a href="http://pngimg.com/image/36258" target="_blank">
      <button class="btn-credit"> Background:Index</button>
      </a>
      <a href="https://id.pinterest.com/pin/15551561189825347/" target="_blank">
      <button class="btn-credit"> Background:Credit</button><br>
      </a>
      <a href="https://www.youtube.com/watch?v=mPnxr6Ugf3Q" target="_blank">
      <button class="btn-credit"> Sound Effect:AHh!!</button>
      </a>
      <a href="https://www.youtube.com/watch?v=ZXK427oXjn8&ab_channel=GamingSoundFX" target="_blank">
      <button class="btn-credit"> Sound Effect:Bonk</button><br>
      </a>
    </div>
  </div>
  </div>
  <script>
    const score = document.querySelector(".score span");
    const timeEl = document.querySelector(".time span");
    const holes = document.querySelectorAll(".showMole");
    const playBtn = document.querySelector(".buttons .play");
    const stopBtn = document.querySelector(".buttons .stop");
    const cursor = document.querySelector(".cursor img");
    let points = 0;
    
    var bgMusic = new Audio('https://cdn.discordapp.com/attachments/798210272027869245/807556938594123796/Happy_Tree_Friends_Theme_Song.mp3');
    bgMusic.loop = true;
    bgMusic.volume = 0.1;
    
    function hit(){
		var hitEffect = new Audio('https://cdn.discordapp.com/attachments/798210272027869245/807604666900152350/AHHHHHH_SOUND_EFFECT2.mp3')
      hitEffect.volume = 0.2
		hitEffect.play();   
    }
    function gong(){
		var hammer_gong = new Audio('https://cdn.discordapp.com/attachments/798210272027869245/807558159379595264/BONK_Sound_Effect.mp3')
      hammer_gong.volume = 0.1;
      hammer_gong.play();
    }
    
    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 = "inline-block";
      playBtn.style.background = "hsl(24, 80%, 50%)";
		setTimer()
      let hole;

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

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

setTimeout(() => {
          hole.removeChild(safeMole);
        }, 600);
        
      window.addEventListener("click", (e) => {
        if (e.target === hole){
          console.log(hole);
          hole.appendChild(dieSafeMole);
        setTimeout(() => {
          hole.removeChild(dieSafeMole);
          hole.removeChild(safeMole);
             
        }, 100);
        }
      });
        
      }, 1000);

timer = setInterval(function() {
        timeEl.innerText = --time;

if (time <= 0) {
  			time++
          gameOver();
        }
      }, 1000);
    }
    
    function gameOver(){
		document.getElementById('game-over').classList.add('there-is');
		document.querySelector('.game-over span').innerText = points
      window.addEventListener('click',()=>
      location.reload(true)
		)};

</script>
</body>
</head>