Week 4 – walk (Copy 957)
✨ นายนพณัฐ คำเมือง
<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.coin{ background-image:url(https://www.iconpacks.net/icons/1/free-coin-icon-794-thumb.png); transition:.3s; } obj.plant{ background-image:url(https://www.flaticon.com/svg/vstatic/svg/500/500351.svg?token=exp=1612332461~hmac=c84bd7393d24a50eb19ea47c24371336) } obj.ghost{ background-image:url(https://www.flaticon.com/svg/vstatic/svg/1234/1234844.svg?token=exp=1612333039~hmac=e157c879908657bea1bf44f68cb0bddd) } </style> </head> <body> <div id="canvas"> <div id="ground"> </div> <obj id="char" data-x="4" data-y="4"> </obj> <obj class="coin" data-x="6" data-y="2"> </obj> <obj class="coin" data-x="4" data-y="7"> </obj> <obj class="coin" data-x="1" data-y="2"> </obj> <obj class="plant" data-x="1" data-y="3"> </obj> <obj class="plant" data-x="2" data-y="2"> </obj> <obj class="plant" data-x="5" data-y="2"> </obj> <obj class="plant" data-x="6" data-y="3"> </obj> <obj class="plant" data-x="3" data-y="6"> </obj> <obj class="ghost" data-x="4" data-y="6"> </obj> <obj class="ghost" data-x="7" data-y="3"> </obj> <obj class="ghost" data-x="3" 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-- } if(newY >= 9 || newY <= -1 || newX <= -1 || newX >= 9){ return 1; } if((newX == 1 && newY == 3)||(newX == 2 && newY == 2)||(newX == 5 && newY == 2)||(newX == 6 && newY == 3)||(newX == 3 && newY == 6)){ return 1; } if((newX == 4 && newY == 6)||(newX == 7 && newY == 3)||(newX == 3 && newY == 2)){ alert("กูว่าแล้วมึงต้องชน"); return 1; } char.dataset.y = newY char.dataset.x = newX if(newX == 6 && newY == 2){ document.querySelector('.coin[data-x="6"][data-y="2"]').style.opacity = "0" } if(newX == 3 && newY == 7){ document.querySelector('.coin[data-x="3"][data-y="7"]').style.opacity = "0" } if(newX == 1 && newY == 2){ document.querySelector('.coin[data-x="1"][data-y="2"]').style.opacity = "0" } } </script> </body> </html>