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

No:18153

←

Prev Next

→

ヘビゲーム
Developer ぱおぱお｜Date and time 23/9/27 20:46:38
Build time 61.245 sec｜Game capacity 5.168KB｜

Script

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

ヘビゲーム

このプログラムは、スマートフォンのブラウザで遊べるヘビゲームです。ヘビが自動的に移動し、エサを食べることで長くなっていきます。ヘビが壁や自分自身に衝突するとゲームオーバーです。上下左右の矢印キーでヘビの移動方向を変更することができます。最後にゲームオーバー時にはスコアが表示されます。画面の左上にスコアが表示され、ゲームオーバー時にはアラートでスコアが表示されます。また、ゲーム画面は`<canvas>`要素を使用して描画されており、ヘビやエサは矩形で表現されています。以上がヘビゲームの実装例です。

←

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>
        body {
            text-align: center;
            font-family: sans-serif;
        }

canvas {
            border: 1px solid black;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>ヘビゲーム</h1>
    <canvas id="game" width="400" height="400"></canvas>

// ゲームの初期化
        function init() {
            // ヘビの初期位置を設定
            snake = [
                { x: 2, y: 0 },
                { x: 1, y: 0 },
                { x: 0, y: 0 }
            ];

// エサの位置をランダムに設定
            food = {
                x: Math.floor(Math.random() * 20),
                y: Math.floor(Math.random() * 20)
            };

direction = "right"; // ヘビの初期方向
            score = 0; // スコアを初期化

// ゲームループを開始
            main();
        }

// ゲームループの実行
        function main() {
            // ゲーム画面のキャンバス要素を取得
            var canvas = document.getElementById("game");
            var context = canvas.getContext("2d");

// ゲーム画面をクリア
            context.clearRect(0, 0, canvas.width, canvas.height);

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

// エサを食べた場合
            if (head.x === food.x && head.y === food.y) {
                score++;
                // 新しいエサの位置をランダムに設定
                food = {
                    x: Math.floor(Math.random() * 20),
                    y: Math.floor(Math.random() * 20)
                };
            } else {
                // ヘビの尾を削除
                snake.pop();
            }

// ゲーム画面上にヘビを描画
            snake.forEach(function (segment) {
                context.fillStyle = "green";
                context.fillRect(segment.x * snakeSize, segment.y * snakeSize, snakeSize, snakeSize);
            });

// ゲーム画面上にエサを描画
            context.fillStyle = "red";
            context.fillRect(food.x * snakeSize, food.y * snakeSize, snakeSize, snakeSize);

// スコアを表示
            context.fillStyle = "black";
            context.font = "20px sans-serif";
            context.fillText("Score: " + score, 10, 30);

// ゲームオーバー判定
            if (head.x < 0 || head.x >= canvas.width / snakeSize ||
                head.y < 0 || head.y >= canvas.height / snakeSize ||
                checkCollision(head)) {
                alert("ゲームオーバー！\nスコア: " + score);
                return;
            }

// 次のフレームを描画
            setTimeout(main, 150);
        }

// ヘビの衝突判定
        function checkCollision(head) {
            return snake.slice(1).some(function (segment) {
                return segment.x === head.x && segment.y === head.y;
            });
        }

// キーボード操作でヘビの移動方向を変更
        document.addEventListener("keydown", function (event) {
            if (event.keyCode === 37 && direction !== "right") {
                direction = "left";
            } else if (event.keyCode === 38 && direction !== "down") {
                direction = "up";
            } else if (event.keyCode === 39 && direction !== "left") {
                direction = "right";
            } else if (event.keyCode === 40 && direction !== "up") {
                direction = "down";
            }
        });

// ゲームを開始
        init();
    </script>
</body>
</html>
```

このプログラムは、スマートフォンのブラウザで遊べるヘビゲームです。ヘビが自動的に移動し、エサを食べることで長くなっていきます。ヘビが壁や自分自身に衝突するとゲームオーバーです。上下左右の矢印キーでヘビの移動方向を変更することができます。最後にゲームオーバー時にはスコアが表示されます。

画面の左上にスコアが表示され、ゲームオーバー時にはアラートでスコアが表示されます。また、ゲーム画面は`<canvas>`要素を使用して描画されており、ヘビやエサは矩形で表現されています。

以上がヘビゲームの実装例です。