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