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

No:23432

←

Prev Next

→

ヘビゲーム
Developer User10877｜Date and time 23/10/30 18:08:56
Build time 105.473 sec｜Game capacity 6.249KB｜

Script

了解しました。ヘビゲームを実装します。以下が実際のプログラムです。

ヘビゲーム

このプログラムは、スマートフォンで遊ぶことを前提としており、HTMLによって表示されるヘビとフードの要素をJavaScriptで操作し、ゲームが進行するごとに描画を更新しています。キーボードの方向キーでヘビを操作し、フードを食べながらヘビを成長させることが目的です。ヘビが自身と衝突した場合や画面外に出た場合にはゲームオーバーとなり、アラートが表示されます。ご希望の条件に合うようなヘビゲームを実装しました。お楽しみいただければ幸いです。

←

Prev　Next

→ 　

Back　

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

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

了解しました。ヘビゲームを実装します。以下が実際のプログラムです。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ヘビゲーム</title>
    <style>
        #gameBoard {
            width: 400px;
            height: 400px;
            border: 1px solid black;
            position: relative;
            overflow: hidden;
        }

.snake {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: green;
        }

.food {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: red;
        }
    </style>
</head>
<body>
    <h1>ヘビゲーム</h1>
    <div id="gameBoard"></div>
    
    <script>
        // ゲームの設定
        const gameBoard = document.getElementById("gameBoard");
        const gameBoardWidth = gameBoard.clientWidth;
        const gameBoardHeight = gameBoard.clientHeight;
        const snakeSize = 20;
        const foodSize = 20;
        let snake = [{ x: 0, y: 0 }];
        let food = getRandomPosition();

// キーボードの操作
        document.addEventListener("keydown", changeDirection);

// ゲームループ
        setInterval(gameLoop, 100);
        
        function gameLoop() {
            moveSnake();
            if (isGameOver()) {
                endGame();
                return;
            }
            if (isFoodEaten()) {
                increaseSnake();
                updateFood();
            }
            drawGame();
        }

// ヘビの移動
        function moveSnake() {
            const head = { x: snake[0].x, y: snake[0].y };
            if (direction === "right") {
                head.x += snakeSize;
            } else if (direction === "left") {
                head.x -= snakeSize;
            } else if (direction === "up") {
                head.y -= snakeSize;
            } else if (direction === "down") {
                head.y += snakeSize;
            }
            snake.unshift(head);
            snake.pop();
        }

// ゲームオーバーの判定
        function isGameOver() {
            const head = snake[0];
            return (
                head.x < 0 ||
                head.y < 0 ||
                head.x >= gameBoardWidth ||
                head.y >= gameBoardHeight ||
                isCollidingWithSelf()
            );
        }

// 自身との衝突判定
        function isCollidingWithSelf() {
            const head = snake[0];
            for (let i = 1; i < snake.length; i++) {
                if (head.x === snake[i].x && head.y === snake[i].y) {
                    return true;
                }
            }
            return false;
        }

// フードの生成
        function updateFood() {
            food = getRandomPosition();
        }

// フードの位置をランダムに取得
        function getRandomPosition() {
            const x = getRandomNumber(0, gameBoardWidth / foodSize - 1) * foodSize;
            const y = getRandomNumber(0, gameBoardHeight / foodSize - 1) * foodSize;
            return { x, y };
        }

// ランダムな数値を取得
        function getRandomNumber(min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min);
        }

// ヘビの拡大
        function increaseSnake() {
            const tail = { x: snake[0].x, y: snake[0].y };
            snake.unshift(tail);
        }

// フードの取得判定
        function isFoodEaten() {
            const head = snake[0];
            return head.x === food.x && head.y === food.y;
        }

// ゲームの描画
        function drawGame() {
            gameBoard.innerHTML = "";

// ヘビの描画
            for (let i = 0; i < snake.length; i++) {
                const snakeElement = document.createElement("div");
                snakeElement.style.width = snakeSize + "px";
                snakeElement.style.height = snakeSize + "px";
                snakeElement.style.backgroundColor = "green";
                snakeElement.style.position = "absolute";
                snakeElement.style.left = snake[i].x + "px";
                snakeElement.style.top = snake[i].y + "px";
                gameBoard.appendChild(snakeElement);
            }

// フードの描画
            const foodElement = document.createElement("div");
            foodElement.style.width = foodSize + "px";
            foodElement.style.height = foodSize + "px";
            foodElement.style.backgroundColor = "red";
            foodElement.style.position = "absolute";
            foodElement.style.left = food.x + "px";
            foodElement.style.top = food.y + "px";
            gameBoard.appendChild(foodElement);
        }

// ゲームオーバー時の処理
        function endGame() {
            clearInterval(gameLoop);
            alert("ゲームオーバー");
        }
    </script>
</body>
</html>
```

ご希望の条件に合うようなヘビゲームを実装しました。お楽しみいただければ幸いです。