AI game creator

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

No:12563

←

Prev Next

→

plants vs zombies
Developer User3760｜Date and time 23/8/19 22:43:16
Build time 24.652 sec｜Game capacity 4.233KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>植物大战僵尸</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>

const plantImage = new Image();
        plantImage.src = "plant.png";

const zombieImage = new Image();
        zombieImage.src = "zombie.png";

const sunflowerImage = new Image();
        sunflowerImage.src = "sunflower.png";

// 等待资源加载完毕后开始游戏
        backgroundImage.onload = function () {
            startGame();
        };

// 游戏逻辑
        function startGame() {
            // 初始化游戏状态
            let gameData = {
                plants: [],
                zombies: [],
                sunflowers: [],
                sunCount: 50
            };

// 绘制游戏画面
            function draw() {
                ctx.clearRect(0, 0, gameCanvas.width, gameCanvas.height);
                ctx.drawImage(backgroundImage, 0, 0);

// 绘制植物
                for (let i = 0; i < gameData.plants.length; i++) {
                    const plant = gameData.plants[i];
                    ctx.drawImage(plantImage, plant.x, plant.y);
                }

// 绘制僵尸
                for (let i = 0; i < gameData.zombies.length; i++) {
                    const zombie = gameData.zombies[i];
                    ctx.drawImage(zombieImage, zombie.x, zombie.y);
                }

// 绘制向日葵
                for (let i = 0; i < gameData.sunflowers.length; i++) {
                    const sunflower = gameData.sunflowers[i];
                    ctx.drawImage(sunflowerImage, sunflower.x, sunflower.y);
                }

// 绘制太阳数
                ctx.font = "20px Arial";
                ctx.fillStyle = "white";
                ctx.fillText("太阳: " + gameData.sunCount, 10, 30);
            }

// 更新游戏状态
            function update() {
                // 更新植物状态
                for (let i = 0; i < gameData.plants.length; i++) {
                    const plant = gameData.plants[i];
                    plant.x += 1; // 示例，每次更新位置向右移动1个单位
                }

// 更新僵尸状态
                for (let i = 0; i < gameData.zombies.length; i++) {
                    const zombie = gameData.zombies[i];
                    zombie.x -= 1; // 示例，每次更新位置向左移动1个单位
                }

// 判断植物与僵尸是否碰撞
                for (let i = 0; i < gameData.plants.length; i++) {
                    const plant = gameData.plants[i];
                    for (let j = 0; j < gameData.zombies.length; j++) {
                        const zombie = gameData.zombies[j];
                        if (plant.x < zombie.x + zombieImage.width &&
                            plant.x + plantImage.width > zombie.x &&
                            plant.y < zombie.y + zombieImage.height &&
                            plant.y + plantImage.height > zombie.y) {
                            console.log("植物被僵尸吃掉了！");
                            // 在这里处理植物被僵尸吃掉的逻辑
                        }
                    }
                }
            }

// 游戏主循环
            function gameLoop() {
                update();
                draw();
                requestAnimationFrame(gameLoop);
            }

gameLoop();
        }
    </script>
</body>
</html>