Make 2D shooting game with 50 alive and play in random big map's game

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

No:17552

←

Prev Next

→

Make 2D shooting game with 50 alive and play in ra..ALL
Developer User5843｜Date and time 23/9/23 21:30:12
Build time 42.937 sec｜Game capacity 4.776KB｜

Script

Sure! Here's an example of a simple 2D shooting game implemented as a single HTML file using JavaScript. The game will have 50 enemies on a random big map. It will be playable on a smartphone and will use pictograms for visuals. Please note that this is a basic example and can be further enhanced and customized as per your requirements. Here's the code:

To play the game, simply save the above code into an HTML file, open the file in a web browser (preferably on a smartphone), and you should be able to control the player using the arrow keys. The enemies will move randomly, and if the player collides with any enemy, a game over alert will be shown, and the game will restart.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

Here's the code:

```html
<!DOCTYPE html>
<html>
<head>
    <title>2D Shooting Game</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #game-canvas {
            width: 100vw;
            height: 100vh;
            background-color: #000;
            position: absolute;
        }
        
        .player {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 30px;
            height: 30px;
            background-color: #fff;
            border-radius: 50%;
        }
        
        .enemy {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: #f00;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <canvas id="game-canvas"></canvas>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Game setup
            var canvas = document.getElementById('game-canvas');
            var ctx = canvas.getContext('2d');
            
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            
            var player = {
                x: window.innerWidth / 2,
                y: window.innerHeight / 2,
                speed: 5,
                size: 30
            };
            
            var enemies = [];
            var numEnemies = 50;
            
            for (var i = 0; i < numEnemies; i++) {
                var enemy = {
                    x: Math.random() * canvas.width,
                    y: Math.random() * canvas.height,
                    size: 20
                };
                enemies.push(enemy);
            }
            
            // Game loop
            function update() {
                // Clear canvas
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                
                // Draw player
                ctx.beginPath();
                ctx.arc(player.x, player.y, player.size, 0, Math.PI * 2);
                ctx.fillStyle = '#fff';
                ctx.fill();
                ctx.closePath();
                
                // Move player
                if (player.x < 0) player.x = canvas.width;
                if (player.x > canvas.width) player.x = 0;
                if (player.y < 0) player.y = canvas.height;
                if (player.y > canvas.height) player.y = 0;
                
                // Draw enemies
                for (var i = 0; i < enemies.length; i++) {
                    var enemy = enemies[i];
                    
                    ctx.beginPath();
                    ctx.arc(enemy.x, enemy.y, enemy.size, 0, Math.PI * 2);
                    ctx.fillStyle = '#f00';
                    ctx.fill();
                    ctx.closePath();
                    
                    // Move enemies randomly
                    enemy.x += Math.random() * 10 - 5;
                    enemy.y += Math.random() * 10 - 5;
                    
                    // Check collision
                    var dx = player.x - enemy.x;
                    var dy = player.y - enemy.y;
                    var distance = Math.sqrt(dx * dx + dy * dy);
                    
                    if (distance < player.size + enemy.size) {
                        // Game over
                        alert('Game over!');
                        location.reload();
                    }
                }
                
                requestAnimationFrame(update);
            }
            
            // Player controls
            document.addEventListener('keydown', function(e) {
                if (e.key === 'ArrowUp') player.y -= player.speed;
                if (e.key === 'ArrowDown') player.y += player.speed;
                if (e.key === 'ArrowLeft') player.x -= player.speed;
                if (e.key === 'ArrowRight') player.x += player.speed;
            });
            
            // Start the game
            update();
        });
    </script>
</body>
</html>
```