AI game creator

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

No:24581

←

Prev Next

→

A tower defence
Developer The maker｜Date and time 23/11/10 7:01:30
Build time 73.939 sec｜Game capacity 3.052KB｜

Script

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

This game sets up a grid-based tower defense game where the player can place towers on the grid by clicking on the canvas. The towers cost 50 gold, and the player starts with 100 gold. The grid cells are represented by squares that change color to indicate whether they are occupied by towers. The player's current gold is displayed on the top left corner of the canvas.

←

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>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// Constants
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");
        const cellSize = 40;
        const numRows = canvas.height / cellSize;
        const numCols = canvas.width / cellSize;

// Game state
        let gameGrid = [];
        for (let row = 0; row < numRows; row++) {
            gameGrid[row] = [];
            for (let col = 0; col < numCols; col++) {
                gameGrid[row][col] = { occupied: false };
            }
        }

// Player state
        let playerGold = 100;

// Function to draw game grid
        function drawGrid() {
            for (let row = 0; row < numRows; row++) {
                for (let col = 0; col < numCols; col++) {
                    ctx.beginPath();
                    ctx.rect(col * cellSize, row * cellSize, cellSize, cellSize);
                    ctx.closePath();

if (gameGrid[row][col].occupied) {
                        ctx.fillStyle = "gray";
                        ctx.fill();
                    } else {
                        ctx.fillStyle = "lightgray";
                        ctx.fill();
                    }
                }
            }
        }

// Event listener for placing towers on click
        canvas.addEventListener("click", function (event) {
            const rect = canvas.getBoundingClientRect();
            const mouseX = event.clientX - rect.left;
            const mouseY = event.clientY - rect.top;

const col = Math.floor(mouseX / cellSize);
            const row = Math.floor(mouseY / cellSize);

if (!gameGrid[row][col].occupied) {
                if (playerGold >= 50) {
                    gameGrid[row][col].occupied = true;
                    playerGold -= 50;
                }
            }
        });

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

// Draw player gold
            ctx.fillStyle = "black";
            ctx.font = "15px Arial";
            ctx.fillText("Gold: " + playerGold, 10, 20);

requestAnimationFrame(gameLoop);
        }

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