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

No:13481

139

←

Prev Next

→

<br>1
Developer User4403｜Date and time 23/8/28 13:27:50
Build time 10.944 sec｜Game capacity 3.43KB｜

Script

Simple Game

Score: 0

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Game</title>
    <style>
        body {
            text-align: center;
            font-family: Arial, sans-serif;
            background-color: #f2f2f2;
        }

h1 {
            color: #333;
        }

#game-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

#score {
            font-size: 24px;
            margin-bottom: 20px;
        }

#message {
            font-size: 18px;
            margin-bottom: 20px;
        }

#start-button {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            background-color: #333;
            color: white;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="game-container">
        <h1>Simple Game</h1>
        <div id="score">Score: 0</div>
        <div id="message"></div>
        <button id="start-button" onclick="startGame()">Start</button>
    </div>

function startGame() {
            score = 0;
            document.getElementById("score").textContent = "Score: 0";
            document.getElementById("message").textContent = "";

document.getElementById("start-button").style.display = "none";
            document.addEventListener("keydown", movePlayer);

timer = setInterval(moveEnemy, 500);
        }

function movePlayer(event) {
            var key = event.key;

if (key === "ArrowUp") {
                document.getElementById("message").textContent = "⬆️ Moving up!";
            } else if (key === "ArrowDown") {
                document.getElementById("message").textContent = "⬇️ Moving down!";
            } else if (key === "ArrowLeft") {
                document.getElementById("message").textContent = "⬅️ Moving left!";
            } else if (key === "ArrowRight") {
                document.getElementById("message").textContent = "➡️ Moving right!";
            } else {
                return;
            }

score++;
            document.getElementById("score").textContent = "Score: " + score;
        }

function moveEnemy() {
            var enemy = document.createElement("div");
            enemy.textContent = "👾";
            enemy.style.position = "absolute";
            enemy.style.top = Math.random() * 90 + "%";
            enemy.style.left = Math.random() * 90 + "%";
            enemy.style.fontSize = "32px";
            enemy.style.cursor = "pointer";

enemy.onclick = function () {
                score += 10;
                document.getElementById("score").textContent = "Score: " + score;
                enemy.remove();
            };

document.body.appendChild(enemy);

if (score >= 50) {
                clearInterval(timer);
                document.getElementById("message").textContent = "Game Over!";
                document.removeEventListener("keydown", movePlayer);
                document.getElementById("start-button").style.display = "block";
            }
        }
    </script>
</body>

</html>