星を瞬く球体のゲーム's game

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

No:32103

←

Prev Next

→

星を瞬く球体のゲーム
Developer User15352｜Date and time 23/12/30 0:26:25
Build time 36.256 sec｜Game capacity 4.156KB｜

Script

了解しました。以下に、星を瞬かせる球体のゲームの実装例を示します。

Score: 0

このプログラムでは、\要素を使ってゲーム画面を表示し、JavaScriptを用いて星を瞬かせる球体のゲームを実装しています。マウスを操作して、星をクリックすると点数が加算されます。

←

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>
    <style>
        canvas {
            background-color: black;
        }
        #score {
            font-size: 24px;
            color: white;
            position: absolute;
            top: 10px;
            left: 10px;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <div id="score">Score: 0</div>
    <script>
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");

let stars = [];
        let score = 0;

// ボールオブジェクトの定義
        class Ball {
            constructor(x, y, speedX, speedY, color) {
                this.x = x;
                this.y = y;
                this.speedX = speedX;
                this.speedY = speedY;
                this.color = color;
            }

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

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

if (this.x < 0 || this.x > canvas.width) {
                    this.speedX = -this.speedX;
                }
                if (this.y < 0 || this.y > canvas.height) {
                    this.speedY = -this.speedY;
                }
            }
        }

// スターを瞬かせる関数
        function twinkle() {
            for (let i = 0; i < stars.length; i++) {
                stars[i].color = getRandomColor();
            }
        }

// 色をランダムに生成する関数
        function getRandomColor() {
            const letters = "0123456789ABCDEF";
            let color = "#";
            for (let i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }

// マウス操作時の処理
        canvas.addEventListener("mousemove", function(e) {
            const rect = canvas.getBoundingClientRect();
            const mouseX = e.clientX - rect.left;
            const mouseY = e.clientY - rect.top;
            
            for (let i = 0; i < stars.length; i++) {
                const dx = stars[i].x - mouseX;
                const dy = stars[i].y - mouseY;
                const distance = Math.sqrt(dx * dx + dy * dy);
                
                if (distance < 10) {
                    stars.splice(i, 1);
                    twinkle();
                    score++;
                    document.getElementById("score").textContent = "Score: " + score;
                    break;
                }
            }
        });

// 初期化処理
        function init() {
            for (let i = 0; i < 100; i++) {
                const x = Math.random() * (canvas.width - 20) + 10;
                const y = Math.random() * (canvas.height - 20) + 10;
                const speedX = Math.random() * 2 - 1;
                const speedY = Math.random() * 2 - 1;
                const color = getRandomColor();
                stars.push(new Ball(x, y, speedX, speedY, color));
            }
        }

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

for (let i = 0; i < stars.length; i++) {
                stars[i].draw();
                stars[i].update();
            }

requestAnimationFrame(gameLoop);
        }

// 初期化とゲームループの開始
        init();
        gameLoop();
    </script>
</body>
</html>
```

このプログラムでは、\<canvas\>要素を使ってゲーム画面を表示し、JavaScriptを用いて星を瞬かせる球体のゲームを実装しています。マウスを操作して、星をクリックすると点数が加算されます。