Shooting with control and level 1-10's game

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

No:18727

←

Prev Next

→

Shooting with control and level 1-10
Developer User8249｜Date and time 23/9/30 14:43:03
Build time 11.994 sec｜Game capacity 3.876KB｜

Script

Please find below a sample implementation of a shooting game in a single HTML file, using JavaScript and incorporating levels 1-10. The game assumes smartphone operation and utilizes pictograms as much as possible. You can copy the code and save it as an HTML file to play the game:

To play the game, save the above code as an HTML file, open it in a web browser on a smartphone, and tap on the canvas to gain focus. Then, use the spacebar or any other designated key to shoot the bullet towards the target. The target moves downwards, and if the bullet hits the target, the level increments. If the target reaches the bottom, a game over message is displayed along with the level reached. The game can be restarted by reloading the page.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Shooting Game</title>
    <style>
        canvas {
            display: block;
            margin: 0 auto;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script>
        // Game logic variables
        var canvas, ctx;
        var playerX, playerY;
        var bulletX, bulletY;
        var targetX, targetY;
        var level;
        
        // Initialize game
        function init() {
            canvas = document.getElementById("gameCanvas");
            ctx = canvas.getContext("2d");
            
            playerX = canvas.width / 2;
            playerY = canvas.height - 30;
            
            bulletX = playerX;
            bulletY = playerY;
            
            targetX = Math.random() * (canvas.width - 50) + 25;
            targetY = 0;
            
            level = 1;
            
            document.addEventListener("keydown", keyDownHandler, false);
            
            setInterval(gameLoop, 10);
        }
        
        // Handle key press event
        function keyDownHandler(event) {
            if (event.keyCode === 32) { // Space key
                shoot();
            }
        }
        
        // Update game positions and check collision
        function gameLoop() {
            drawGame();
            
            // Move bullet towards target
            bulletY -= 4;
            
            // Check collision
            if (bulletY < targetY + 25 && bulletY > targetY && 
                bulletX > targetX - 25 && bulletX < targetX + 25) {
                level++;
                targetX = Math.random() * (canvas.width - 50) + 25;
                targetY = 0;
                bulletX = playerX;
                bulletY = playerY;
            }
            
            // Move target downwards
            targetY += level / 2;
            
            // Check if target reaches bottom
            if (targetY > canvas.height) {
                alert("Game Over! Level reached: " + level);
                document.location.reload();
            }
        }
        
        // Draw game entities
        function drawGame() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // Draw player
            ctx.fillStyle = "black";
            ctx.fillRect(playerX - 25, playerY - 25, 50, 50);
            
            // Draw bullet
            ctx.fillStyle = "red";
            ctx.fillRect(bulletX - 5, bulletY - 15, 10, 30);
            
            // Draw target
            ctx.fillStyle = "green";
            ctx.fillRect(targetX - 25, targetY - 25, 50, 50);

// Draw level
            ctx.font = "16px Arial";
            ctx.fillStyle = "black";
            ctx.fillText("Level: " + level, 10, 20);
        }
        
        // Shoot bullet
        function shoot() {
            if (bulletY === playerY) {
                bulletX = playerX;
            }
        }
        
        // Start game
        window.onload = init;
    </script>
</body>
</html>
```