A platformer game where you must reach the flag's game

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

No:52822

404

←

Prev Next

→

A platformer game where you must reach the flag
Developer User22195｜Date and time 24/3/25 11:29:16
Build time 6.582 sec｜Game capacity 2.008KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Platformer Game</title>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    <script>
        // Game code goes here
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');

// Player
        const player = {
            x: 50,
            y: 50,
            width: 50,
            height: 50,
            speed: 5
        };

// Flag
        const flag = {
            x: 700,
            y: 500,
            width: 50,
            height: 50
        };

function drawPlayer() {
            ctx.fillStyle = 'red';
            ctx.fillRect(player.x, player.y, player.width, player.height);
        }

function drawFlag() {
            ctx.fillStyle = 'green';
            ctx.fillRect(flag.x, flag.y, flag.width, flag.height);
        }

function clearCanvas() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        }

function draw() {
            clearCanvas();
            drawPlayer();
            drawFlag();
        }

document.addEventListener('keydown', function(event) {
            switch (event.key) {
                case 'ArrowUp':
                    player.y -= player.speed;
                    break;
                case 'ArrowDown':
                    player.y += player.speed;
                    break;
                case 'ArrowLeft':
                    player.x -= player.speed;
                    break;
                case 'ArrowRight':
                    player.x += player.speed;
                    break;
            }

if (player.x < flag.x + flag.width &&
                player.x + player.width > flag.x &&
                player.y < flag.y + flag.height &&
                player.y + player.height > flag.y) {
                alert('You reached the flag! Game Over!');
            }

draw();
        });

draw();

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