Week 4 – walk (Copy 963)

✨ NIDA KONGRUNGRUENG

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body{
        margin:0;
        display:flex;
        --blockSize:calc(100% / 9);
        background:#eef;
      }
      #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;
      }
    </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="6" data-y="2">
      </obj>
      <obj class="plant" data-x="3" data-y="7">
      </obj>
      <obj class="plant" data-x="1" data-y="2">
      </obj>
    </div>
    <script>
      begin()
      let chaX = 4;
      let chaY = 4;
      let coin = [];
      // let cY = 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(event){
        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"){
          newY++
        }
        if(event.key == "ArrowUp"){
          newY--
        }
        if(event.key == "ArrowRight"){
          newX++
        }
        if(event.key == "ArrowLeft"){
          newX--
        }
        char.dataset.y = newY
        char.dataset.x = newX
        if(newX == 6 && newY == 2){
          document.querySelector('.plant[data-x="6"][data-y="2"]').style.opacity = "0"
        }
        if(newX == 1 && newY == 2){
          document.querySelector('.plant[data-x="1"][data-y="2"]').style.opacity = "0"
        }
      }
    </script>
  </body>
</html>