AI game creator

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

No:24447

122

←

Prev Next

→

Tower defense game
Developer User7090｜Date and time 23/11/9 5:37:41
Build time 75.588 sec｜Game capacity 3.889KB｜

Script

Sure! Here's an example of a simple tower defense game implemented as a single HTML file with JavaScript:

This code creates a simple tower defense game where enemies are moving from left to right on the game board and the player can shoot them by clicking on the game board using their mouse. The tower follows the player's mouse movement and shoots bullet objects towards the enemies. When a bullet collides with an enemy, both the enemy and the bullet are removed from the game board.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

Sure! Here's an example of a simple tower defense game implemented as a single HTML file with JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Tower Defense Game</title>
    <style>
        #game-board {
            width: 400px;
            height: 400px;
            border: 1px solid black;
            position: relative;
        }
        .enemy {
            width: 40px;
            height: 40px;
            position: absolute;
            background-color: red;
            border-radius: 50%;
            top: 10px;
            left: 0;
            animation: moveEnemy 4s linear infinite;
        }
        .tower {
            width: 30px;
            height: 30px;
            position: absolute;
            background-color: gray;
            border-radius: 50%;
            top: 180px;
            left: 0;
            cursor: pointer;
        }
        .bullet {
            width: 10px;
            height: 10px;
            position: absolute;
            background-color: black;
        }
        @keyframes moveEnemy {
            0% { left: 0; }
            100% { left: 360px; }
        }
    </style>
</head>
<body>
    <div id="game-board">
        <div id="tower" class="tower"></div>
    </div>

gameBoard.addEventListener("click", function(event) {
                var bullet = document.createElement("div");
                bullet.className = "bullet";
                bullet.style.top = parseInt(tower.style.top) + 10 + "px";
                bullet.style.left = parseInt(tower.style.left) + 30 + "px";
                gameBoard.appendChild(bullet);
                
                var enemies = document.getElementsByClassName("enemy");
                var bulletInterval = setInterval(function() {
                    for (var i = 0; i < enemies.length; i++) {
                        var enemy = enemies[i];
                        if (isCollision(bullet, enemy)) {
                            enemy.parentNode.removeChild(enemy);
                            bullet.parentNode.removeChild(bullet);
                            clearInterval(bulletInterval);
                            break;
                        }
                    }
                    var bulletPosition = parseInt(bullet.style.left);
                    if (bulletPosition >= 360) {
                        bullet.parentNode.removeChild(bullet);
                        clearInterval(bulletInterval);
                    } else {
                        bullet.style.left = bulletPosition + 5 + "px";
                    }
                }, 10);
            });

gameBoard.addEventListener("mousemove", function(event) {
                tower.style.top = event.clientY - 15 + "px";
                tower.style.left = event.clientX - 15 + "px";
            });

function isCollision(bullet, enemy) {
                var bulletRect = bullet.getBoundingClientRect();
                var enemyRect = enemy.getBoundingClientRect();
                return !(bulletRect.right < enemyRect.left || 
                         bulletRect.left > enemyRect.right || 
                         bulletRect.bottom < enemyRect.top ||
                         bulletRect.top > enemyRect.bottom);
            }
        });
    </script>
</body>
</html>
```