AI game creator

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

No:38470

←

Prev Next

→

Shooting Game
Developer User17403｜Date and time 24/1/24 22:49:25
Build time 12.918 sec｜Game capacity 3.231KB｜

Script

Sure! Here's an example of a simple shooting game implemented as a single HTML file using JavaScript and pictograms:

In this game, you control a player represented by a pictogram (🙅) at the bottom of the canvas. By touching the screen, a bullet represented by a pictogram (💣) is shot towards the top. The goal is to hit targets with the bullet. The game uses the `requestAnimationFrame` method to create a smooth animation loop. You can further add game logic, such as adding targets and detecting collisions, to enhance the gameplay experience.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

Sure! Here's an example of a simple shooting game implemented as a single HTML file using JavaScript and pictograms:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Shooting Game</title>
    <style>
        canvas {
            border: 1px solid black;
            background-color: #e0e0e0;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// Define the player's initial position and size
        let playerX = canvas.width / 2;
        let playerY = canvas.height - 30;
        const playerSize = 20;

// Define the bullet's position, speed, and size
        let bulletX = playerX;
        let bulletY = playerY;
        const bulletSpeed = 5;
        const bulletSize = 10;
        let bulletVisible = false;

// Handle touch events on the canvas
        canvas.addEventListener("touchstart", handleTouchStart, false);
        canvas.addEventListener("touchend", handleTouchEnd, false);

// Handle the touchstart event by shooting a bullet
        function handleTouchStart() {
            if (!bulletVisible) {
                bulletVisible = true;
                bulletX = playerX;
                bulletY = playerY;
            }
        }

// Handle the touchend event by stopping the bullet
        function handleTouchEnd() {
            bulletVisible = false;
        }

// Update the game state
        function update() {
            // Move the bullet upwards if it's visible
            if (bulletVisible) {
                bulletY -= bulletSpeed;

// Reset the bullet position if it goes off-screen
                if (bulletY < 0) {
                    bulletVisible = false;
                }
            }
        }

// Render the game objects
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw the player as a pictogram
            ctx.fillStyle = "black";
            ctx.font = "24px 'Segoe UI Symbol'";
            ctx.fillText("\u{1F645}", playerX - playerSize/2, playerY + playerSize/2);

// Draw the bullet as a pictogram
            if (bulletVisible) {
                ctx.fillStyle = "red";
                ctx.font = "24px 'Segoe UI Symbol'";
                ctx.fillText("\u{1F4A3}", bulletX - bulletSize/2, bulletY + bulletSize/2);
            }
        }

// The game loop
        function gameLoop() {
            update();
            draw();

requestAnimationFrame(gameLoop);
        }

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