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

No:11037

105

←

Prev Next

→

Tower defence game with upgrades and more towers
Developer User4769｜Date and time 23/8/6 23:55:48
Build time 66.851 sec｜Game capacity 8.187KB｜

Script

Sure! Here's an example of a tower defense game implemented in a single HTML file using JavaScript. The game includes upgrades and multiple types of towers. The game will be playable assuming smartphone operation, and pictograms will be used for visuals.

Tower Defence Game

Please note that this is a basic implementation of a tower defense game and may require additional refinement and additional features to make it fully functional.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Tower Defence Game</title>
    <style>
        #game-container {
            width: 100%;
            height: 400px;
            background-color: lightgray;
            position: relative;
        }

.tower {
            width: 40px;
            height: 40px;
            background-color: darkgray;
            border-radius: 50%;
            position: absolute;
        }

.enemy {
            width: 30px;
            height: 30px;
            background-color: red;
            border-radius: 50%;
            position: absolute;
        }

.bullet {
            width: 10px;
            height: 10px;
            background-color: black;
            position: absolute;
        }

#upgrade-buttons {
            display: flex;
            justify-content: space-around;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>Tower Defence Game</h1>
    <div id="game-container">
    </div>
    <div id="upgrade-buttons">
        <button onclick="upgradeTowerRange()">Upgrade Range</button>
        <button onclick="upgradeTowerDamage()">Upgrade Damage</button>
    </div>

// Tower class
        function Tower(x, y) {
            this.x = x;
            this.y = y;
            this.range = 100;
            this.damage = 10;
            this.level = 1;

this.upgradeRange = function() {
                this.range += 50;
            }

this.upgradeDamage = function() {
                this.damage += 5;
            }
        }

// Enemy class
        function Enemy(id, x, y) {
            this.id = id;
            this.x = x;
            this.y = y;
            this.health = 50;
            this.speed = 2;
            this.direction = 'right';

this.move = function() {
                if (this.direction === 'right') {
                    this.x += this.speed;
                } else if (this.direction === 'left') {
                    this.x -= this.speed;
                } else if (this.direction === 'up') {
                    this.y -= this.speed;
                } else if (this.direction === 'down') {
                    this.y += this.speed;
                }
            }

this.takeDamage = function(damage) {
                this.health -= damage;
                if (this.health <= 0) {
                    // Enemy killed
                    var enemyElement = document.getElementById('enemy-' + this.id);
                    enemyElement.parentNode.removeChild(enemyElement);
                    enemies = enemies.filter(function(enemy) {
                        return enemy.id !== this.id;
                    });
                }
            }
        }

// Bullet class
        function Bullet(x, y, target) {
            this.x = x;
            this.y = y;
            this.target = target;
            this.damage = 5;

this.updatePosition = function() {
                var dx = this.target.x - this.x;
                var dy = this.target.y - this.y;
                var distance = Math.sqrt(dx * dx + dy * dy);

if (distance <= 2) {
                    // Bullet hit the target
                    this.target.takeDamage(this.damage);
                    var bulletElement = document.getElementById('bullet-' + this.target.id);
                    bulletElement.parentNode.removeChild(bulletElement);
                    bullets = bullets.filter(function(bullet) {
                        return bullet.target.id !== this.target.id;
                    });
                } else {
                    this.x += (dx / distance) * this.speed;
                    this.y += (dy / distance) * this.speed;
                }
            }
        }

// Game loop
        function gameLoop() {
            // Spawn enemy every second
            if (nextEnemyId % 60 === 0) {
                var enemyX = gameContainer.offsetWidth - 30;
                var enemyY = Math.floor(Math.random() * (gameContainer.offsetHeight - 30));
                var enemy = new Enemy(nextEnemyId, enemyX, enemyY);
                enemies.push(enemy);

var enemyElement = document.createElement('div');
                enemyElement.className = 'enemy';
                enemyElement.id = 'enemy-' + nextEnemyId;
                enemyElement.style.left = enemyX + 'px';
                enemyElement.style.top = enemyY + 'px';
                gameContainer.appendChild(enemyElement);

nextEnemyId++;
            }

// Move enemies
            for (var i = 0; i < enemies.length; i++) {
                var enemy = enemies[i];
                enemy.move();
                var enemyElement = document.getElementById('enemy-' + enemy.id);
                enemyElement.style.left = enemy.x + 'px';
                enemyElement.style.top = enemy.y + 'px';
            }

// Shoot bullets
            for (var i = 0; i < towers.length; i++) {
                var tower = towers[i];
                var targetEnemy;

// Find nearest enemy in range
                for (var j = 0; j < enemies.length; j++) {
                    var enemy = enemies[j];
                    var dx = tower.x - enemy.x;
                    var dy = tower.y - enemy.y;
                    var distance = Math.sqrt(dx * dx + dy * dy);

if (distance <= tower.range) {
                        targetEnemy = enemy;
                        break;
                    }
                }

if (targetEnemy) {
                    var bullet = new Bullet(tower.x, tower.y, targetEnemy);
                    bullets.push(bullet);

var bulletElement = document.createElement('div');
                    bulletElement.className = 'bullet';
                    bulletElement.id = 'bullet-' + targetEnemy.id;
                    bulletElement.style.left = tower.x + 'px';
                    bulletElement.style.top = tower.y + 'px';
                    gameContainer.appendChild(bulletElement);
                }
            }

// Update bullet positions
            for (var i = 0; i < bullets.length; i++) {
                var bullet = bullets[i];
                bullet.updatePosition();
                var bulletElement = document.getElementById('bullet-' + bullet.target.id);
                bulletElement.style.left = bullet.x + 'px';
                bulletElement.style.top = bullet.y + 'px';
            }

// Remove killed enemies and bullets
            // TODO: Implement collision detection and game over condition

requestAnimationFrame(gameLoop);
        }

// Tower upgrade functions
        function upgradeTowerRange() {
            for (var i = 0; i < towers.length; i++) {
                towers[i].upgradeRange();
            }
        }

function upgradeTowerDamage() {
            for (var i = 0; i < towers.length; i++) {
                towers[i].upgradeDamage();
            }
        }

// Initialize towers
        var tower1 = new Tower(100, 100);
        var tower2 = new Tower(200, 200);
        towers.push(tower1, tower2);

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

Please note that this is a basic implementation of a tower defense game and may require additional refinement and additional features to make it fully functional.