Click here for free DL of the app version that can save data.

No:51968

An Avencher game where you k○ll slims and you gain..ALL
Developer User21723｜Date and time 24/3/17 7:17:17
Build time 7.556 sec｜Game capacity 2.527KB｜

Script

Slim Adventure Game

Money: 0

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
    <title>Slim Adventure Game</title>
    <style>
        body {
            text-align: center;
        }
        #gameArea {
            width: 100%;
            height: 500px;
            border: 1px solid black;
            margin: 0 auto;
            position: relative;
        }
        #player {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 50px;
            height: 50px;
            background-color: blue;
        }
        #slim {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 50px;
            height: 50px;
            background-color: green;
        }
    </style>
</head>
<body>
    <h1>Slim Adventure Game</h1>
    <div id="gameArea">
        <div id="player"></div>
        <div id="slim"></div>
    </div>

<h2>Money: <span id="money">0</span></h2>
    <button onclick="upgrade()">Upgrade</button>

function movePlayer(event) {
            if (event.key === 'ArrowLeft' && player.offsetLeft > 0) {
                player.style.left = `${player.offsetLeft - 10}px`;
            } else if (event.key === 'ArrowRight' && player.offsetLeft < gameArea.offsetWidth - player.offsetWidth) {
                player.style.left = `${player.offsetLeft + 10}px`;
            }
        }

document.addEventListener('keydown', movePlayer);

function checkCollision() {
            let playerRect = player.getBoundingClientRect();
            let slimRect = slim.getBoundingClientRect();

if (playerRect.top < slimRect.bottom && playerRect.bottom > slimRect.top && playerRect.left < slimRect.right && playerRect.right > slimRect.left) {
                money += 10;
                document.getElementById('money').innerText = money;
                slim.style.top = `${Math.floor(Math.random() * 400)}px`;
            }
        }

setInterval(checkCollision, 100);
    </script>
</body>
</html>