เกมเดินเก็บของ (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>