Game With Bouncing Numbers's game

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

No:13842

120

←

Prev Next

→

Game With Bouncing Numbers
Developer User6030｜Date and time 23/8/30 4:33:47
Build time 17.324 sec｜Game capacity 3.232KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Game With Bouncing Numbers</title>
    <style>
        #canvas {
            background: #f1f1f1;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>

// Number class to represent bouncing numbers on the canvas
        class Number {
            constructor(x, y, speedX, speedY, value) {
                this.x = x;
                this.y = y;
                this.speedX = speedX;
                this.speedY = speedY;
                this.value = value;
                this.size = 30;
                this.color = getRandomColor();
            }

draw() {
                ctx.beginPath();
                ctx.fillStyle = this.color;
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fill();
                ctx.closePath();
                ctx.font = "20px Arial";
                ctx.fillStyle = "#ffffff";
                ctx.textAlign = "center";
                ctx.fillText(this.value, this.x, this.y + 7);
            }

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

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

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

// Generate a random number between min and max (inclusive)
        function getRandomNumber(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

// Generate a random color in hexadecimal format
        function getRandomColor() {
            const letters = '0123456789ABCDEF';
            let color = '#';
            for (let i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }

// Generate random bouncing numbers
        function generateNumbers(count) {
            const numbers = [];
            for (let i = 0; i < count; i++) {
                const x = getRandomNumber(50, canvas.width - 50);
                const y = getRandomNumber(50, canvas.height - 50);
                const speedX = getRandomNumber(-2, 2);
                const speedY = getRandomNumber(-2, 2);
                const value = getRandomNumber(0, 9);
                const number = new Number(x, y, speedX, speedY, value);
                numbers.push(number);
            }
            return numbers;
        }

const numbers = generateNumbers(10);

function gameLoop() {
            // Clear the canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Update and draw each bouncing number
            numbers.forEach(number => {
                number.update();
                number.draw();
            });

requestAnimationFrame(gameLoop);
        }

gameLoop();
    </script>
</body>
</html>