AI game creator

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

No:52730

205

←

Prev Next

→

Tower defence
Developer User21934｜Date and time 24/3/24 8:49:05
Build time 9.619 sec｜Game capacity 2.415KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Tower Defence Game</title>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    
    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        
        // Game variables
        let player = {
            x: 50,
            y: canvas.height / 2,
            width: 20,
            height: 20,
            color: 'blue'
        };
        
        let enemy = {
            x: canvas.width - 50,
            y: canvas.height / 2,
            width: 20,
            height: 20,
            color: 'red'
        };
        
        let bullets = [];
        
        function drawPlayer() {
            ctx.fillStyle = player.color;
            ctx.fillRect(player.x, player.y, player.width, player.height);
        }
        
        function drawEnemy() {
            ctx.fillStyle = enemy.color;
            ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
        }
        
        function drawBullets() {
            ctx.fillStyle = 'black';
            for (let i = 0; i < bullets.length; i++) {
                ctx.fillRect(bullets[i].x, bullets[i].y, bullets[i].width, bullets[i].height);
            }
        }
        
        function updateBullets() {
            for (let i = 0; i < bullets.length; i++) {
                bullets[i].x += 2;
                if (bullets[i].x > canvas.width) {
                    bullets.splice(i, 1);
                }
            }
        }
        
        function fireBullet() {
            bullets.push({ x: player.x + player.width, y: player.y + player.height / 2, width: 10, height: 5 });
        }
        
        function gameLoop() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawPlayer();
            drawEnemy();
            drawBullets();
            updateBullets();
            
            if (Math.abs(player.x - enemy.x) < 30 && Math.abs(player.y - enemy.y) < 30) {
                alert('Game Over! You were too slow to defend your tower.');
            }
            
            requestAnimationFrame(gameLoop);
        }
        
        document.addEventListener('keydown', (event) => {
            if (event.key === ' ' || event.key === 'Spacebar') {
                fireBullet();
            }
        });
        
        gameLoop();
    </script>
</body>
</html>