土の中を潜ったり空をキャラクターが飛んで進んで行くゲーム人や動物、植物がキャラクター化's game

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

No:15786

←

Prev Next

→

土の中を潜ったり空をキャラクターが飛んで進んで行くゲーム人や動物、植物がキャラクター化
Developer User6874｜Date and time 23/9/11 15:33:33
Build time 30.717 sec｜Game capacity 3.87KB｜

Script

了解いたしました。以下にプログラムの一例を示します。

上記の例では、キャラクターが画面上部から下方向へ重力の影響を受けながら降下し、タッチ操作によってジャンプや移動ができる簡単なゲームです。キャラクターは青い四角形で表示されます。このプログラムをHTMLファイルに保存し、ブラウザで開くことで実際に遊ぶことができます。

←

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">
    <title>土の中を潜ったり空を飛んで進むゲーム</title>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="400"></canvas>

// 初期化処理
            start: function() {
                this.canvas = document.getElementById("gameCanvas");
                this.context = this.canvas.getContext("2d");
                this.character = new Character();

// タッチイベントの設定
                this.canvas.addEventListener("touchstart", this.onTouchStart);
                this.canvas.addEventListener("touchmove", this.onTouchMove);
                this.canvas.addEventListener("touchend", this.onTouchEnd);

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

// タッチ開始時の処理
            onTouchStart: function(event) {
                game.character.jump();
            },

// タッチ移動時の処理
            onTouchMove: function(event) {
                game.character.move(event.touches[0].clientX);
            },

// タッチ終了時の処理
            onTouchEnd: function(event) {
                game.character.stop();
            },

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

// キャラクターの更新と描画
                this.character.update();
                this.character.draw(this.context);

// ループ
                window.requestAnimationFrame(function() { game.update(); });
            }
        };

// キャラクタークラス
        function Character() {
            this.x = 100; // x座標
            this.y = 100; // y座標
            this.velY = 0; // y方向の速度
            this.isJumping = false; // ジャンプ中かどうか

// ジャンプ処理
            this.jump = function() {
                if (!this.isJumping) {
                    this.velY = -10;
                    this.isJumping = true;
                }
            };

// 移動処理
            this.move = function(x) {
                this.x = x;
            };

// 停止処理
            this.stop = function() {
                this.velY = 0;
            };

// 更新処理
            this.update = function() {
                // ジャンプ中の計算
                if (this.isJumping) {
                    this.y += this.velY;
                    this.velY += 0.5;

if (this.y >= 100) {
                        this.y = 100;
                        this.velY = 0;
                        this.isJumping = false;
                    }
                }
            };

// 描画処理
            this.draw = function(context) {
                context.fillStyle = "blue";
                context.fillRect(this.x, this.y, 50, 50);
            };
        }

// ゲーム開始
        window.onload = function() {
            game.start();
        };
    </script>
</body>
</html>
```