You play as a brown block and you have to move left and right and there's yellow blocks falling there's also a score when you hit the yellow blocks your score increases by 1%. Avoid the Red blocks cuz when you hit a red block you lose's game

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

No:48889

←

Prev Next

→

You play as a brown block and you have to move lef..ALL
Developer User15380｜Date and time 24/3/3 6:12:22
Build time 6.938 sec｜Game capacity 2.611KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Block Dodger Game</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');

let playerX = 200;
        let score = 0;
        let gameOver = false;

let obstacles = [];

function drawPlayer() {
            ctx.fillStyle = 'brown';
            ctx.fillRect(playerX - 20, 350, 40, 40);
        }

function drawObstacles() {
            obstacles.forEach((obstacle) => {
                ctx.fillStyle = obstacle.color;
                ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
            });
        }

function movePlayer(event) {
            if (event.key === 'ArrowLeft' && playerX > 20) {
                playerX -= 20;
            } 
            else if (event.key === 'ArrowRight' && playerX < 380) {
                playerX += 20;
            }
        }

function createObstacle() {
            let obstacle = {
                x: Math.floor(Math.random() * 360),
                y: 0,
                width: 40,
                height: 40,
                color: Math.random() < 0.8 ? 'yellow' : 'red'
            };
            obstacles.push(obstacle);
        }

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

if (!gameOver) {
                drawPlayer();
                drawObstacles();
                checkCollisions();

createObstacle();

obstacles.forEach((obstacle) => {
                    obstacle.y += 5;
                });

setTimeout(updateGame, 100);
            } 
            else {
                ctx.font = '30px Arial';
                ctx.fillText('Game Over', 150, 200);
                ctx.fillText('Score: ' + score, 150, 250);
            }
        }

document.addEventListener('keydown', movePlayer);
        updateGame();
    </script>
</body>
</html>