A game in which 18 balls keep reflecting's game

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

No:9643

151

←

Prev Next

→

A game in which 18 balls keep reflecting
Developer User4403｜Date and time 23/7/26 18:27:50
Build time 31.5 sec｜Game capacity 3.314KB｜

Script

←

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>18個の玉が反射し続けるゲーム</title>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// 玉オブジェクト
        function Ball(x, y, radius, speedX, speedY, color) {
            this.x = x;
            this.y = y;
            this.radius = radius;
            this.speedX = speedX;
            this.speedY = speedY;
            this.color = color;
        }

// ゲーム初期化
        function initGame() {
            game.canvas = document.getElementById("gameCanvas");
            game.ctx = game.canvas.getContext("2d");

// 玉を生成して配列に追加
            for (let i = 0; i < 18; i++) {
                const x = Math.random() * (game.canvas.width - 2 * 10) + 10;
                const y = Math.random() * (game.canvas.height - 2 * 10) + 10;
                const radius = Math.random() * 10 + 5;
                const speedX = Math.random() * 2 + 1;
                const speedY = Math.random() * 2 + 1;
                const color = randomColor();
                const ball = new Ball(x, y, radius, speedX, speedY, color);
                game.balls.push(ball);
            }

// ゲームループ開始
            game.moveInterval = setInterval(moveBalls, 10);
        }

// 玉を描画
        function drawBalls() {
            for (let i = 0; i < game.balls.length; i++) {
                const ball = game.balls[i];
                game.ctx.beginPath();
                game.ctx.arc(ball.x, ball.y, ball.radius, 0, 2 * Math.PI);
                game.ctx.fillStyle = ball.color;
                game.ctx.fill();
                game.ctx.closePath();
            }
        }

// 玉を移動
        function moveBalls() {
            for (let i = 0; i < game.balls.length; i++) {
                const ball = game.balls[i];
                ball.x += ball.speedX * game.direction;
                ball.y += ball.speedY * game.direction;

if (ball.x + ball.radius >= game.canvas.width || ball.x - ball.radius <= 0) {
                    ball.speedX *= -1;
                }

if (ball.y + ball.radius >= game.canvas.height || ball.y - ball.radius <= 0) {
                    ball.speedY *= -1;
                }
            }

// 画面をクリア
            game.ctx.clearRect(0, 0, game.canvas.width, game.canvas.height);

// 玉を描画
            drawBalls();
        }

// ランダムなカラーコードを生成
        function randomColor() {
            const letters = "0123456789ABCDEF";
            let color = "#";
            for (let i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }

// ゲーム開始
        initGame();

// スマホのタッチ操作に対応
        game.canvas.addEventListener("touchstart", function(e) {
            game.direction *= -1;
        });
    </script>
</body>
</html>