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

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

No:40037

78

ヘビゲーム
Developer 食べる鶏と熱いタバスコ｜Date and time 24/1/31 18:58:37
Build time 13.72 sec｜Game capacity 3.276KB｜

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

このプログラムでは、1枚のHTMLファイルでヘビゲームを実装しています。JavaScriptはscriptタグで囲まれており、実行開始しています。ゲーム画面は400px × 400pxの領域であり、黒い四角がヘビの頭の位置を示しています。ヘビの頭の座標を変数で管理し、キーボードの矢印キーに対応した方向に頭を移動させる処理が実装されています。ゲームが開始されると、キーボードの矢印キーを操作してヘビを動かすことができます。ヘビの頭は0.5秒ごとに指定した方向に移動します。このプログラムはスマホでもプレイ可能ですが、画面操作には対応していません。スマホ上でキーボードを表示し、キーボードの矢印キーをタップすることで操作できます。画面操作に対応させるには、タッチイベントの処理を追加する必要があります。

→ 　

0　

0　

　
　
　
　

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

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

(C)2023 HisashiApp

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>ヘビゲーム</title>
    <style>
        #game-container {
            width: 400px;
            height: 400px;
            border: 1px solid black;
            position: relative;
        }

.dot {
            width: 20px;
            height: 20px;
            background-color: black;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="snake-head" class="dot"></div>
    </div>

<script>
        document.addEventListener("DOMContentLoaded", function(event) {
            const gameContainer = document.getElementById("game-container");
            const snakeHead = document.getElementById("snake-head");

let snakeX = 0;
            let snakeY = 0;
            let direction = "right";

function updateSnakePosition() {
                if (direction === "right") {
                    snakeX += 20;
                } else if (direction === "left") {
                    snakeX -= 20;
                } else if (direction === "up") {
                    snakeY -= 20;
                } else if (direction === "down") {
                    snakeY += 20;
                }

snakeHead.style.left = snakeX + "px";
                snakeHead.style.top = snakeY + "px";
            }

function handleKeyDown(event) {
                if (event.key === "ArrowRight" && direction !== "left") {
                    direction = "right";
                } else if (event.key === "ArrowLeft" && direction !== "right") {
                    direction = "left";
                } else if (event.key === "ArrowUp" && direction !== "down") {
                    direction = "up";
                } else if (event.key === "ArrowDown" && direction !== "up") {
                    direction = "down";
                }
            }

function gameLoop() {
                updateSnakePosition();
            }

function startGame() {
                document.addEventListener("keydown", handleKeyDown);
                setInterval(gameLoop, 500);
            }

startGame();
        });
    </script>
</body>
</html>
```

このプログラムでは、1枚のHTMLファイルでヘビゲームを実装しています。JavaScriptはscriptタグで囲まれており、実行開始しています。

ゲーム画面は400px × 400pxの領域であり、黒い四角がヘビの頭の位置を示しています。ヘビの頭の座標を変数で管理し、キーボードの矢印キーに対応した方向に頭を移動させる処理が実装されています。

ゲームが開始されると、キーボードの矢印キーを操作してヘビを動かすことができます。ヘビの頭は0.5秒ごとに指定した方向に移動します。

このプログラムはスマホでもプレイ可能ですが、画面操作には対応していません。スマホ上でキーボードを表示し、キーボードの矢印キーをタップすることで操作できます。画面操作に対応させるには、タッチイベントの処理を追加する必要があります。