Green Shooter

by LuckyComet43
248 lines4.2 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Green Shooter</title>

<style>
    body {
        margin: 0;
        background: #101010;
        color: white;
        font-family: Arial;
        text-align: center;
        overflow: hidden;
    }

    #game {
        display: block;
        margin: 20px auto;
        background: #202020;
        border: 3px solid #00e676;
        max-width: 95%;
    }

    h1 {
        color: #00e676;
    }

    button {
        background: #00e676;
        border: none;
        padding: 12px 25px;
        font-size: 18px;
        border-radius: 8px;
        cursor: pointer;
    }
</style>
</head>

<body>

<h1>GREEN SHOOTER</h1>

<canvas id="game" width="800" height="500"></canvas>

<p>Score: <span id="score">0</span></p>

<button onclick="restartGame()">RESTART</button>

<script>

const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");

let player;
let bullets;
let enemies;
let score;
let gameOver;

function startGame() {

    player = {
        x: 380,
        y: 430,
        width: 40,
        height: 40,
        speed: 6
    };

    bullets = [];
    enemies = [];
    score = 0;
    gameOver = false;

    document.getElementById("score").textContent = score;
}

startGame();

document.addEventListener("keydown", function(e) {

    if (e.key === "ArrowLeft") {
        player.x -= player.speed;
    }

    if (e.key === "ArrowRight") {
        player.x += player.speed;
    }

    if (e.code === "Space") {
        bullets.push({
            x: player.x + 17,
            y: player.y,
            width: 6,
            height: 15,
            speed: 8
        });
    }
});

function createEnemy() {

    enemies.push({
        x: Math.random() * (canvas.width - 40),
        y: -40,
        width: 40,
        height: 40,
        speed: 2 + Math.random() * 2
    });
}

setInterval(createEnemy, 900);

function update() {

    if (gameOver) return;

    // Player limits
    if (player.x < 0)
        player.x = 0;

    if (player.x + player.width > canvas.width)
        player.x = canvas.width - player.width;

    // Bullets
    for (let i = bullets.length - 1; i >= 0; i--) {

        bullets[i].y -= bullets[i].speed;

        if (bullets[i].y < 0) {
            bullets.splice(i, 1);
        }
    }

    // Enemies
    for (let i = enemies.length - 1; i >= 0; i--) {

        enemies[i].y += enemies[i].speed;

        if (enemies[i].y > canvas.height) {
            gameOver = true;
        }

        // Enemy collision with player
        if (collision(player, enemies[i])) {
            gameOver = true;
        }

        // Bullet collision
        for (let j = bullets.length - 1; j >= 0; j--) {

            if (collision(bullets[j], enemies[i])) {

                enemies.splice(i, 1);
                bullets.splice(j, 1);

                score += 10;
                document.getElementById("score").textContent = score;

                break;
            }
        }
    }
}

function collision(a, b) {

    return (
        a.x < b.x + b.width &&
        a.x + a.width > b.x &&
        a.y < b.y + b.height &&
        a.y + a.height > b.y
    );
}

function draw() {

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Player
    ctx.fillStyle = "#00e676";
    ctx.fillRect(
        player.x,
        player.y,
        player.width,
        player.height
    );

    // Bullets
    ctx.fillStyle = "white";

    bullets.forEach(function(bullet) {

        ctx.fillRect(
            bullet.x,
            bullet.y,
            bullet.width,
            bullet.height
        );
    });

    // Enemies
    ctx.fillStyle = "red";

    enemies.forEach(function(enemy) {

        ctx.fillRect(
            enemy.x,
            enemy.y,
            enemy.width,
            enemy.height
        );
    });

    if (gameOver) {

        ctx.fillStyle = "white";
        ctx.font = "50px Arial";
        ctx.textAlign = "center";

        ctx.fillText(
            "GAME OVER",
            canvas.width / 2,
            canvas.height / 2
        );
    }
}

function gameLoop() {

    update();
    draw();

    requestAnimationFrame(gameLoop);
}

function restartGame() {
    startGame();
}

gameLoop();

</script>

</body>
</html>
Game Source: Green Shooter

Creator: LuckyComet43
Libraries: none
Complexity: complex (248 lines, 4.2 KB)
The full source code is displayed above on this page.
Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: green-shooter-luckycomet43" to link back to the original. Then publish at arcadelab.ai/publish.