AI game creator

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

No:13844

129

←

Prev Next

→

3D numbers
Developer User6030｜Date and time 23/8/30 4:37:53
Build time 17.705 sec｜Game capacity 3.468KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>3D Numbers Game</title>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    
    <script>
        // Create the game canvas
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");
        
        // Set up the game variables
        let score = 0;
        let gameOver = false;
        
        // Create the number object
        class Number {
            constructor(x, y, value) {
                this.x = x;
                this.y = y;
                this.value = value;
            }
            
            draw() {
                ctx.fillStyle = "#000000";
                ctx.font = "48px Arial";
                ctx.fillText(this.value, this.x, this.y);
            }
            
            update() {
                this.y += 2; // Move the number downwards
            }
        }
        
        // Create the player object
        class Player {
            constructor(x, y) {
                this.x = x;
                this.y = y;
                this.width = 50;
                this.height = 50;
            }
            
            draw() {
                ctx.fillStyle = "#FF0000";
                ctx.fillRect(this.x, this.y, this.width, this.height);
            }
            
            update() {
                // No movement in this simple game
            }
            
            collides(number) {
                if (this.x < number.x + number.width &&
                    this.x + this.width > number.x &&
                    this.y < number.y + number.height &&
                    this.y + this.height > number.y) {
                    return true; // Collision
                }
                return false;
            }
        }
        
        // Create the game objects
        const player = new Player(375, 500);
        const numbers = [
            new Number(100, 0, 1),
            new Number(200, -150, 2),
            new Number(300, -300, 3)
        ];
        
        // Game loop
        function gameLoop() {
            // Clear the canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // Update and draw the game objects
            player.update();
            player.draw();
            
            numbers.forEach((number, index) => {
                number.update();
                number.draw();
                
                // Check for collision with the player
                if (player.collides(number)) {
                    score += number.value;
                    numbers.splice(index, 1); // Remove the number from the array
                }
                
                // Check if any numbers have reached the bottom of the canvas
                if (number.y > canvas.height) {
                    gameOver = true;
                }
            });
            
            // Display the score
            ctx.fillStyle = "#000000";
            ctx.font = "32px Arial";
            ctx.fillText("Score: " + score, 10, 50);
            
            if (!gameOver) {
                requestAnimationFrame(gameLoop); // Continue the game loop
            } else {
                // Display game over message
                ctx.fillText("Game Over", canvas.width/2 - 100, canvas.height/2);
            }
        }
        
        // Start the game loop
        gameLoop();
    </script>
</body>
</html>