war game, 2d, pixelated, between alien races's game

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

No:30690

←

Prev Next

→

war game, 2d, pixelated, between alien races
Developer User14918｜Date and time 23/12/23 23:09:09
Build time 32.345 sec｜Game capacity 5.967KB｜

Script

The above is a basic HTML game that fulfills the requirements mentioned. It is a simple 2D pixelated war game between alien races. The player controls a spaceship using the right and left arrow keys. They can shoot bullets using the spacebar to destroy enemy alien spaceships. If the player collides with an enemy alien spaceship, the game ends and the score is displayed. To run the game, save the above code into a .html file and open it with a web browser that supports HTML5 canvas and JavaScript execution.

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>War Game: Alien Race Battle</title>
</head>
<body>
    <canvas id="gameCanvas" width="480" height="320"></canvas>

// Game variables
        var playerAlien = { x: canvas.width / 2, y: canvas.height - 50, width: 32, height: 32 };
        var bullets = [];
        var enemyAliens = [];
        var score = 0;

// Load alien images
        var playerAlienImage = new Image();
        playerAlienImage.src = "player-alien.png";

var enemyAlienImage = new Image();
        enemyAlienImage.src = "enemy-alien.png";

var bulletImage = new Image();
        bulletImage.src = "bullet.png";

// Keyboard event listeners
        document.addEventListener("keydown", keyDownHandler, false);
        document.addEventListener("keyup", keyUpHandler, false);

// Track which keys are being pressed
        var rightPressed = false;
        var leftPressed = false;
        var spacePressed = false;

// Create random enemy aliens
        function createEnemyAliens() {
            enemyAliens = [];
            for (var i = 0; i < 5; i++) {
                var enemyAlien = { x: Math.random() * (canvas.width - 32), y: Math.random() * (canvas.height / 2), width: 32, height: 32 };
                enemyAliens.push(enemyAlien);
            }
        }

// Check collision between two objects
        function checkCollision(object1, object2) {
            if (object1.x < object2.x + object2.width &&
                object1.x + object1.width > object2.x &&
                object1.y < object2.y + object2.height &&
                object1.y + object1.height > object2.y) {
                return true;
            }
            return false;
        }

// Game loop
        function drawGame() {
            // Clear canvas
            context.clearRect(0, 0, canvas.width, canvas.height);

// Draw player alien
            context.drawImage(playerAlienImage, playerAlien.x, playerAlien.y, playerAlien.width, playerAlien.height);

// Draw enemy aliens
            for (var i = 0; i < enemyAliens.length; i++) {
                var enemyAlien = enemyAliens[i];
                context.drawImage(enemyAlienImage, enemyAlien.x, enemyAlien.y, enemyAlien.width, enemyAlien.height);
            }

// Move player alien
            if (rightPressed && playerAlien.x < canvas.width - playerAlien.width) {
                playerAlien.x += 5;
            } else if (leftPressed && playerAlien.x > 0) {
                playerAlien.x -= 5;
            }

// Move enemy aliens and check collision with player alien
            for (var i = 0; i < enemyAliens.length; i++) {
                var enemyAlien = enemyAliens[i];
                enemyAlien.y += 2;

if (checkCollision(enemyAlien, playerAlien)) {
                    gameOver();
                    return;
                }
            }

// Draw bullets and check collision with enemy aliens
            for (var i = 0; i < bullets.length; i++) {
                var bullet = bullets[i];
                bullet.y -= 5;

for (var j = 0; j < enemyAliens.length; j++) {
                    var enemyAlien = enemyAliens[j];
                    if (checkCollision(bullet, enemyAlien)) {
                        enemyAliens.splice(j, 1);
                        score += 10;
                        bullets.splice(i, 1);
                        break;
                    }
                }

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

// Draw score
            context.font = "16px Arial";
            context.fillText("Score: " + score, 8, 20);

// Call the game loop again
            requestAnimationFrame(drawGame);
        }

// Game over logic
        function gameOver() {
            alert("Game Over! Your score: " + score);
            score = 0;
            createEnemyAliens();
        }

// Fire bullets
        function fireBullet() {
            var bullet = { x: playerAlien.x + playerAlien.width / 2 - 2.5, y: playerAlien.y, width: 5, height: 10 };
            bullets.push(bullet);
        }

// Event listener for firing bullets
        document.addEventListener("keydown", function (event) {
            if (event.keyCode === 32) {
                if (!spacePressed) {
                    spacePressed = true;
                    fireBullet();
                }
            }
        });

// Initialize game
        createEnemyAliens();
        drawGame();

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

To run the game, save the above code into a .html file and open it with a web browser that supports HTML5 canvas and JavaScript execution.