AI game creator

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

No:24446

116

←

Prev Next

→

Tower defense game
Developer User7090｜Date and time 23/11/9 5:35:34
Build time 72.141 sec｜Game capacity 3.41KB｜

Script

Sure, here's a simple tower defense game implemented as a single HTML file using JavaScript:

This simple tower defense game involves defending a tower from enemies that approach it from the left side of the canvas. The tower can be moved horizontally by hovering the mouse over the canvas. The game ends when an enemy collides with the tower, and the player's score is displayed. The game can then be restarted by reloading the page.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

Sure, here's a simple tower defense game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Tower Defense Game</title>
</head>
<body>
    <canvas id="game-canvas" width="600" height="400"></canvas>
    <script>
        // Tower Defense Game
        
        // Initialize canvas
        const canvas = document.getElementById('game-canvas');
        const context = canvas.getContext('2d');
        
        // Game variables
        const WIDTH = canvas.width;
        const HEIGHT = canvas.height;
        const enemySize = 40;
        const towerSize = 50;
        const enemySpeed = 1;
        const enemySpawnRate = 1000; // spawn a new enemy every 1 second
        let score = 0;
        
        // Create enemies
        const enemies = [{ x: -enemySize, y: HEIGHT / 2 }];
        
        // Create tower
        const tower = { x: WIDTH / 2 - towerSize / 2, y: HEIGHT - towerSize };
        
        // Game loop
        function gameLoop() {
            clearCanvas();
            updateEnemies();
            drawEnemies();
            drawTower();
            requestAnimationFrame(gameLoop);
        }
        
        // Clear the canvas
        function clearCanvas() {
            context.clearRect(0, 0, WIDTH, HEIGHT);
        }
        
        // Update enemy positions and check for collisions
        function updateEnemies() {
            for (let i = 0; i < enemies.length; i++) {
                const enemy = enemies[i];
                enemy.x += enemySpeed;
                if (enemy.x + enemySize > tower.x && enemy.x < tower.x + towerSize && enemy.y + enemySize > tower.y) {
                    alert("Game Over! Final Score: " + score);
                    location.reload(); // Restart the game
                }
                if (enemy.x > WIDTH) {
                    score++;
                    enemies.splice(i, 1);
                    i--;
                    continue;
                }
            }
            if (Math.random() < 1 / enemySpawnRate) {
                const y = Math.random() * (HEIGHT - enemySize);
                enemies.push({ x: -enemySize, y: y });
            }
        }
        
        // Draw enemies
        function drawEnemies() {
            for (const enemy of enemies) {
                context.fillStyle = 'red';
                context.fillRect(enemy.x, enemy.y, enemySize, enemySize);
            }
        }
        
        // Draw tower
        function drawTower() {
            context.fillStyle = 'blue';
            context.fillRect(tower.x, tower.y, towerSize, towerSize);
        }
        
        // Handle tower movement
        document.addEventListener('mousemove', function(event) {
            const rect = canvas.getBoundingClientRect();
            tower.x = event.clientX - rect.left - towerSize / 2;
            if (tower.x < 0) tower.x = 0;
            if (tower.x + towerSize > WIDTH) tower.x = WIDTH - towerSize;
        });
        
        // Start the game
        gameLoop();
    </script>
</body>
</html>
```