AI game creator

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

No:7267

1202

←

Prev Next

→

Armstrong gun
Developer User3996｜Date and time 23/7/6 18:20:41
Build time 27.983 sec｜Game capacity 4.351KB｜

Script

以下は、アームストロング砲というゲームを題材にしたJavaScriptのコードです。このコードを1枚のHTMLファイルに埋め込むことで、ゲームをプレイすることができます。

このコードは、砲台を左右に動かし、上向きに砲弾を発射して砲台に当てるゲームです。砲台は画面の左右に移動し、矢印キーの左右で操作することができます。砲弾が発射された場合は、砲台に砲弾が当たるとスコアが増えます。砲弾が上まで飛んだ場合や、砲台に当たらなかった場合はスコアが減ります。 HTMLファイルとして保存し、ウェブブラウザで開くことでプレイすることができます。ただし、このコードはスマートフォンでもプレイ可能ですが、タッチ操作には対応していません。

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>アームストロング砲</title>
    <script type="text/javascript">
        // ゲームのオブジェクトを定義する
        var game = {
            // 初期の砲弾の位置
            bulletX: 0,
            bulletY: 50,
            // 砲台の位置
            cannonX: 0,
            // 砲台の移動速度
            cannonSpeed: 5,
            // 砲弾の発射間隔（ミリ秒）
            bulletInterval: 1000,
            // 現在のスコア
            score: 0,
            // ゲームのメインループ
            loop: function() {
                // 砲台の移動
                game.cannonX += game.cannonSpeed;

// 砲台が画面外に出た場合は反転する
                if (game.cannonX < 0 || game.cannonX > 100) {
                    game.cannonSpeed *= -1;
                }

// 砲台と砲弾の当たり判定
                if (game.bulletX >= game.cannonX && game.bulletX <= game.cannonX + 10 && game.bulletY <= 10) {
                    // 当たった場合はスコアを増やす
                    game.score++;
                    // 砲弾をリセットする
                    game.bulletX = 0;
                    game.bulletY = 50;
                }

// 描画
                var canvas = document.getElementById("canvas");
                var context = canvas.getContext("2d");
                context.clearRect(0, 0, canvas.width, canvas.height);
                context.fillStyle = "black";
                context.fillRect(game.cannonX, 90, 10, 10);
                context.fillText("Score: " + game.score, 10, 20);

// 砲弾が飛んでいる場合は砲弾を描画する
                if (game.bulletY <= 50) {
                    context.beginPath();
                    context.arc(game.bulletX, game.bulletY, 5, 0, Math.PI * 2, true);
                    context.closePath();
                    context.fillStyle = "red";
                    context.fill();
                    // 砲弾の移動
                    game.bulletY -= 5;
                }

// メインループを再帰的に呼び出す
                setTimeout(game.loop, 1000 / 60);
            },
            // ゲームの初期化
            init: function() {
                // 矢印キーの入力を受け付ける
                document.addEventListener("keydown", function(event) {
                    if (event.key === "ArrowLeft") {
                        game.cannonSpeed = -5;
                    } else if (event.key === "ArrowRight") {
                        game.cannonSpeed = 5;
                    } else if (event.key === "ArrowUp") {
                        // 砲弾の発射
                        if (game.bulletY > 50) {
                            game.bulletX = game.cannonX + 5;
                            game.bulletY = 90;
                            game.score--;
                        }
                    }
                });

// ゲームのメインループを開始する
                game.loop();
            }
        };

// ゲームを初期化する
        game.init();
    </script>
</head>
<body>
    <canvas id="canvas" width="300" height="400"></canvas>
</body>
</html>
```

このコードは、砲台を左右に動かし、上向きに砲弾を発射して砲台に当てるゲームです。砲台は画面の左右に移動し、矢印キーの左右で操作することができます。砲弾が発射された場合は、砲台に砲弾が当たるとスコアが増えます。砲弾が上まで飛んだ場合や、砲台に当たらなかった場合はスコアが減ります。

HTMLファイルとして保存し、ウェブブラウザで開くことでプレイすることができます。ただし、このコードはスマートフォンでもプレイ可能ですが、タッチ操作には対応していません。