ひさしをショック死させるゲーム

😱

Game Over 😵

あなたのスコアはです。

※概要：プレイヤーである「ひさし」を操作して、落下してくる「🔨」を避け続けるゲーム。障害物がぶつかるとひさしはショック死してしまうため、なるべく長く生き延びることが目標となる。スマホで遊びやすいようにタッチ操作に対応し、絵文字を多用して楽しく遊べるようにした。

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Shock Death Game</title>
    <style>
        body {
            background-color: #f7dc6f;
            text-align: center;
        }
        #startButton, #gameOver {
            display: none;
        }
        #gameContainer {
            position: relative;
            width: 100%;
            height: 80vh;
        }
        #player {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translate(-50%);
            font-size: 3em;
        }
        .obstacle {
            position: absolute;
            bottom: 100%;
            text-align: center;
            font-size: 3em;
            width: 20%;
            height: 10vh;
        }
        #gameScore {
            font-size: 3em;
        }
    </style>
</head>
<body>
    <h1>ひさしをショック死させるゲーム</h1>
    <div id="gameContainer">
        <div id="player">😱</div>
    </div>
    <div id="gameScore">0</div>
    <button id="startButton">スタート！</button>
    <div id="gameOver">
        <h2>Game Over 😵</h2>
        <p>あなたのスコアは<span id="finalScore"></span>です。</p>
    </div>
    <script>
        const gameContainer = document.getElementById("gameContainer");
        const player = document.getElementById("player");
        const startButton = document.getElementById("startButton");
        const gameScore = document.getElementById("gameScore");
        const gameOver = document.getElementById("gameOver");
        const finalScore = document.getElementById("finalScore");

let score = 0;
        let gameLoop;
        let obstacleInterval;

// プレイヤーの操作
        const handleTouch = () => {
            player.style.bottom = "20vh";
            setTimeout(() => {
                player.style.bottom = "0";
            }, 500);
        };

// 障害物を生成
        const createObstacle = () => {
            const obstacle = document.createElement("div");
            obstacle.classList.add("obstacle");
            obstacle.innerText = "🔨";
            obstacle.style.left = Math.random() * 80 + 10 + "%";
            gameContainer.appendChild(obstacle);
            // 障害物を下に移動させる
            obstacleInterval = setInterval(() => {
                obstacle.style.bottom = parseInt(obstacle.style.bottom) - 10 + "vh";
                // プレイヤーと障害物がぶつかったらゲームオーバー
                if (parseInt(obstacle.style.bottom) <= 10 && parseInt(obstacle.style.left) - 20 < parseInt(player.style.left) && parseInt(player.style.left) < parseInt(obstacle.style.left) + 20) {
                    gameOverGame();
                }
                // 障害物が画面外に出たら削除
                if (parseInt(obstacle.style.bottom) < -10) {
                    obstacle.remove();
                    score++;
                    gameScore.innerText = score;
                }
            }, 100);
        };

// ゲームスタート
        const startGame = () => {
            startButton.style.display = "none";
            gameLoop = setInterval(createObstacle, 1500);
            gameContainer.addEventListener("touchstart", handleTouch);
        };

// ゲームオーバー
        const gameOverGame = () => {
            clearInterval(gameLoop);
            clearInterval(obstacleInterval);
            gameContainer.removeEventListener("touchstart", handleTouch);
            finalScore.innerText = score;
            gameOver.style.display = "block";
        };

// スタートボタン押下でゲームスタート
        startButton.addEventListener("click", startGame);
    </script>
</body>
</html>