Un juego donde presionamos un botón para poner un pixel y con cada pixel nuevo el juego cambiará y se hiciera más complicado y diferente's game

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

No:22708

107

←

Prev Next

→

Un juego donde presionamos un botón para poner un ..ALL
Developer User3408｜Date and time 23/10/24 7:57:11
Build time 31.433 sec｜Game capacity 2.436KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Pixogram Game</title>
    <style>
        #gameCanvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// Initialize game variables
        let score = 0;
        let speedX = 1;
        let speedY = 0;
        let pixelX = 10;
        let pixelY = 10;
        let pixelSize = 20;

// Function to handle button click
        function addPixel() {
            // Increase score
            score++;
            
            // Change the speed and direction of the pixel based on score
            speedX = score;
            speedY = Math.sin(score);

// Generate random color for the pixel
            let randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);

// Update pixel position
            pixelX += speedX;
            pixelY += speedY;

// Draw the pixel on canvas
            ctx.fillStyle = randomColor;
            ctx.fillRect(pixelX, pixelY, pixelSize, pixelSize);
        }

// Function to update the game state
        function updateGame() {
            // Clear canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Update pixel position
            pixelX += speedX;
            pixelY += speedY;

// Check if pixel goes out of bounds
            if (pixelX >= canvas.width || pixelX < 0) {
                // Reset pixel position
                pixelX = 10;
                pixelY = 10;
            }

// Draw the pixel on canvas
            ctx.fillStyle = "black";
            ctx.fillRect(pixelX, pixelY, pixelSize, pixelSize);

// Update game difficulty based on score
            if (score >= 10) {
                pixelSize = 10;
            }

if (score >= 20) {
                speedX = 2;
                speedY = Math.sin(score);
            }

if (score >= 30) {
                pixelSize = 5;
            }

// Request animation frame
            requestAnimationFrame(updateGame);
        }

// Start the game
        updateGame();
    </script>
    
    <button onclick="addPixel()">Press to add a pixel</button>
</body>
</html>