AI game creator

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

No:5477

1362

←

Prev Next

→

figure skating
Developer User3694｜Date and time 23/6/30 5:07:33
Build time 41.741 sec｜Game capacity 4.966KB｜

Script

了解しました。以下にフィギュアスケートのゲームの実装例を示します。

このゲームでは、プレイヤーとなる青い四角形を操作して赤い障害物を避けるようにします。ArrowUpキーで上に移動し、ArrowDownキーで下に移動します。障害物を避け続けるとスコアが増えます。衝突するとゲームオーバーになります。再読み込みすることでゲームをリセットできます。

←

Prev　Next

→ 　

Back　

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

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

了解しました。以下にフィギュアスケートのゲームの実装例を示します。

```
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>フィギュアスケートゲーム</title>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// ゲームの初期化
            init: function() {
                this.context = this.canvas.getContext("2d");

// プレイヤーの初期位置とサイズを設定
                this.player = {
                    x: 50,
                    y: this.canvas.height / 2,
                    width: 30,
                    height: 30,
                    speed: 3
                };

// 障害物を生成
                this.obstacles.push({
                    x: this.canvas.width,
                    y: this.canvas.height / 2 - 15,
                    width: 30,
                    height: 30,
                    speed: 2
                });

// キーボード操作のイベントを設定
                window.addEventListener("keydown", this.handleKeyDown.bind(this));

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

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

// プレイヤーを描画
                this.context.fillStyle = "blue";
                this.context.fillRect(this.player.x, this.player.y, this.player.width, this.player.height);

// 障害物を描画
                this.context.fillStyle = "red";
                for (var i = 0; i < this.obstacles.length; i++) {
                    var obstacle = this.obstacles[i];
                    this.context.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
                }

// スコアを表示
                this.context.fillStyle = "black";
                this.context.font = "20px Arial";
                this.context.fillText("Score: " + this.score, 10, 30);

// プレイヤーの位置を更新
                this.player.y += this.player.speed;

// 障害物の位置を更新
                for (var i = 0; i < this.obstacles.length; i++) {
                    var obstacle = this.obstacles[i];
                    obstacle.x -= obstacle.speed;

// 障害物とプレイヤーの衝突判定
                    if (this.checkCollision(obstacle, this.player)) {
                        alert("ゲームオーバー");
                        location.reload();
                    }

// 障害物が画面外に出たら削除
                    if (obstacle.x + obstacle.width < 0) {
                        this.obstacles.shift();
                        this.score++;
                    }
                }

// 新しい障害物を生成
                if (Math.random() < 0.02) {
                    var newY = Math.random() * this.canvas.height;
                    this.obstacles.push({
                        x: this.canvas.width,
                        y: newY,
                        width: 30,
                        height: 30,
                        speed: 2
                    });
                }

// ゲームループを継続
                requestAnimationFrame(this.gameLoop.bind(this));
            },

// キーボード操作のハンドラ
            handleKeyDown: function(event) {
                if (event.key === "ArrowUp") {
                    this.player.y -= this.player.speed;
                } else if (event.key === "ArrowDown") {
                    this.player.y += this.player.speed;
                }
            },

// 二つのオブジェクトの衝突判定
            checkCollision: function(obj1, obj2) {
                return obj1.x < obj2.x + obj2.width &&
                       obj1.x + obj1.width > obj2.x &&
                       obj1.y < obj2.y + obj2.height &&
                       obj1.y + obj1.height > obj2.y;
            }
        };

// ゲームの初期化
        game.init();
    </script>
</body>
</html>
```