彗星de惑星破壊ゲーム画面には、JavaScriptによって線画された惑星が表示されています。惑星は、画面の上から、ランダムに降り続けます。プレイヤーは、画面をタップすることで、彗星を流すことが出来ます。彗星は、タップした箇所から上方向(角度はランダム)へ、流れるよう線画されます。彗星が惑星に当たると、惑星は砕け散って、スコアが加算されます。スコアを集めましょう！なお、背景は宇宙空間を模した背景になっています。彗星は光源を放っており、流れた軌道は、花火のようにキラキラと舞います。's game

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

No:5016

1745

←

Prev Next

→

彗星de惑星破壊ゲーム画面には、JavaScriptによって線画された惑星が表示されています..ALL
Developer もちきなこ｜Date and time 23/6/29 9:12:59
Build time 37.849 sec｜Game capacity 5.106KB｜

Script

了解です。以下に、彗星de惑星破壊ゲームの実装例を示します。

この実装例では、画面上に惑星がランダムに降りてくる彗星de惑星破壊ゲームを作成しています。プレイヤーは画面をクリックすると、彗星がタップした箇所から上に流れるように表示されます。彗星が惑星に当たると、惑星は砕け散ってスコアが加算されます。スコアを集めることが目的となります。

←

Prev　Next

→ 　

Back　

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

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

了解です。

以下に、彗星de惑星破壊ゲームの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
    <title>彗星de惑星破壊ゲーム</title>
    <style>
        body {
            background-color: black;
            overflow: hidden;
        }

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

var canvas = document.getElementById("gameCanvas");
        canvas.width = config.width;
        canvas.height = config.height;
        var context = canvas.getContext("2d");

// 惑星と彗星のクラス
        class Planet {
            constructor(x, y, size) {
                this.x = x;
                this.y = y;
                this.size = size;
                this.color = "white";
            }

update() {
                this.y += config.planetSpeed;
            }

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

class Comet {
            constructor(x, y, angle) {
                this.x = x;
                this.y = y;
                this.angle = angle;
                this.speedX = config.cometSpeed * Math.sin(angle);
                this.speedY = -config.cometSpeed * Math.cos(angle);
                this.size = config.cometSize;
                this.color = "yellow";
            }

update() {
                this.x += this.speedX;
                this.y += this.speedY;
            }

// ゲームの状態を管理する変数
        var planets = [];
        var comets = [];

// マウスクリックイベントの処理
        canvas.addEventListener("click", function(event) {
            var rect = canvas.getBoundingClientRect();
            var clickX = event.clientX - rect.left;
            var clickY = event.clientY - rect.top;

var angle = Math.random() * 2 * Math.PI;
            var comet = new Comet(clickX, clickY, angle);
            comets.push(comet);
        });

// ゲームループ
        function gameLoop() {
            context.clearRect(0, 0, canvas.width, canvas.height);

// 惑星を生成
            if (Math.random() < 0.01) {
                var x = Math.random() * config.width;
                var y = -50;
                var size = Math.random() * 30 + 10;
                var planet = new Planet(x, y, size);
                planets.push(planet);
            }

// 惑星を更新して描画
            for (var i = 0; i < planets.length; i++) {
                var planet = planets[i];
                planet.update();
                planet.draw();
            }

// 彗星を更新して描画
            for (var i = 0; i < comets.length; i++) {
                var comet = comets[i];
                comet.update();
                comet.draw();

// 惑星との衝突判定
                for (var j = 0; j < planets.length; j++) {
                    var planet = planets[j];
                    if (isColliding(comet, planet)) {
                        planets.splice(j, 1);
                        comets.splice(i, 1);
                        config.score += config.scoreIncrement;
                        break;
                    }
                }
            }

// スコアを表示
            context.fillStyle = "white";
            context.font = "24px sans-serif";
            context.fillText("Score: " + config.score, 10, 30);

requestAnimationFrame(gameLoop);
        }

// 衝突判定
        function isColliding(object1, object2) {
            var dx = object1.x - object2.x;
            var dy = object1.y - object2.y;
            var distance = Math.sqrt(dx * dx + dy * dy);
            return distance < object1.size + object2.size;
        }

// ゲームを開始
        gameLoop();
    </script>
</body>
</html>
```