ヘビゲーム's game | AI game creator

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

No:32662

64

ヘビゲーム
Developer User15474｜Date and time 23/12/31 20:05:03
Build time 49.441 sec｜Game capacity 4.281KB｜

了解です。以下にヘビゲームの実装例を示します。

このコードでは、HTMLの`canvas`要素を使用してヘビゲームを作成しています。`script`タグ内にJavaScriptの処理が記述されており、キー入力の受け付けやヘビの移動・描画、フードの生成、ゲームオーバーの判定などの機能が実装されています。ヘビは矩形で表現され、ヘビの頭の位置や移動方向は変数`snake`、キー入力による方向転換は`changeDirection`関数で行われます。フードの位置は変数`food`で管理されており、ヘビがフードに触れると長さが伸びます。ゲームオーバーの判定は、ヘビの頭が画面外に出たり、自身の体に触れた場合に行われます。実際のゲーム画面は、HTMLファイルをブラウザで開くことで遊ぶことができます。スマートフォンでも操作が可能です。以上が、HTMLファイルとして実装されたヘビゲームの例です。

→ 　

0　

0　

　
　
　
　

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

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

(C)2023 HisashiApp

了解です。以下にヘビゲームの実装例を示します。

```
<!DOCTYPE html>
<html>
<head>
    <title>ヘビゲーム</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        canvas {
            background: #f0f0f0;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

<script>
        // ゲームの設定
        const canvas = document.getElementById("gameCanvas");
        const context = canvas.getContext("2d");
        const gridSize = 20;
        let snake = [{x: 0, y: 0}];
        let food = {x: 200, y: 200};
        let dx = gridSize;
        let dy = 0;

// キー入力の処理
        document.addEventListener("keydown", changeDirection);

function changeDirection(event) {
            const key = event.keyCode;
            if (key === 37 && dx !== gridSize) {
                dx = -gridSize;
                dy = 0;
            } else if (key === 38 && dy !== gridSize) {
                dx = 0;
                dy = -gridSize;
            } else if (key === 39 && dx !== -gridSize) {
                dx = gridSize;
                dy = 0;
            } else if (key === 40 && dy !== -gridSize) {
                dx = 0;
                dy = gridSize;
            }
        }

// ヘビの移動と描画
        function move() {
            const head = {x: snake[0].x + dx, y: snake[0].y + dy};
            snake.unshift(head);
            if (head.x === food.x && head.y === food.y) {
                generateFood();
            } else {
                snake.pop();
            }
        }

function draw() {
            context.clearRect(0, 0, canvas.width, canvas.height);
            drawSnake();
            drawFood();
        }

function drawSnake() {
            snake.forEach(part => {
                context.fillStyle = "#44aaff";
                context.fillRect(part.x, part.y, gridSize, gridSize);
            });
        }

function drawFood() {
            context.fillStyle = "#ff4444";
            context.fillRect(food.x, food.y, gridSize, gridSize);
        }

// ゲームのループ
        function gameLoop() {
            move();
            draw();

if (isGameOver()) {
                clearInterval(interval);
                alert("ゲームオーバー");
            }
        }

const interval = setInterval(gameLoop, 100);

// フード生成の関数
        function generateFood() {
            food.x = Math.floor(Math.random() * (canvas.width / gridSize)) * gridSize;
            food.y = Math.floor(Math.random() * (canvas.height / gridSize)) * gridSize;
        }

// ゲームオーバー判定の関数
        function isGameOver() {
            if (snake[0].x < 0 || snake[0].x >= canvas.width ||
                snake[0].y < 0 || snake[0].y >= canvas.height) {
                return true;
            }
            for (let i = 1; i < snake.length; i++) {
                if (snake[0].x === snake[i].x && snake[0].y === snake[i].y) {
                    return true;
                }
            }
            return false;
        }
    </script>
</body>
</html>
```

このコードでは、HTMLの`canvas`要素を使用してヘビゲームを作成しています。`script`タグ内にJavaScriptの処理が記述されており、キー入力の受け付けやヘビの移動・描画、フードの生成、ゲームオーバーの判定などの機能が実装されています。

ヘビは矩形で表現され、ヘビの頭の位置や移動方向は変数`snake`、キー入力による方向転換は`changeDirection`関数で行われます。フードの位置は変数`food`で管理されており、ヘビがフードに触れると長さが伸びます。

ゲームオーバーの判定は、ヘビの頭が画面外に出たり、自身の体に触れた場合に行われます。

実際のゲーム画面は、HTMLファイルをブラウザで開くことで遊ぶことができます。スマートフォンでも操作が可能です。

以上が、HTMLファイルとして実装されたヘビゲームの例です。