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

No:7958

5388

←

Prev Next

→

Jupiter Meteor Swarm! The Unprecedented Crisis
Developer User3589｜Date and time 23/7/11 8:48:22
Build time 15.241 sec｜Game capacity 5.576KB｜

Script

一旦完成

木星流星群！未曾有の危機

スコア: 0

レベル: 1

このプログラムは、一旦完成

←

Prev　Next

→ 　

Back　

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

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

一旦完成

<!DOCTYPE html>
<html>
<head>
    <title>木星流星群！未曾有の危機</title>
</head>
<body>
    <h1>木星流星群！未曾有の危機</h1>
    <button onclick="startGame()">ゲームスタート</button>
    <p id="score">スコア: 0</p>
    <p id="level">レベル: 1</p>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// キャンバスの要素を取得
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");

// キャラクターの初期位置
        let characterX = canvas.width / 2;
        const characterY = canvas.height - 50;

// 流星の配列
        let meteors = [];

// キャラクターを描画
        function drawCharacter() {
            ctx.beginPath();
            ctx.arc(characterX, characterY, 10, 0, Math.PI * 2);
            ctx.fillStyle = "red";
            ctx.fill();
            ctx.closePath();
        }

// 流星を生成するためのクラス
        class Meteor {
            constructor(x, y, color, speed, size, isJupiter) {
                this.x = x;
                this.y = y;
                this.color = color;
                this.speed = speed;
                this.size = size;
                this.isJupiter = isJupiter;
            }

update() {
                this.y += this.speed * level; // 流星の速度（レベルに比例）

// 流星が画面外に出た場合は新たな座標に再生する
                if (this.y > canvas.height) {
                    this.x = Math.random() * (canvas.width - 20) + 10;
                    this.y = 0;
                    score++; // 流星を避けたため、スコアを加算
                }

// 当たり判定
                if (this.y + 10 > characterY - 10 && this.y - 10 < characterY + 10 && this.x + 10 > characterX - 10 && this.x - 10 < characterX + 10) {
                    gameOver(); // 当たった場合はゲームオーバー
                }
            }

draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fillStyle = this.color;
                ctx.fill();
                ctx.closePath();

if (this.isJupiter) { // 木星流星の場合は、赤い斑点を描画
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, this.size / 2, 0, Math.PI * 2);
                    ctx.fillStyle = "red";
                    ctx.fill();
                    ctx.closePath();
                }
            }
        }

// キーボードイベントのリスナー
        document.addEventListener('keydown', (event) => {
            const keyName = event.key;
            if (keyName === 'ArrowRight') {
                characterX += 20;
            } else if (keyName === 'ArrowLeft') {
                characterX -= 20;
            }
        });

// ゲームオーバー時の処理
        function gameOver() {
            isGameOver = true;
            alert("ゲームオーバー！\nスコア: " + score + "\nレベル: " + level);
            resetGame();
        }

// ゲームリセット
        function resetGame() {
            isGameOver = false;
            score = 0;
            level = 1;
            characterX = canvas.width / 2;
            meteors = []; // 流星の配列をリセット
        }

// ゲームループ
        function gameLoop() {
            if (isGameOver) {
                return;
            }

ctx.clearRect(0, 0, canvas.width, canvas.height);

// キャラクターを描画
            drawCharacter();

// スコアとレベルを更新
            document.getElementById("score").innerText = "スコア: " + score;
            document.getElementById("level").innerText = "レベル: " + level;

// スコアに応じてレベルアップ
            if (score % 100 === 0 && score != 0) {
                level++;
            }

// 流星を生成して描画・更新
            if (Math.random() < 0.01 * level) { // レベルに比例して新しい木星流星を生成
                const x = Math.random() * (canvas.width - 20) + 10;
                const y = 0;
                meteors.push(new Meteor(x, y, "brown", 2, 20, true));
            }
            if (Math.random()             < 0.01 * level) { // レベルに比例して新しい高速流星を生成
                const x = Math.random() * (canvas.width - 20) + 10;
                const y = 0;
                meteors.push(new Meteor(x, y, "blue", 4, 10, false));
            }

// 全ての流星を描画・更新
            for (let meteor of meteors) {
                meteor.draw();
                meteor.update();
            }

// ゲームループを再帰的に呼び出す
            requestAnimationFrame(gameLoop);
        }

// ゲームスタート時の処理
        function startGame() {
            resetGame();
            gameLoop();
        }
    </script>
</body>
</html>

このプログラムは、一旦完成