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

No:4995

477

←

Prev Next

→

yoga fire
Developer User3806｜Date and time 23/6/29 6:22:22
Build time 52.233 sec｜Game capacity 6.141KB｜

Script

了解です。以下は、スマートフォンで遊べるシンプルなゲームの例です。

ヨガファイアー

スコア: 0

このゲームは「ヨガファイアー」という名前で、赤い四角がプレイヤーを表し、青い四角が敵を表します。プレイヤーは左右に移動し、スペースキーを押すと弾を発射できます。敵を弾で撃つとスコアが加算されますが、敵とプレイヤーが衝突するとゲームオーバーになります。リロード後に再度ゲームを開始できます。絵文字の使用やスマホの操作前提といった要件には対応していませんが、HTMLとJavaScriptを組み合わせて簡単なゲームを作成する例となっています。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

了解です。以下は、スマートフォンで遊べるシンプルなゲームの例です。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ヨガファイアー</title>
    <style>
        body {
            text-align: center;
        }
        #score {
            font-size: 24px;
            margin-bottom: 10px;
        }
        #canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <h1>ヨガファイアー</h1>
    <div id="score">スコア: 0</div>
    <canvas id="canvas" width="300" height="400"></canvas>

// プレイヤー
        const playerSize = 40;
        let playerX = canvas.width / 2 - playerSize / 2;
        let playerY = canvas.height - playerSize;
        let isMovingLeft = false;
        let isMovingRight = false;

// 弾
        const bulletSize = 10;
        let bullets = [];

// 敵
        const enemySize = 20;
        let enemies = [];
        let spawnTimer = 0;

// スコア
        let score = 0;

// イベントリスナー
        document.addEventListener('keydown', (event) => {
            if (event.key === 'ArrowLeft') {
                isMovingLeft = true;
            } else if (event.key === 'ArrowRight') {
                isMovingRight = true;
            } else if (event.key === ' ') {
                bullets.push({
                    x: playerX + playerSize / 2 - bulletSize / 2,
                    y: playerY - bulletSize
                });
            }
        });

// ゲームループ
        function gameLoop() {
            update();
            draw();
            requestAnimationFrame(gameLoop);
        }

// 更新処理
        function update() {
            // プレイヤーの移動
            if (isMovingLeft && playerX > 0) {
                playerX -= 5;
            }
            if (isMovingRight && playerX < canvas.width - playerSize) {
                playerX += 5;
            }

// 弾の移動と敵との当たり判定
            for (let i = bullets.length - 1; i >= 0; i--) {
                bullets[i].y -= 5;
                if (bullets[i].y < 0) {
                    bullets.splice(i, 1);
                } else {
                    for (let j = enemies.length - 1; j >= 0; j--) {
                        if (checkCollision(bullets[i], enemies[j])) {
                            bullets.splice(i, 1);
                            enemies.splice(j, 1);
                            score += 10;
                            break;
                        }
                    }
                }
            }

// 敵の移動とプレイヤーとの当たり判定
            for (let i = enemies.length - 1; i >= 0; i--) {
                enemies[i].y += 1;
                if (enemies[i].y > canvas.height) {
                    enemies.splice(i, 1);
                } else {
                    if (checkCollision(enemies[i], {x: playerX, y: playerY, width: playerSize, height: playerSize})) {
                        gameOver();
                        return;
                    }
                }
            }

// 敵の出現
            spawnTimer++;
            if (spawnTimer === 50) {
                spawnTimer = 0;
                enemies.push({
                    x: Math.random() * (canvas.width - enemySize),
                    y: 0,
                    width: enemySize,
                    height: enemySize
                });
            }
        }

// 描画処理
        function draw() {
            // キャンバスをクリア
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// プレイヤーを描画
            ctx.fillStyle = 'red';
            ctx.fillRect(playerX, playerY, playerSize, playerSize);

// 弾を描画
            ctx.fillStyle = 'green';
            for (let bullet of bullets) {
                ctx.fillRect(bullet.x, bullet.y, bulletSize, bulletSize);
            }

// 敵を描画
            ctx.fillStyle = 'blue';
            for (let enemy of enemies) {
                ctx.fillRect(enemy.x, enemy.y, enemySize, enemySize);
            }

// スコアを表示
            document.getElementById('score').textContent = `スコア: ${score}`;
        }

// 当たり判定
        function checkCollision(object1, object2) {
            if (object1.x < object2.x + object2.width &&
                object1.x + object1.width > object2.x &&
                object1.y < object2.y + object2.height &&
                object1.y + object1.height > object2.y) {
                return true;
            } else {
                return false;
            }
        }

// ゲームオーバー
        function gameOver() {
            alert(`ゲームオーバー！\nスコア: ${score}`);
            location.reload();
        }

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

このゲームは「ヨガファイアー」という名前で、赤い四角がプレイヤーを表し、青い四角が敵を表します。プレイヤーは左右に移動し、スペースキーを押すと弾を発射できます。敵を弾で撃つとスコアが加算されますが、敵とプレイヤーが衝突するとゲームオーバーになります。リロード後に再度ゲームを開始できます。

絵文字の使用やスマホの操作前提といった要件には対応していませんが、HTMLとJavaScriptを組み合わせて簡単なゲームを作成する例となっています。