Sample Pong game with buttons and play vs computer's game | AI game creator

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

No:47511

86

Sample Pong game with buttons and play vs computer
Developer User20368｜Date and time 24/2/28 5:48:23
Build time 1.739 sec｜Game capacity 0.267KB｜

The AI could not be gamified with this prompt. Please try again with different prompts. .
Displays games created by AI in the past at random.

以下は、スマホ操作を前提とした単純なゲーム「転がりMOUSE」のプログラムです。このゲームではタッチ操作でマウスの移動を制御し、画面内の障害物を避けながらゴールを目指します。JavaScriptで実装されており、1枚のHTMLファイルとして実行可能です。

このプログラムでは、canvas要素を使用してゲーム画面を表示し、JavaScriptでゲームのロジックを記述しています。プレイヤーとゴール、障害物は四角形として描画されます。タッチ操作に応じてプレイヤーが移動し、ゴールを目指すことになります。なお、このプログラムを実行するにはブラウザでHTMLファイルを開くか、ブラウザ上で動作するオンラインエディタを使用する必要があります。また、プレイヤーやゴール、障害物の描画は単純な四角形ですが、絵文字を使用することも可能です。具体的な絵文字の使用方法については、絵文字のUnicodeを使用して文字列として描画することが一般的です。

→ 　

1　

0　

[PR]現在のゲームギフトランキング

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

(C)2023 HisashiApp

<p style='font-size:14px;background-color:#FF0'>The AI could not be gamified with this prompt. Please try again with different prompts. . <br>Displays games created by AI in the past at random.</p>以下は、スマホ操作を前提とした単純なゲーム「転がりMOUSE」のプログラムです。このゲームではタッチ操作でマウスの移動を制御し、画面内の障害物を避けながらゴールを目指します。JavaScriptで実装されており、1枚のHTMLファイルとして実行可能です。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>転がりMOUSE</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

<script>
        // ゲーム変数
        var canvas;
        var context;
        var mouseX;
        var mouseY;
        var playerX;
        var playerY;
        var goalX;
        var goalY;
        var obstacleX;
        var obstacleY;
        var obstacleWidth;
        var obstacleHeight;
        var gameInterval;

// ゲーム初期化
        function init() {
            // キャンバスとコンテキストの取得
            canvas = document.getElementById("gameCanvas");
            context = canvas.getContext("2d");

// ゲーム変数の初期値設定
            mouseX = 0;
            mouseY = 0;
            playerX = canvas.width / 2;
            playerY = canvas.height / 2;
            goalX = Math.random() * (canvas.width - 20);
            goalY = Math.random() * (canvas.height - 20);
            obstacleX = Math.random() * (canvas.width - 50);
            obstacleY = Math.random() * (canvas.height - 50);
            obstacleWidth = Math.random() * 30 + 20;
            obstacleHeight = Math.random() * 30 + 20;

// イベントリスナーの設定
            canvas.addEventListener("touchmove", handleTouchMove);

// ゲームループの開始
            gameInterval = setInterval(update, 20);
        }

// ゲーム更新
        function update() {
            // プレイヤーの移動
            var dx = (mouseX - playerX) * 0.1;
            var dy = (mouseY - playerY) * 0.1;
            playerX += dx;
            playerY += dy;

// プレイヤーとゴールの距離を計算
            var distanceToGoal = Math.sqrt((playerX - goalX) ** 2 + (playerY - goalY) ** 2);

// ゲームオーバー判定
            if (distanceToGoal < 10) {
                clearInterval(gameInterval);
                alert("ゲームクリア！");
            }
            else if (
                playerX < obstacleX + obstacleWidth &&
                playerX + 10 > obstacleX &&
                playerY < obstacleY + obstacleHeight &&
                playerY + 10 > obstacleY
            ) {
                clearInterval(gameInterval);
                alert("ゲームオーバー！");
            }

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

// ゴールの描画
            context.fillStyle = "green";
            context.fillRect(goalX, goalY, 10, 10);

// プレイヤーの描画
            context.fillStyle = "blue";
            context.fillRect(playerX, playerY, 10, 10);

// 障害物の描画
            context.fillStyle = "red";
            context.fillRect(obstacleX, obstacleY, obstacleWidth, obstacleHeight);
        }

// タッチ移動イベントのハンドラ
        function handleTouchMove(event) {
            event.preventDefault();
            var touch = event.touches[0];
            mouseX = touch.clientX - canvas.offsetLeft;
            mouseY = touch.clientY - canvas.offsetTop;
        }

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

このプログラムでは、canvas要素を使用してゲーム画面を表示し、JavaScriptでゲームのロジックを記述しています。プレイヤーとゴール、障害物は四角形として描画されます。タッチ操作に応じてプレイヤーが移動し、ゴールを目指すことになります。

なお、このプログラムを実行するにはブラウザでHTMLファイルを開くか、ブラウザ上で動作するオンラインエディタを使用する必要があります。また、プレイヤーやゴール、障害物の描画は単純な四角形ですが、絵文字を使用することも可能です。具体的な絵文字の使用方法については、絵文字のUnicodeを使用して文字列として描画することが一般的です。