AI game creator

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

No:11868

117

←

Prev Next

→

Shooting Game
Developer User4963｜Date and time 23/8/12 19:21:02
Build time 34.835 sec｜Game capacity 4.408KB｜

Script

Sure! Here's a simple shooting game implemented as a single HTML file using JavaScript:

This implementation creates a simple shooting game where you control a player using touch (support for smartphone operation) or keyboard (for desktop) inputs. The objective is to shoot down the moving enemy object using missiles. The game loops continuously until the enemy reaches the player or the player shoots the enemy. If the enemy reaches the player, a "Game Over" message is displayed and the game restarts.

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

Sure! Here's a simple shooting game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Shooting Game</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        canvas {
            background: #f0f0f0;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>

// Player position and properties
    const player = {
        x: canvas.width / 2,
        y: canvas.height - 50,
        width: 30,
        height: 30,
        color: '#000'
    };

// Missile properties
    const missile = {
        x: player.x + player.width / 2 - 2.5,
        y: player.y,
        width: 5,
        height: 10,
        speed: 5,
        color: '#f00',
        isFired: false
    };

// Enemy properties
    const enemy = {
        x: Math.random() * (canvas.width - 20) + 10,
        y: 10,
        width: 20,
        height: 20,
        speed: 2,
        color: '#00f'
    };

// Handle player movements
    function movePlayer(direction) {
        if (direction === 'left' && player.x > 0) {
            player.x -= 10;
        } else if (direction === 'right' && player.x < canvas.width - player.width) {
            player.x += 10;
        }
    }

// Handle shooting missile
    function shootMissile() {
        if (!missile.isFired) {
            missile.isFired = true;
            missile.x = player.x + player.width / 2 - 2.5;
        }
    }

// Check collision between two objects
    function isColliding(obj1, obj2) {
        return obj1.x < obj2.x + obj2.width &&
            obj1.x + obj1.width > obj2.x &&
            obj1.y < obj2.y + obj2.height &&
            obj1.y + obj1.height > obj2.y;
    }

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

// Draw player
        context.fillStyle = player.color;
        context.fillRect(player.x, player.y, player.width, player.height);

// Update and draw missile
        if (missile.isFired) {
            missile.y -= missile.speed;
            context.fillStyle = missile.color;
            context.fillRect(missile.x, missile.y, missile.width, missile.height);
        }

// Draw enemy
        context.fillStyle = enemy.color;
        context.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);

// Handle missile-enemy collision
        if (isColliding(missile, enemy)) {
            enemy.x = Math.random() * (canvas.width - 20) + 10;
            enemy.y = 10;
            missile.isFired = false;
        }

// Handle enemy reaching player
        if (enemy.y + enemy.height >= player.y) {
            alert('Game Over!');
            location.reload(); // Restart game
        }

// Move enemy downwards
        if (enemy.y < canvas.height - enemy.height) {
            enemy.y += enemy.speed;
        }

// Request next frame
        requestAnimationFrame(gameLoop);
    }

// Start game loop
    gameLoop();

// Handle touch events for smartphone operation
    canvas.addEventListener('touchstart', function (e) {
        const touchX = e.touches[0].clientX;
        if (touchX < canvas.width / 2) {
            movePlayer('left');
        } else {
            movePlayer('right');
        }
    });

// Handle keydown events for keyboard operation
    window.addEventListener('keydown', function (e) {
        if (e.key === 'ArrowLeft' || e.key === 'Left') {
            movePlayer('left');
        } else if (e.key === 'ArrowRight' || e.key === 'Right') {
            movePlayer('right');
        } else if (e.key === ' ') {
            shootMissile();
        }
    });
</script>
</body>
</html>
```