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

✨ elzaphaN TV

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      
      body{
        margin:0;
        display:flex;
        --blockSize:calc(100% / 9);
        background:#eef;
        overflow: hidden;
        background-repeat: no-repeat;
  			background-size: cover;
        animation: back 30s infinite;
      }
      #canvas{
        width:80vmin;
        height:80vmin;
        background:pink;
        margin:auto;
        position:relative;
        float:top;
        border: 3.2px solid;
        box-shadow: 5px 5px white, 10px 10px gray, 15px 15px black;
      }
      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{
        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{
        height: 16px;
        width: -16px;
        background-image: url('https://31.media.tumblr.com/088786d466c3a315d6043b8e59d96770/tumblr_msu2ojWkqz1scncwdo1_500.gif');

transform: scale(4);
      }
    
    </style>
  </head>
  <body>
    <div id="life">
      <div id="bar">
        <obj class="heart" data-x="0" data-y="2" id="heart1">
      </obj>
        <obj class="heart" data-x="4" data-y="2" id="heart2">
      </obj>
        <obj class="heart" data-x="8" data-y="2" id="heart3">
      </obj>
      </div>
    </div>
    <div id="pok">
      <div id="ket">
        <obj class="money" data-x="0" data-y="2" id="money1">
      </obj>
        <obj class="money" data-x="4" data-y="2" id="money2">
      </obj>
        <obj class="money" data-x="8" data-y="2" id="money3">
      </obj>
      </div>
    </div>
    <div id="canvas">
      <div id="ground">
      </div>
      <obj id="char" data-x="4" data-y="4">
      </obj>
      <obj class="coin" data-x="0" data-y="0" id="coin1">
      </obj>
      <obj class="coin" data-x="0" data-y="1" id="coin2">
      </obj>
      <obj class="coin" data-x="0" data-y="2" id="coin3">
      </obj>
      <obj class="ghost" data-x="1" data-y="0" id="ghost1">
      </obj>
      <obj class="ghost" data-x="1" data-y="1" id="ghost2">
      </obj>
      <obj class="ghost" data-x="1" data-y="2" id="ghost3">
      </obj>
    </div>
    <button onclick="wtf()">
      NEW GAME
    </button>
    <script>
      begin()
      var count = 0;
      var check1 = 1;
      var check2 = 1;
      var check3 = 1;
      var pee1 = 1;
      var pee2 = 1;
      var pee3 = 1;
      var heart = 3;
      var pix1 = 0;
      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"||event.key == "s"||event.key == "ห"){
          newY++
        }
        if(event.key == "ArrowUp"||event.key == "w"||event.key == "ไ"){
          newY--
        }
        if(event.key == "ArrowRight"||event.key == "d"||event.key == "ก"){
          newX++
        }
        if(event.key == "ArrowLeft"||event.key == "a"||event.key == "ฟ"){
          newX--
        }
        if((newY >= 9 || newY <= -1 || newX <= -1 || newX >= 9)||(newX == 7 && newY == 2)||(newX == 3 && newY == 6)||(newX == 8 && newY == 8)||(newX == 0 && newY == 4)){
			return 1;
        }
        if (count == 1){
          document.querySelector("#money1").style.opacity = "1";
        }
        if (count == 2){
          document.querySelector("#money2").style.opacity = "1";
        }
        if (count == 3){
			 alert("YOU WIN !!!");
          document.querySelector("#money3").style.opacity = "1";
          document.querySelector(".font").innerHTML = "WIN";
          document.querySelector("body").style.animation = "swap 4s infinite linear";
          document.querySelector(".font").style.animation = "go 1s infinite linear";
          return 1;
        }

char.dataset.y = newY
        char.dataset.x = newX
        
      }
      
    </script>
  </body>
</html>