Make a game where you must dodge Many bullets shot out of cannons on the border of the screen for as long as possible with a square that is controlled by a joy stick in the bottom right.'s game

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

No:52128

135

←

Prev Next

→

Make a game where you must dodge Many bullets shot..ALL
Developer User21762｜Date and time 24/3/18 0:28:11
Build time 12.313 sec｜Game capacity 2.697KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bullet Dodger Game</title>
<style>
    body {
        margin: 0;
        overflow: hidden;
    }
    canvas {
        background: #f2f2f2;
    }
</style>
</head>
<body>
<canvas id="gameCanvas"></canvas>

canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

function drawSquare() {
        ctx.fillStyle = 'blue';
        ctx.fillRect(squareX, squareY, squareSize, squareSize);
    }

function drawBullets() {
        ctx.fillStyle = 'red';
        bullets.forEach(bullet => {
            ctx.fillRect(bullet.x, bullet.y, bullet.size, bullet.size);
        });
    }

function spawnBullet() {
        const bullet = {
            x: 0,
            y: Math.random() * canvas.height,
            size: 10
        }
        bullets.push(bullet);
    }

function checkCollision() {
        bullets.forEach(bullet => {
            if (squareX < bullet.x + bullet.size &&
                squareX + squareSize > bullet.x &&
                squareY < bullet.y + bullet.size &&
                squareY + squareSize > bullet.y) {
                gameOver();
            }
        });
    }

function updateScore() {
        score++;
        ctx.font = '20px Arial';
        ctx.fillStyle = 'black';
        ctx.fillText('Score: ' + score, 10, 30);
    }

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

function gameOver() {
        alert('Game Over! Your score: ' + score);
        document.location.reload();
    }

function gameLoop() {
        clearCanvas();
        drawSquare();
        drawBullets();
        moveBullets();
        checkCollision();
        updateScore();
        spawnBullet();
        requestAnimationFrame(gameLoop);
    }

window.addEventListener('keydown', e => {
        if (e.key === 'ArrowUp') {
            squareY -= 10;
        } else if (e.key === 'ArrowDown') {
            squareY += 10;
        }
    });

gameLoop();
</script>
</body>
</html>
```