2D painting block soul's game | AI game creator

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

No:5712

426

2D painting block soul
Developer User3832｜Date and time 23/6/30 17:18:04
Build time 42.339 sec｜Game capacity 4.851KB｜

了解です。では、2D絵文字塊魂というゲームを作成してみましょう。ゲームのルールは以下の通りです。 1. プレイヤーは絵文字の塊（ブロック）を制御します。 2. プレイヤーはタッチ操作で左右に動かし、ブロックを画面上部から下に向かって落とします。 3. 画面上にはランダムに絵文字が配置された障害物が出現します。 4. プレイヤーの目標は、障害物を回避しながらブロックをできるだけ長く落下させることです。 5. ブロックは画面下部に到達するとゲームオーバーになります。以下が実際のプログラムです。

このプログラムでは、HTMLのcanvas要素を使用してゲーム画面を描画しています。プレイヤーのブロックは絵文字「😀」、障害物は絵文字「🔴」で表現されます。タッチ操作によってプレイヤーのブロックを左右に動かし、障害物との衝突判定を行っています。このように、部分的にゲーム化された2D絵文字塊魂の実装例です。

→ 　

0　

0　

[PR]現在のプレゼントランキング

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

(C)2023 HisashiApp

了解です。では、2D絵文字塊魂というゲームを作成してみましょう。ゲームのルールは以下の通りです。

1. プレイヤーは絵文字の塊（ブロック）を制御します。
2. プレイヤーはタッチ操作で左右に動かし、ブロックを画面上部から下に向かって落とします。
3. 画面上にはランダムに絵文字が配置された障害物が出現します。
4. プレイヤーの目標は、障害物を回避しながらブロックをできるだけ長く落下させることです。
5. ブロックは画面下部に到達するとゲームオーバーになります。

以下が実際のプログラムです。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>2D絵文字塊魂</title>
    <style>
        #gameCanvas {
            width: 100%;
            height: 100vh;
            background-color: black;
            color: white;
            font-size: 40px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="gameCanvas">
        <script>
            // ゲームのメイン処理
            function runGame() {
                const canvas = document.getElementById("gameCanvas");
                console.log("canvas="+canvas);
                const context = canvas.getContext("2d");

const blockWidth = 80;
                const blockHeight = 80;
                const blockSpeed = 5;

let playerX = canvas.width / 2;
                let playerY = canvas.height - blockHeight;
                let obstacles = [];

// 障害物を生成する関数
                function createObstacle() {
                    const obstacleX = Math.random() * (canvas.width - blockWidth);
                    const obstacleY = -blockHeight;
                    obstacles.push({ x: obstacleX, y: obstacleY });
                }

// ゲームのメインループ
                function gameLoop() {
                    // キャンバスをクリア
                    context.clearRect(0, 0, canvas.width, canvas.height);

// プレイヤーの操作
                    if (touchLeft) {
                        playerX -= blockSpeed;
                    }
                    if (touchRight) {
                        playerX += blockSpeed;
                    }

// プレイヤーの描画
                    context.fillText("😀", playerX, playerY);

// 障害物の描画
                    obstacles.forEach(obstacle => {
                        obstacle.y += blockSpeed;
                        context.fillText("🔴", obstacle.x, obstacle.y);
                    });

// 新しい障害物を生成
                    if (Math.random() < 0.02) {
                        createObstacle();
                    }

// 衝突判定
                    obstacles.forEach(obstacle => {
                        if (playerX < obstacle.x + blockWidth &&
                            playerX + blockWidth > obstacle.x &&
                            playerY < obstacle.y + blockHeight &&
                            playerY + blockHeight > obstacle.y) {
                            clearInterval(loopId);
                            alert("Game Over!");
                        }
                    });

// ループを再帰呼び出し
                    loopId = setInterval(gameLoop, 20);
                }

// タッチ操作のハンドラ
                let touchLeft = false;
                let touchRight = false;

document.addEventListener("touchstart", function (event) {
                    const touchX = event.touches[0].clientX;
                    if (touchX < canvas.width / 2) {
                        touchLeft = true;
                    } else {
                        touchRight = true;
                    }
                });

document.addEventListener("touchend", function (event) {
                    touchLeft = false;
                    touchRight = false;
                });

// ゲーム開始
                let loopId = setInterval(gameLoop, 20);
            }

// ゲームの実行
            runGame();
        </script>
    </div>
</body>
</html>
```

このプログラムでは、HTMLのcanvas要素を使用してゲーム画面を描画しています。プレイヤーのブロックは絵文字「😀」、障害物は絵文字「🔴」で表現されます。タッチ操作によってプレイヤーのブロックを左右に動かし、障害物との衝突判定を行っています。

このように、部分的にゲーム化された2D絵文字塊魂の実装例です。