Make a fast pace 2d shooter's game

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

No:8694

117

←

Prev Next

→

Make a fast pace 2d shooter
Developer User4230｜Date and time 23/7/17 23:26:28
Build time 46.903 sec｜Game capacity 6.056KB｜

Script

Sure! Here's a sample implementation of a fast-paced 2D shooter game using HTML, CSS, and JavaScript:

This implementation features a game container, a player controlled by touch gestures, bullets to shoot enemies, enemies that move down the screen, collision detection, and a game over condition. The player can move left and right by swiping on the screen, and they can shoot bullets by tapping on the screen. The game gets progressively challenging as enemies appear faster. The final score is displayed upon game over, and the game can be restarted. Please note that due to the limitations of a text-based response, the game dynamics, graphics, levels, and additional features may be limited in this sample. However, the provided code gives a basic structure for a fast-paced 2D shooter game that you can build upon and expand according to your requirements.

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

Sure! Here's a sample implementation of a fast-paced 2D shooter game using HTML, CSS, and JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        #game-container {
            position: relative;
            width: 400px;
            height: 500px;
            border: 2px solid black;
        }

#player {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: blue;
        }

.bullet {
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: red;
        }

.enemy {
            position: absolute;
            width: 30px;
            height: 30px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="player"></div>
    </div>
    
    <script>
        // Game variables
        var playerX = 175;
        var playerY = 450;
        var score = 0;
        var gameSpeed = 10;
        var isGameOver = false;

// Function to create bullets
        function createBullet(posX, posY) {
            var bullet = document.createElement("div");
            bullet.classList.add("bullet");
            bullet.style.left = posX + "px";
            bullet.style.top = posY + "px";
            document.getElementById("game-container").appendChild(bullet);
        }

// Function to create enemies
        function createEnemy() {
            var posX = Math.random() * 350;
            var posY = 0;
            var enemy = document.createElement("div");
            enemy.classList.add("enemy");
            enemy.style.left = posX + "px";
            enemy.style.top = posY + "px";
            document.getElementById("game-container").appendChild(enemy);
        }

// Function to move bullets and check collision with enemies
        function moveBullets() {
            var bullets = document.getElementsByClassName("bullet");
            var enemies = document.getElementsByClassName("enemy");

for (var i = 0; i < bullets.length; i++) {
                if (bullets[i].offsetTop > 0) {
                    bullets[i].style.top = bullets[i].offsetTop - gameSpeed + "px";

for (var j = 0; j < enemies.length; j++) {
                        if (checkCollision(bullets[i], enemies[j])) {
                            bullets[i].remove();
                            enemies[j].remove();
                            score += 10;
                        }
                    }
                } else {
                    bullets[i].remove();
                }
            }
        }

// Function to move enemies and check collision with the player
        function moveEnemies() {
            var enemies = document.getElementsByClassName("enemy");

for (var i = 0; i < enemies.length; i++) {
                if (enemies[i].offsetTop < 500) {
                    enemies[i].style.top = enemies[i].offsetTop + gameSpeed + "px";

if (checkCollision(enemies[i], document.getElementById("player"))) {
                        gameOver();
                        return;
                    }
                } else {
                    enemies[i].remove();
                }
            }
        }

// Function to check collision between two elements
        function checkCollision(a, b) {
            var aRect = a.getBoundingClientRect();
            var bRect = b.getBoundingClientRect();

return (
                aRect.left < bRect.right &&
                aRect.right > bRect.left &&
                aRect.top < bRect.bottom &&
                aRect.bottom > bRect.top
            );
        }

// Function to handle player movement
        function movePlayer(event) {
            var x = event.touches[0].clientX;
            playerX = x < 50 ? 0 : x > 350 ? 350 : x - 50;
            document.getElementById("player").style.left = playerX + "px";
        }

// Function to start the game
        function startGame() {
            document.addEventListener("touchmove", movePlayer);
            setInterval(function () {
                if (!isGameOver) {
                    createEnemy();
                    moveBullets();
                    moveEnemies();
                }
            }, 40); // adjust the interval speed for game difficulty
        }

// Function to end the game
        function gameOver() {
            isGameOver = true;
            alert("Game Over!\nFinal Score: " + score);
            restartGame();
        }

// Function to restart the game
        function restartGame() {
            var bullets = document.getElementsByClassName("bullet");
            var enemies = document.getElementsByClassName("enemy");

for (var i = bullets.length - 1; i >= 0; i--) {
                bullets[i].remove();
            }

for (var i = enemies.length - 1; i >= 0; i--) {
                enemies[i].remove();
            }

playerX = 175;
            score = 0;
            isGameOver = false;

document.getElementById("player").style.left = playerX + "px";
        }

// Start the game
        startGame();
    </script>
</body>
</html>
```

Please note that due to the limitations of a text-based response, the game dynamics, graphics, levels, and additional features may be limited in this sample. However, the provided code gives a basic structure for a fast-paced 2D shooter game that you can build upon and expand according to your requirements.