DVD screensaver game. The color changing block will move and whenever it hits a corner a button will appear saying to press it and you win's game

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

No:45233

←

Prev Next

→

DVD screensaver game. The color changing block wil..ALL
Developer WinnerWiener1332｜Date and time 24/2/20 9:33:05
Build time 5.619 sec｜Game capacity 1.309KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>DVD Screensaver Game</title>
</head>
<body>
    <canvas id="canvas" width="400" height="300"></canvas>
    <button id="winButton" style="display:none;">Press to win!</button>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        const button = document.getElementById('winButton');
        let x = 0;
        let y = 0;
        let dx = 2;
        let dy = 2;

function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = '#FF0000'; // Red color
            ctx.fillRect(x, y, 20, 20);
            x += dx;
            y += dy;

// Check if the block hits the canvas walls
            if (x < 0 || x + 20 > canvas.width) {
                dx = -dx;
                button.style.display = 'block'; // Show the win button
            }
            if (y < 0 || y + 20 > canvas.height) {
                dy = -dy;
                button.style.display = 'block'; // Show the win button
            }

requestAnimationFrame(draw);
        }

button.addEventListener('click', () => {
            alert('You win!');
        });

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