AI game creator

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

No:5417

2341

←

Prev Next

→

XYZ
Developer User3825｜Date and time 23/6/30 2:05:16
Build time 38.969 sec｜Game capacity 4.648KB｜

Script

了解です。以下にスマホで遊べるゲームとして実装例を示します。このゲームは「アステロイド」というゲームです。

この例では、スマホで操作可能なアステロイドゲームを実装しています。プレイヤーは赤い円で表され、アステロイドは黒い円で表されます。プレイヤーをタッチ座標に近づけて、アステロイドと衝突しないように避けてください。アステロイドに衝突すると「ゲームオーバー」とアラートが表示されます。

←

Prev　Next

→ 　

Back　

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

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

了解です。以下にスマホで遊べるゲームとして実装例を示します。このゲームは「アステロイド」というゲームです。

```html
<!DOCTYPE html>
<html>
<head>
    <title>Asteroid Game</title>
    <style>
        canvas {
            border: 1px solid black;
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="500" height="500"></canvas>
    <script>
        // ゲームのロジックを記述
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");

// プレイヤーの初期位置
        let playerX = canvas.width / 2;
        let playerY = canvas.height / 2;

// ユーザーのタッチ座標を保持する変数
        let touchX = 0;
        let touchY = 0;

// スマホのタッチイベントでタッチ座標を取得する関数
        function touchHandler(e) {
            const rect = canvas.getBoundingClientRect();
            touchX = e.touches[0].clientX - rect.left;
            touchY = e.touches[0].clientY - rect.top;
        }

// スマホの傾きイベントでプレイヤーを移動する関数
        function motionHandler(e) {
            playerX += e.accelerationIncludingGravity.x * 3;
            playerY += e.accelerationIncludingGravity.y * 3;
        }

// アステロイドを生成するクラス
        class Asteroid {
            constructor(x, y, size, speed) {
                this.x = x;
                this.y = y;
                this.size = size;
                this.speed = speed;
            }

move() {
                this.x += this.speed;
            }

draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fillStyle = "black";
                ctx.fill();
                ctx.closePath();
            }
        }

// アステロイドの配列
        const asteroids = [];

// 初期化処理
        function init() {
            canvas.addEventListener("touchmove", touchHandler, false);
            window.addEventListener("devicemotion", motionHandler, false);

// アステロイドを生成し、配列に追加
            for (let i = 0; i < 10; i++) {
                const x = Math.random() * canvas.width;
                const y = Math.random() * canvas.height;
                const size = Math.random() * 30 + 10;
                const speed = Math.random() * 3 + 1;
                const asteroid = new Asteroid(x, y, size, speed);
                asteroids.push(asteroid);
            }

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

// ゲームループ
        function gameLoop() {
            // 画面をクリア
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// プレイヤーを描画
            ctx.beginPath();
            ctx.arc(playerX, playerY, 10, 0, Math.PI * 2);
            ctx.fillStyle = "red";
            ctx.fill();
            ctx.closePath();

// アステロイドを描画
            for (const asteroid of asteroids) {
                asteroid.move();
                asteroid.draw();

// プレイヤーとアステロイドが衝突したか判定
                const dx = asteroid.x - playerX;
                const dy = asteroid.y - playerY;
                const distance = Math.sqrt(dx * dx + dy * dy);
                if (distance < asteroid.size + 10) {
                    alert("ゲームオーバー！");
                    return;
                }
            }

// タッチ座標にプレイヤーを近づける
            const dx = touchX - playerX;
            const dy = touchY - playerY;
            const distance = Math.sqrt(dx * dx + dy * dy);
            if (distance > 10) {
                playerX += dx / distance * 5;
                playerY += dy / distance * 5;
            }

// 次のフレームを描画
            requestAnimationFrame(gameLoop);
        }

// 初期化処理を実行
        init();
    </script>
</body>
</html>
```