Numbers from 1 to 100 scrolling's game

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

No:13926

126

←

Prev Next

→

Numbers from 1 to 100 scrolling
Developer User6030｜Date and time 23/8/30 16:36:34
Build time 12.423 sec｜Game capacity 1.904KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Numbers Scrolling Game</title>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="600"></canvas>
    <script>
        // Creating the canvas element
        var canvas = document.getElementById("gameCanvas");
        var context = canvas.getContext("2d");

// Array to store the numbers from 1 to 100
        var numbers = [];
        for (var i = 1; i <= 100; i++) {
            numbers.push(i);
        }

// Variables to control scrolling effect
        var scrollSpeed = 5;
        var scrollPosition = 0;

// Function to draw the numbers on the canvas
        function drawNumbers() {
            // Clearing the canvas
            context.clearRect(0, 0, canvas.width, canvas.height);

// Styling for the numbers
            context.font = "20px Arial";
            context.fillStyle = "black";
            context.textAlign = "center";

// Looping through the numbers array and drawing them
            for (var i = 0; i < numbers.length; i++) {
                var number = numbers[i];
                var y = (i - scrollPosition) * 30 + canvas.height / 2;

// Checking if the number is within the visible canvas area
                if (y >= 0 && y < canvas.height) {
                    context.fillText(number, canvas.width / 2, y);
                }
            }
        }

// Function to handle scrolling
        function scrollNumbers() {
            scrollPosition += scrollSpeed;

// Resetting scrollPosition to 0 if it exceeds the numbers array length
            if (scrollPosition >= numbers.length) {
                scrollPosition = 0;
            }

// Redrawing the numbers on the canvas
            drawNumbers();
        }

// Starting the game loop
        setInterval(scrollNumbers, 100);

</script>
</body>
</html>