AI game creator

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

No:28799

←

Prev Next

→

Plants vs zombies
Developer User14245｜Date and time 23/12/14 12:33:32
Build time 44.22 sec｜Game capacity 3.171KB｜

Script

This is a basic implementation of "Plants vs. Zombies" game using JavaScript within a single HTML file. The game can be played on a smartphone by touching/clicking on the canvas to create zombies, while moving the player character (green square) using touch/mouse movement. The zombies fall down from the top of the screen and disappear when they reach the bottom. Note: This code represents a simplified version of the actual "Plants vs. Zombies" game and does not include additional features such as plants, levels, UI elements, etc.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Plants vs. Zombies</title>
    <style>
        canvas {
            background-color: #000;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    <script>
        // Game code goes here
        const canvas = document.getElementById("gameCanvas");
        const context = canvas.getContext("2d");

// Game variables
        let playerX = canvas.width / 2;
        let playerY = canvas.height - 100;
        let zombies = [];

// Event listeners
        canvas.addEventListener("mousemove", handleMouseMove);
        canvas.addEventListener("click", handleMouseClick);

// Function to handle mouse movement
        function handleMouseMove(event) {
            const rect = canvas.getBoundingClientRect();
            playerX = event.clientX - rect.left;
        }

// Function to handle mouse click
        function handleMouseClick(event) {
            const rect = canvas.getBoundingClientRect();
            const clickX = event.clientX - rect.left;
            const clickY = event.clientY - rect.top;

zombies.push({
                x: clickX,
                y: clickY,
                size: 50,
                speed: Math.floor(Math.random() * 3) + 1,
                color: getRandomColor()
            });
        }

// Function to generate random color
        function getRandomColor() {
            const letters = "0123456789ABCDEF";
            let color = "#";
            for (let i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }

// Function to update game state
        function update() {
            context.clearRect(0, 0, canvas.width, canvas.height);

// Update and draw player
            context.fillStyle = "#00FF00";
            context.fillRect(playerX - 25, playerY - 25, 50, 50);

// Update and draw zombies
            for (let i = 0; i < zombies.length; i++) {
                const zombie = zombies[i];
                zombie.y += zombie.speed;
                context.fillStyle = zombie.color;
                context.fillRect(zombie.x - zombie.size / 2, zombie.y - zombie.size / 2, zombie.size, zombie.size);

if (zombie.y > canvas.height) {
                    zombies.splice(i, 1);
                }
            }

requestAnimationFrame(update);
        }

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

Note: This code represents a simplified version of the actual "Plants vs. Zombies" game and does not include additional features such as plants, levels, UI elements, etc.