เกมเดินเก็บของ (Copy 1083) (Copy 1448)
✨ Alpaca TV
<html> <head> <title>Let's Start </title> <style> body { margin: 0; display: flex; --blockSize: calc(100% / 9); background: #eef; overflow: hidden; background-image: url(https://images7.alphacoders.com/310/thumb-1920-310611.jpg); background-repeat: no-repeat; background-size: cover; animation: back 30s infinite; } @keyframes back { 0%, 100% { background-image: url(https://wallpapercave.com/wp/wp4151500.jpg); background-repeat: no-repeat; background-size: cover; } 33% { background-image: url(https://w.wallha.com/ws/8/nylWLkVq.png); background-repeat: no-repeat; background-size: cover; } 66% { background-image: url(https://images7.alphacoders.com/310/thumb-1920-310611.jpg); background-repeat: no-repeat; background-size: cover; } } @keyframes swap { 0%, 100% { background-color: red; } 33% { background-color: green; } 66% { background-color: blue; } } @keyframes swap1 { 0%, 100% { background-color: hsl(245, 1%, 11%); } 33% { background-color: hsl(245, 29%, 21%); } 66% { background-color: hsl(245, 17%, 26%); } } .font { font-size: 200px; position: absolute; margin-top: 100px; margin-left: 800px; } @keyframes go { from { transform: translateX(0px); color: black; text-shadow: 0px 0px 10px black; } to { transform: translateX(-2800px); color: white; text-shadow: 0px 0px 10px white; } } @keyframes spin { 0%, 100% { transform: translateY(0px) skew(0deg) rotateY(-25deg); } 50% { transform: translateY(7px) skew(7deg) rotateY(25deg); } } @keyframes grown { 0%, 100% { transform: translateY(0px) skew(-3deg) scale(1); } 50% { transform: translateY(7px) skew(3deg) scale(1.1); } } @keyframes grass { 0%, 100% { transform: skew(-3deg) translatez(0px) scale(1.4); } 50% { transform: skew(3deg) translatez(10px) scale(1.5); } } #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; } #ground { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: yellowgreen; float: top; } #life { width: 26vmin; height: 14vmin; top: -100; right: -220; margin: auto; position: relative; float: top; } #bar { width: 100%; height: 100%; position: flex; top: -8; left: 0; float: top; } #pok { width: 26vmin; height: 14vmin; top: 100; right: 90; margin: auto; position: relative; float: bottom; } #ket { width: 100%; height: 100%; position: flex; top: -8; left: 0; float: top; } #wes { width: 26vmin; height: 14vmin; top: 0; right: -100; margin: auto; position: relative; float: bottom; } #pon { width: 100%; height: 100%; position: flex; top: -8; left: 0; float: top; } 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 { height: 16px; width: -16px; background-image: url('https://31.media.tumblr.com/088786d466c3a315d6043b8e59d96770/tumblr_msu2ojWkqz1scncwdo1_500.gif'); /*animation: move 1s steps(4, end) infinite;*/ transform: scale(4); } /* @keyframes move { from { background-position-x: 0px; } to { background-position-x: 256px; } }*/ obj.coin { background-image: url(https://www.iconpacks.net/icons/1/free-coin-icon-794-thumb.png); transition: .3s; transform: scale(0.7); animation: spin 4s infinite; } obj.rock { background-image: url(https://image.flaticon.com/icons/png/128/346/346213.png); transform: scale(1.5); transition: .3s; animation: grass 4s infinite; } obj.ghost { background-image: url(https://cdn.iconscout.com/icon/free/png-256/ghost-evil-halloween-spirit-fear-31440.png); transition: .3s; animation: grown 3s infinite; } obj.wall { background-image: url(https://www.seekpng.com/png/full/396-3967087_rock-goron-mask-pixel-art.png); transform: scale(1.3); } button { position: absolute; margin-left: 300px; margin-top: 20px; } obj.heart { background-image: url(https://cdn.pixabay.com/photo/2017/09/23/16/33/pixel-heart-2779422_1280.png); transform: scale(6.1); } obj.money { background-image: url(https://www.iconpacks.net/icons/1/free-coin-icon-794-thumb.png); transform: scale(7); opacity: 0.5; } obj.pix { background-image: url(https://i.pinimg.com/originals/61/12/71/611271085d9f865f986f9f2c4dfe27c1.gif); transform: scale(1); } obj.sword { background-image: url(https://i.gifer.com/Vg7.gif); transform: scale(1.3); } obj.pixuse { background-image: url(https://i.pinimg.com/originals/d1/48/c8/d148c8ec1b1a7603bfa5ee4ff43f2732.png); transform: scale(7); opacity: 0.5; } obj.sworduse { background-image: url(https://www.seekpng.com/png/full/147-1473948_who-needs-diamond-swords-minecraft-animated-diamond-sword.png); transform: scale(7); opacity: 0.5; } </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="wes"> <div id="pon"> <obj class="pixuse" data-x="0" data-y="2" id="pixuse"> </obj> <obj class="sworduse" data-x="8" data-y="2" id="sworduse"> </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> <obj class="wall" data-x="7" data-y="2" id="wall1"> </obj> <obj class="wall" data-x="3" data-y="6" id="wall2"> </obj> <obj class="wall" data-x="8" data-y="8" id="wall3"> </obj> <obj class="wall" data-x="0" data-y="4" id="wall4"> </obj> <obj class="pix" data-x="8" data-y="0" id="pix"> </obj> <obj class="sword" data-x="0" data-y="8" id="sword"> </obj> <obj class="rock" data-x="2" data-y="0" id="rock1"> </obj> <obj class="rock" data-x="2" data-y="1" id="rock2"> </obj> <obj class="rock" data-x="2" data-y="2" id="rock3"> </obj> <obj class="rock" data-x="2" data-y="3" id="rock4"> </obj> <obj class="rock" data-x="2" data-y="4" id="rock5"> </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; var pee1 = 1; var pee2 = 1; var pee3 = 1; var heart = 3; var pix1 = 0; var sword1 = 0; function wtf() { let coin1 = document.querySelector("#coin1"); let coin2 = document.querySelector("#coin2"); let coin3 = document.querySelector("#coin3"); let ghost1 = document.querySelector("#ghost1"); let ghost2 = document.querySelector("#ghost2"); let ghost3 = document.querySelector("#ghost3"); let heart1 = document.querySelector("#heart1"); let heart2 = document.querySelector("#heart2"); let heart3 = document.querySelector("#heart3"); let money1 = document.querySelector("#money1"); let money2 = document.querySelector("#money2"); let money3 = document.querySelector("#money3"); let pix = document.querySelector("#pix"); let sword = document.querySelector("#sword"); let pixuse = document.querySelector("#pixuse"); let sworduse = document.querySelector("#sworduse"); let coinx1 = Math.floor(Math.random() * 8); let coiny1 = Math.floor(Math.random() * 8); if (coinx1 == 4 && coiny1 == 4){ let coinx1 = Math.floor(Math.random() * 8); let coiny1 = Math.floor(Math.random() * 8); } let coinx2 = Math.floor(Math.random() * 8); let coiny2 = Math.floor(Math.random() * 8); if (coinx2 == 4 && coiny2 == 4){ let coinx2 = Math.floor(Math.random() * 8); let coiny2 = Math.floor(Math.random() * 8); } let coinx3 = Math.floor(Math.random() * 8); let coiny3 = Math.floor(Math.random() * 8); if (coinx3 == 4 && coiny3 == 4){ let coinx3 = Math.floor(Math.random() * 8); let coiny3 = Math.floor(Math.random() * 8); } let ghostx1 = Math.floor(Math.random() * 7 + 1); let ghosty1 = Math.floor(Math.random() * 7 + 1); if (ghostx1 == 4 && ghosty1 == 4){ let ghostx1 = Math.floor(Math.random() * 8); let ghosty1 = Math.floor(Math.random() * 8); } let ghostx2 = Math.floor(Math.random() * 7+1); let ghosty2 = Math.floor(Math.random() * 7+1); if (ghostx2 == 4 && ghosty2 == 4){ let ghostx2 = Math.floor(Math.random() * 8); let ghosty2 = Math.floor(Math.random() * 8); } let ghostx3 = Math.floor(Math.random() * 7+1); let ghosty3 = Math.floor(Math.random() * 7+1); if (ghostx3 == 4 && ghosty3 == 4){ let ghostx3 = Math.floor(Math.random() * 8); let ghosty3 = Math.floor(Math.random() * 8); } let rockx1 = Math.floor(Math.random() * 8); let rocky1 = Math.floor(Math.random() * 8); let rockx2 = Math.floor(Math.random() * 8); let rocky2 = Math.floor(Math.random() * 8); let rockx3 = Math.floor(Math.random() * 8); let rocky3 = Math.floor(Math.random() * 8); let rockx4 = Math.floor(Math.random() * 8); let rocky4 = Math.floor(Math.random() * 8); let rockx5 = Math.floor(Math.random() * 8); let rocky5 = Math.floor(Math.random() * 8); coin1.dataset.x = coinx1; coin1.dataset.y = coiny1; coin2.dataset.x = coinx2; coin2.dataset.y = coiny2; coin3.dataset.x = coinx3; coin3.dataset.y = coiny3; ghost1.dataset.x = ghostx1; ghost1.dataset.y = ghosty1; ghost2.dataset.x = ghostx2; ghost2.dataset.y = ghosty2; ghost3.dataset.x = ghostx3; ghost3.dataset.y = ghosty3; rock1.dataset.x = rockx1; rock1.dataset.y = rocky1; rock2.dataset.x = rockx2; rock2.dataset.y = rocky2; rock3.dataset.x = rockx3; rock3.dataset.y = rocky3; rock4.dataset.x = rockx4; rock4.dataset.y = rocky4; rock5.dataset.x = rockx5; rock5.dataset.y = rocky5; count = 0; check1 = 1; check2 = 1; check3 = 1; pee1 = 1; pee2 = 1; pee3 = 1; heart = 3; pix1 = 0; sword1 = 0; document.querySelector(".font").style.animation = "none"; document.querySelector("body").style.animation = "none"; document.querySelector("#coin1").style.opacity = "1"; document.querySelector("#coin2").style.opacity = "1"; document.querySelector("#coin3").style.opacity = "1"; document.querySelector("#char").dataset.x = "4"; document.querySelector("#char").dataset.y = "4"; document.querySelector("#pix").dataset.x = "8"; document.querySelector("#pix").dataset.y = "0"; document.querySelector("#sword").dataset.x = "0"; document.querySelector("#sword").dataset.y = "8"; document.querySelector("#pix").style.opacity = "1"; document.querySelector("#sword").style.opacity = "1"; document.querySelector("#ghost1").style.opacity = "1"; document.querySelector("#ghost2").style.opacity = "1"; document.querySelector("#ghost3").style.opacity = "1"; document.querySelector("#wall4").style.opacity = "1"; document.querySelector("#wall1").style.opacity = "1"; document.querySelector("#wall2").style.opacity = "1"; document.querySelector("#wall3").style.opacity = "1"; document.querySelector("#heart1").style.opacity = "1"; document.querySelector("#heart2").style.opacity = "1"; document.querySelector("#heart3").style.opacity = "1"; document.querySelector("#money1").style.opacity = "0.5"; document.querySelector("#money2").style.opacity = "0.5"; document.querySelector("#money3").style.opacity = "0.5"; document.querySelector("#pixuse").style.opacity = "0.5"; document.querySelector("#sworduse").style.opacity = "0.5"; } 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)) { return 1; } if (((newX == 7 && newY == 2) || (newX == 3 && newY == 6) || (newX == 8 && newY == 8) || (newX == 0 && newY == 4)) && pix1 == 0) { return 1; } if ((newX == 7 && newY == 2) && pix1 == 1) { alert("ทำลาย!!") document.querySelector("#wall1").style.opacity = "0"; } if ((newX == 3 && newY == 6) && pix1 == 1) { alert("ทำลาย!!") document.querySelector("#wall2").style.opacity = "0"; } if ((newX == 8 && newY == 8) && pix1 == 1) { alert("ทำลาย!!") document.querySelector("#wall3").style.opacity = "0"; } if ((newX == 0 && newY == 4) && pix1 == 1) { alert("ทำลาย!!") document.querySelector("#wall4").style.opacity = "0"; } if ((newX == 8 && newY == 0)) { document.querySelector("#pix").style.opacity = "0"; alert("ได้ Pickaxe !!") pix1 = 1; document.querySelector("#pixuse").style.opacity = "1"; } if ((newX == 0 && newY == 8)) { document.querySelector("#sword").style.opacity = "0"; alert("ได้ Sword !!") sword1 = 1; document.querySelector("#sworduse").style.opacity = "1"; } let peex1 = parseInt(document.querySelector("#ghost1").dataset.x); let peey1 = parseInt(document.querySelector("#ghost1").dataset.y); let peex2 = parseInt(document.querySelector("#ghost2").dataset.x); let peey2 = parseInt(document.querySelector("#ghost2").dataset.y); let peex3 = parseInt(document.querySelector("#ghost3").dataset.x); let peey3 = parseInt(document.querySelector("#ghost3").dataset.y); if (newX == peex1 && newY == peey1 && pee1 == 1 && sword1 == 1) { document.querySelector("#ghost1").style.opacity = "0" pee1 = 0; alert("ผีตาน") } if (newX == peex2 && newY == peey2 && pee2 == 1 && sword1 == 1) { document.querySelector("#ghost2").style.opacity = "0" pee2 = 0; alert("ผีตาน") } if (newX == peex3 && newY == peey3 && pee3 == 1 && sword1 == 1) { document.querySelector("#ghost3").style.opacity = "0" pee3 = 0; alert("ผีตาน") } if (newX == peex1 && newY == peey1 && pee1 == 1 && sword1 == 0) { document.querySelector("#ghost1").style.opacity = "0" pee1 = 0; heart -= 1; alert("ตาน") } if (newX == peex2 && newY == peey2 && pee2 == 1 && sword1 == 0) { document.querySelector("#ghost2").style.opacity = "0" pee2 = 0; heart -= 1; alert("ตาน") } if (newX == peex3 && newY == peey3 && pee3 == 1 && sword1 == 0) { document.querySelector("#ghost3").style.opacity = "0" pee3 = 0; heart -= 1; alert("ตาน") } if (heart == 2) { document.querySelector("#heart1").style.opacity = "0.5" } if (heart == 1) { document.querySelector("#heart2").style.opacity = "0.5" } if (heart == 0) { document.querySelector("#heart3").style.opacity = "0.5" document.querySelector(".font").innerHTML = "LOSE"; document.querySelector(".font").style.animation = "go 1s infinite linear"; document.querySelector("body").style.animation = "swap1 4s infinite linear"; alert("ตายเเล้ว") return 1; } let treex1 = parseInt(document.querySelector("#coin1").dataset.x); let treey1 = parseInt(document.querySelector("#coin1").dataset.y); let treex2 = parseInt(document.querySelector("#coin2").dataset.x); let treey2 = parseInt(document.querySelector("#coin2").dataset.y); let treex3 = parseInt(document.querySelector("#coin3").dataset.x); let treey3 = parseInt(document.querySelector("#coin3").dataset.y); if (newX == treex1 && newY == treey1 && check1 == 1) { document.querySelector("#coin1").style.opacity = "0" count++ check1 = 0; } if (newX == treex2 && newY == treey2 && check2 == 1) { document.querySelector("#coin2").style.opacity = "0" count++ check2 = 0; } if (newX == treex3 && newY == treey3 && check3 == 1) { document.querySelector("#coin3").style.opacity = "0" count++ check3 = 0; } 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>