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

No:3340

4775

←

Prev Next

→

He shall be clothed in blue and shall descend to t..ALL
Developer User3660｜Date and time 23/6/24 14:46:19
Build time 48.801 sec｜Game capacity 6.61KB｜

Script

面白い解釈ありがとうございます！では、ゲームを作ってみましょう。

金色の野

このゲームでは、あなたは青い服を着たキャラクターとして、金色の野を冒険します。画面をタップしてジャンプし、障害物を避けて最高得点を目指しましょう！

以上が、1枚のhtmlファイルにゲームを実装した例です。スマホで操作することを前提に、画面をタップすることでジャンプできるようにしています。また、ゲームオーバー時には得点を表示するようにしています。絵文字は使っていませんが、金色の野をイメージできるように背景色を変更しています。

←

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>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #FFFFCC;
            font-size: 24px;
            text-align: center;
            font-family: "Arial", sans-serif;
        }
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <h1>金色の野</h1>
    <p>このゲームでは、あなたは青い服を着たキャラクターとして、金色の野を冒険します。画面をタップしてジャンプし、障害物を避けて最高得点を目指しましょう！</p>
    <canvas id="gameCanvas" width="400" height="300"></canvas>
    <script>
        // ゲームのステータスを管理する変数
        var gameStatus = null;

// ゲームオブジェクトを定義する
        var game = {
            // 初期化処理
            init: function() {
                // キャンバス要素を取得する
                this.canvas = document.getElementById("gameCanvas");

// キャンバスのコンテキストを取得する
                this.context = this.canvas.getContext("2d");

// ゲームのステータスを初期化する
                gameStatus = "playing";

// キャラクターの情報を初期化する
                this.character = {
                    x: 50,
                    y: 200,
                    vy: 0,
                    jumping: false,
                    width: 40,
                    height: 40
                };

// 障害物の情報を初期化する
                this.obstacles = [];

// スコアを初期化する
                this.score = 0;
            },

// ゲーム開始処理
            start: function() {
                // ゲームループを開始する
                this.intervalId = setInterval(game.loop, 30);

// キャンバスのイベントハンドラを設定する
                this.canvas.addEventListener("mousedown", game.jump);
            },

// ゲームループ
            loop: function() {
                // キャンバスをクリアする
                game.context.clearRect(0, 0, game.canvas.width, game.canvas.height);

// 背景を描画する
                game.context.fillStyle = "#FFFFCC";
                game.context.fillRect(0, 0, game.canvas.width, game.canvas.height);

// キャラクターを描画する
                game.context.fillStyle = "#0000FF";
                game.context.fillRect(game.character.x, game.character.y, game.character.width, game.character.height);

// キャラクターを更新する
                game.character.vy += 2;
                game.character.y += game.character.vy;
                if (game.character.y + game.character.height > game.canvas.height) {
                    game.character.y = game.canvas.height - game.character.height;
                    game.character.jumping = false;
                }

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

// 障害物を更新する
                for (var i = 0; i < game.obstacles.length; i++) {
                    game.obstacles[i].x -= 5;
                }
                if (game.obstacles.length > 0 && game.obstacles[0].x + game.obstacles[0].width < 0) {
                    game.obstacles.shift();
                    game.score += 10;
                }
                if (game.obstacles.length < 3 && Math.random() < 0.1) {
                    game.obstacles.push({
                        x: game.canvas.width,
                        y: game.canvas.height - 40 - Math.floor(Math.random() * 80),
                        width: 20,
                        height: 40
                    });
                }

// スコアを描画する
                game.context.fillStyle = "#000000";
                game.context.fillText("Score: " + game.score, 10, 30);

// ゲームオーバー判定
                for (var i = 0; i < game.obstacles.length; i++) {
                    if (game.character.x + game.character.width > game.obstacles[i].x &&
                        game.character.x < game.obstacles[i].x + game.obstacles[i].width &&
                        game.character.y + game.character.height > game.obstacles[i].y) {
                        game.over();
                        return;
                    }
                }
            },

// ゲームオーバー処理
            over: function() {
                // ゲームループを停止する
                clearInterval(this.intervalId);

// キャンバスのイベントハンドラを解除する
                this.canvas.removeEventListener("mousedown", game.jump);

// ゲームのステータスを変更する
                gameStatus = "gameover";

// ゲームオーバー画面を描画する
                game.context.fillStyle = "#000000";
                game.context.fillText("Game Over", game.canvas.width / 2, game.canvas.height / 2);
                game.context.fillText("Score: " + game.score, game.canvas.width / 2, game.canvas.height / 2 + 30);
            },

// キャラクターをジャンプさせる処理
            jump: function() {
                if (!game.character.jumping) {
                    game.character.vy = -25;
                    game.character.jumping = true;
                }
            }
        };

// ゲームを初期化する
        game.init();

// ゲームを開始する
        game.start();
    </script>
</body>
</html>