เกมเดินเก็บของ (Copy 1083) (Copy 1089)

✨ นางสาวกุลนิษฐ์ จูงาม

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body{
        margin:0;
        display:flex;
        --blockSize:calc(100% / 9);
        background:#eef;
        overflow: hidden;
      }
      @keyframes swap{
        0%,100%{
				background-color: red;
        }
        33%{
				background-color: green;
        }
        66%{
				background-color: blue;
        }
      }
      .font{
			font-size: 200px;
        position: absolute;
        margin-top: 100px;
        margin-left: 700px;
        
      }
      @keyframes move{
        from {
				transform: translateX(0px);
          color: black;
          text-shadow: 0px 0px 10px black;
        }
        to {
				transform: translateX(-2800px);
          color: white;
          text-shadow: 0px 0px 10px white;
        }
      }
      #canvas{
        width:80vmin;
        height:80vmin;
        background:pink;
        margin:auto;
        position:relative;
      }
      #ground{
        width:100%;
        height:100%;
        position:absolute;
        top:0;
        left:0;
        background:yellowgreen;
      }
      block{
        width:var(--blockSize);
        height:var(--blockSize);
        background:#0002;
        float:left;
      }
      block:nth-child(even){
        background:#0001;
      }
      *[data-x="0"]{
        --x:0}
      *[data-x="1"]{
        --x:1}
      *[data-x="2"]{
        --x:2}
      *[data-x="3"]{
        --x:3}
      *[data-x="4"]{
        --x:4}
      *[data-x="5"]{
        --x:5}
      *[data-x="6"]{
        --x:6}
      *[data-x="7"]{
        --x:7}
      *[data-x="8"]{
        --x:8}
      *[data-y="0"]{
        --y:0}
      *[data-y="1"]{
        --y:1}
      *[data-y="2"]{
        --y:2}
      *[data-y="3"]{
        --y:3}
      *[data-y="4"]{
        --y:4}
      *[data-y="5"]{
        --y:5}
      *[data-y="6"]{
        --y:6}
      *[data-y="7"]{
        --y:7}
      *[data-y="8"]{
        --y:8}
      obj{
        --x:4;
        --y:4;
        width:var(--blockSize);
        height:var(--blockSize);
        position:absolute;
        left:calc(var(--blockSize) * var(--x));
        top:calc(var(--blockSize) * var(--y));
        background-size:contain;
        background-position:center;
        background-repeat:no-repeat;
        transition:.1s;
        opacity:1;
      }
      #char{
        background-image:url(https://www.pngkey.com/png/full/339-3397775_8-bit-video-game-character.png);
      }
      obj.plant{ background-image:url(https://www.iconpacks.net/icons/1/free-coin-icon-794-thumb.png);
        transition:.3s;
      }
      button {
			position: absolute;
        margin-left: 300px;
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <div id="canvas">
      <div id="ground">
      </div>
      <obj id="char" data-x="4" data-y="4">
      </obj>
      <obj class="plant" data-x="5" data-y="2" id="plant1">
      </obj>
      <obj class="plant" data-x="3" data-y="7" id="plant2">
      </obj>
      <obj class="plant" data-x="1" data-y="2" id="plant3">
      </obj>
      <div class="font">
        CONGRATULATIONS
      </div>
    </div>
    <button onclick="wtf()">
      NEW GAME
    </button>
    <script>
      begin()
      var count = 0;
      var check1 = 1;
      var check2 = 1;
      var check3 = 1;
      function wtf(){
        let plant1 = document.querySelector("#plant1");
        let plant2 = document.querySelector("#plant2");
        let plant3 = document.querySelector("#plant3");
        let testx1 = Math.floor(Math.random()*8);
        let testy1 = Math.floor(Math.random()*8);
        let testx2 = Math.floor(Math.random()*8);
        let testy2 = Math.floor(Math.random()*8);
        let testx3 = Math.floor(Math.random()*8);
        let testy3 = Math.floor(Math.random()*8);
        plant1.dataset.x = testx1;
        plant1.dataset.y = testy1;
        plant2.dataset.x = testx2;
        plant2.dataset.y = testy2;
        plant3.dataset.x = testx3;
        plant3.dataset.y = testy3;
        count = 0;
        check1 = 1;
        check2 = 1;
        check3 = 1;
        document.querySelector(".font").style.animation = "none";
        document.querySelector("body").style.animation = "none";
        document.querySelector("#plant1").style.opacity = "1";
        document.querySelector("#plant2").style.opacity = "1";
        document.querySelector("#plant3").style.opacity = "1";
        document.querySelector("#char").dataset.x = "4";
        document.querySelector("#char").dataset.y = "4";
      }
      
      function begin(){
        // create 64 block
        let txt = ''
        for(let i=0; i<81; i++){
          txt += '<block></block>'
        }
        document.querySelector('#ground').innerHTML = txt
        //set default of charactor
      }
      
      //ตรวจจับคีย์บอร์ด
      document.body.onkeydown = function(){
        let char = document.querySelector('#char');
        let nowX =  parseInt(char.dataset.x);
        let nowY =  parseInt(char.dataset.y);
        let newX = nowX;
        let newY = nowY;
        if(event.key == "ArrowDown"){
          if(newY < 8){
				newY++
          }
        }
        if(event.key == "ArrowUp"){
          if(newY > 0){
				newY--
          }
        }
        if(event.key == "ArrowRight"){
          if(newX < 8){
				newX++
          }
        }
        if(event.key == "ArrowLeft"){
          if(newX > 0){
				newX--
          }
        }
        char.dataset.y = newY
        char.dataset.x = newX
        let treex1 = parseInt(document.querySelector("#plant1").dataset.x);
        let treey1 = parseInt(document.querySelector("#plant1").dataset.y);
        let treex2 = parseInt(document.querySelector("#plant2").dataset.x);
        let treey2 = parseInt(document.querySelector("#plant2").dataset.y);
        let treex3 = parseInt(document.querySelector("#plant3").dataset.x);
        let treey3 = parseInt(document.querySelector("#plant3").dataset.y);
        if(newX == treex1 && newY == treey1 && check1 == 1){
          document.querySelector("#plant1").style.opacity = "0"
          count++
          check1 = 0;
        }
        if(newX == treex2 && newY == treey2 && check2 == 1){
          document.querySelector("#plant2").style.opacity = "0"
          count++
          check2 = 0;
        }
        if(newX == treex3 && newY == treey3 && check3 == 1){
          document.querySelector("#plant3").style.opacity = "0"
          count++
          check3 = 0;
        }
        if (count == 3){
				alert("YOU WIN !!!");
          	document.querySelector("body").style.animation = "swap 4s infinite linear";
          document.querySelector(".font").style.animation = "move 10s infinite linear";
          	count = 0;
        }
      }
      
    </script>
  </body>
</html>