towers getting hit by a plane's game

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

No:37325

←

Prev Next

→

towers getting hit by a plane
Developer User17003｜Date and time 24/1/21 1:11:58
Build time 10.53 sec｜Game capacity 2.843KB｜

Script

Sure, here's a simple game called "Tower Defender" where you need to protect the towers from incoming planes. The game is implemented as a single HTML file, enclosed in script tags, and written in JavaScript. It is designed to be played on a smartphone. To represent the towers and planes, we'll use pictograms.

To use this code, you'll need to provide the actual images for the tower and plane pictograms (`emozi_rabbit.png` and `emozi_apple.png`) and handle the game over logic to complete the game. This skeleton code provides the basic structure and functionality of the game, allowing planes to be shot down to protect the towers.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Tower Defender</title>
    <style>
        #game-container {
            width: 100%;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <canvas id="game"></canvas>
    </div>

const towerImage = new Image();
        towerImage.src = "tower.png";
        const planeImage = new Image();
        planeImage.src = "plane.png";

const towerWidth = 50;
        const towerHeight = 50;
        const planeWidth = 60;
        const planeHeight = 60;
        const canvasWidth = canvas.width = window.innerWidth;
        const canvasHeight = canvas.height = window.innerHeight;

const towers = [
            { x: 100, y: canvasHeight - towerHeight },
            { x: 300, y: canvasHeight - towerHeight },
            { x: 500, y: canvasHeight - towerHeight }
        ];

let planes = [];

canvas.addEventListener('click', shootPlane);

function shootPlane(event) {
            const x = event.clientX;
            const y = event.clientY;
            const plane = { x, y, speed: 5 };
            planes.push(plane);
        }

function update() {
            context.clearRect(0, 0, canvasWidth, canvasHeight);

for(let i = 0; i < towers.length; i++) {
                const tower = towers[i];
                context.drawImage(towerImage, tower.x, tower.y, towerWidth, towerHeight);
            }

for(let i = 0; i < planes.length; i++) {
                const plane = planes[i];
                plane.y -= plane.speed;
                context.drawImage(planeImage, plane.x, plane.y, planeWidth, planeHeight);

if(plane.y < 0) {
                    planes.splice(i, 1);
                    // Game over condition, handle it here...
                }
            }

requestAnimationFrame(update);
        }

update();
    </script>
</body>
</html>
```

To use this code, you'll need to provide the actual images for the tower and plane pictograms (`tower.png` and `plane.png`) and handle the game over logic to complete the game. This skeleton code provides the basic structure and functionality of the game, allowing planes to be shot down to protect the towers.