AI game creator

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

No:10244

151

←

Prev Next

→

3 screen shooting
Developer User4369｜Date and time 23/7/29 14:11:34
Build time 32.109 sec｜Game capacity 5.198KB｜

Script

彼女の要件に基づいて、以下のような単純な3画面シューティングゲームを作成します。

このプログラムは、画面上にプレイヤーが表示されて操作可能で、プレイヤーが弾を発射して敵を倒すシューティングゲームです。プレイヤーが敵にぶつかるとゲームオーバーになり、得点が表示されます。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

彼女の要件に基づいて、以下のような単純な3画面シューティングゲームを作成します。

```html
<!DOCTYPE html>
<html>
<head>
    <title>3画面シューティングゲーム</title>
<style>
    * {
        margin: 0;
        padding: 0;
    }

canvas {
        display: block;
    }
</style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

this.update();
        },
        update: function() {
            this.clearCanvas();
            this.player.draw();
            this.updateBullets();
            this.updateEnemies();
            this.drawScore();

if (!this.gameover) {
                requestAnimationFrame(() => this.update());
            }
        },
        spawnEnemies: function() {
            setInterval(() => {
                var x = Math.random() * (this.canvas.width - 20);
                var y = -20;
                var speed = Math.random() * 2 + 1;
                this.enemies.push(new Enemy(x, y, speed));
            }, 1000);
        },
        clearCanvas: function() {
            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        },
        updateBullets: function() {
            for (var i = 0; i < this.bullets.length; i++) {
                this.bullets[i].update();

if (this.bullets[i].y < 0) {
                    this.bullets.splice(i, 1);
                    i--;
                }
            }
        },
        updateEnemies: function() {
            for (var i = 0; i < this.enemies.length; i++) {
                this.enemies[i].update();

if (this.enemies[i].y > this.canvas.height) {
                    this.enemies.splice(i, 1);
                    i--;
                }
            }
        },
        drawScore: function() {
            this.ctx.font = "24px Arial";
            this.ctx.fillStyle = "white";
            this.ctx.fillText("Score: " + this.score, 10, 24);
        },
        gameOver: function() {
            this.gameover = true;
            this.ctx.font = "48px Arial";
            this.ctx.fillStyle = "white";
            this.ctx.fillText("Game Over", 100, 200);
        }
    };

// プレイヤークラス
    class Player {
        constructor(x, y) {
            this.x = x;
            this.y = y;
        }

draw() {
            game.ctx.fillStyle = "blue";
            game.ctx.fillRect(this.x - 10, this.y - 10, 20, 20);
        }
    }

// 弾クラス
    class Bullet {
        constructor(x, y) {
            this.x = x;
            this.y = y;
        }

update() {
            this.y -= 5;

game.ctx.fillStyle = "red";
            game.ctx.fillRect(this.x - 2.5, this.y - 2.5, 5, 5);

for (var i = 0; i < game.enemies.length; i++) {
                if (
                    Math.abs(this.x - game.enemies[i].x) < 10 &&
                    Math.abs(this.y - game.enemies[i].y) < 10
                ) {
                    game.score++;
                    game.enemies.splice(i, 1);
                    i--;
                    game.bullets.splice(game.bullets.indexOf(this), 1);
                    break;
                }
            }
        }
    }

// 敵クラス
    class Enemy {
        constructor(x, y, speed) {
            this.x = x;
            this.y = y;
            this.speed = speed;
        }

update() {
            this.y += this.speed;

game.ctx.fillStyle = "green";
            game.ctx.fillRect(this.x - 10, this.y - 10, 20, 20);

if (
                Math.abs(this.x - game.player.x) < 10 &&
                Math.abs(this.y - game.player.y) < 10
            ) {
                game.gameOver();
            }
        }
    }

// キー入力イベント
    window.addEventListener("keydown", function(event) {
        event.preventDefault();

switch (event.key) {
            case "ArrowLeft":
                game.player.x -= 5;
                break;
            case "ArrowRight":
                game.player.x += 5;
                break;
            case "ArrowUp":
                game.player.y -= 5;
                break;
            case "ArrowDown":
                game.player.y += 5;
                break;
            case " ":
                game.bullets.push(new Bullet(game.player.x, game.player.y));
                break;
        }
    });

// ゲームスタート
    game.start();
    </script>
</body>
</html>
```