作者介绍

我是一名在校大三学生，对计算机编程非常感兴趣。有什么问题和困扰也是经常在博客找答案，(不过都是白嫖，哈哈 ) ，明天是我使用 CSDN 的一周年，刚好最近我写了一个植物大战僵尸游戏(html版)，希望能够在这里分享我的经验和成果。(全部免费) 同时也希望对这个项目感兴趣的朋友，有什么不懂的，可以在下面问我，我看见了会回复的。
(提示：
这是我第一次发作品，有什么不对的地方，希望大家可以提出，因为我是自学的，知识点也可能不对，干货满满，不过我的表达能力不太行，表达的不是很清楚，不过你要是问我，我会的，我肯定告诉你)

项目亮点

这个可以在手机QQ浏览器玩哦（把项目打包发给自己的QQ或者微信都行，然后用QQ浏览器解压，就可以在自己手机上玩自己的游戏了，也可以分享给自己的朋友，同学一起玩。）
游戏规则简单易懂，容易上手，但是难度逐渐增加，挑战性十足。
游戏中的植物都有不同的特殊能力，玩家可以根据自己的喜好和策略进行选择和搭配。

植物大战僵尸项目展示

-游戏展示

植物大战僵尸

-游戏主页

点击游戏界面中的 “准备”，开始游戏。

-游戏界面

植物选择栏：可以选择自己要种植的植物。
顶部为UI栏：
-能量值：游戏开始后，每秒能量值 +1 ，可以通过种植向日葵来增加能量值。
-击败僵尸数：展示玩家击败的僵尸数量，同时也是游戏最后得分。
-铲子：可以删除玩家种植的植物。点击选择铲子，然后双击植物，挖掉植物。
-游戏时间：展示当前游戏运行的时间。

-游戏画面-白天

-游戏画面-夜晚

注意：
游戏开始，一分钟后地图由白天变为黑夜，之后每两分钟换一次地图，且每过一分钟生成僵尸的概率加大，玩家注意防守。不过只需要守住 6分钟就游戏胜利了，加油！！！

-游戏失败画面

当僵尸靠近你的房子时，结束游戏。

-游戏胜利画面

当你抵挡了僵尸6分钟的进攻时，游戏胜利。

项目难点

在开发过程中，我遇到了一些难点，包括：

1. 生成的僵尸和种植的植物位置杂乱无章。
不要慌，我已经解决，给游戏地图画个格子，就像下棋一样，简单吧
如下图：
-

2. 如何实现植物和僵尸的不同能力，以及它们之间的交互。
已解决，面向对象的方法，每个植物都有自己的个性
代码展示：

// 定义植物类
function Plant(x, y,object) {this.x = x;this.y = y;this.object2 = object;this.Animation = {src:object.src,url:object.url,count:object.count,num:0,animation:false}this.set = "set"+this.x+this.ythis.name = object.name;//名字this.hp = object.hp; // 血量this.attack = object.attack; // 攻击力this.speed = object.speed; // 攻击速度this.range = object.range; // 射程this.color = object.color;//攻击颜色this.lastAttackTime = 0; // 上次攻击时间this.element = document.createElement('div'); // 元素节点this.element.className = 'plant'; // 添加样式this.element.style.top = this.y + 'px'; // 设置位置this.element.style.left = this.x + 'px';this.element2 = document.createElement('img'); // 元素节点this.element2.className = 'plantimg'; // 添加样式this.element2.src = this.Animation.src;this.element2.alt = this.name;this.element3 = document.createElement('span'); // 元素节点this.element3.className = 'plantspan'; // 添加样式this.element3.innerText = this.hp;game.appendChild(this.element); // 添加到游戏界面this.element.appendChild(this.element2); // 添加img标签this.element.appendChild(this.element3); // 添加h1标签gameState.plants.push(this); // 添加到植物列表}

3. 如何设计游戏关卡，让玩家感到有趣和挑战。
获取游戏时间，每一分钟游戏难度增加，这下应该有点挑战性了吧。
代码展示：

// 每1分钟提升游戏难度-提高生成僵尸的概率
if(Date.now()-gameState.startTime1>=60000){gameState.startTime1 = Date.now();gameState.pro = gameState.pro+0.01;console.log("难度升级:",gameState.pro);if(gameState.pro >=0.02){// 变为黑夜game.style.backgroundImage = "url(../images/background2.jpg)";}if(gameState.pro >=0.04){// 变为白天game.style.backgroundImage = "url(../images/background1.jpg)";}if(gameState.pro >=0.06){// 变为黑夜game.style.backgroundImage = "url(../images/background2.jpg)";}if(gameState.pro >=0.07){gameState.isOver = "挑战成功";}}

4. 如何优化游戏性能，避免卡顿和崩溃。
专门花了一天时间，优化了代码，把定时器该关的关了，消耗资源少。

游戏思路介绍及部分代码分析 (源码在最后)

1. 游戏显示区域主要分为三大区域

-黄色：显示可以种植的植物信息。
-蓝色：显示游戏的状态。
-红色：游戏互动区域，植物和僵尸的战场。

本来想一个功能一个功能的解释的，但是好像太多了，废话不多说，直接看源码。
大家不要觉得代码多哈，其实把他分为各个模块，就一点都不多了，就1000多行代码，不多。

游戏源码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>植物大战僵尸</title><style>* {margin: 0;padding: 0;/* 设置怪异盒子 */box-sizing: border-box;}body{background-color:#949489;}#app {margin: 50px auto;width: 1400px;height: 600px;border: 5px solid #010101;border-radius: 50px;background-image: url(../images/background1.jpg);background-repeat: no-repeat;background-size: cover;position: relative;}#topui {width: 1200px;height: 45px;position: absolute;top: 10px;left: 150px;}/* 能量栏 */.vessel{width: 100px;height: 45px;background-image: url(../images/sunback.png);background-repeat: no-repeat;background-size: 100px;font-size: 20px;font-weight: 700;line-height: 30px;padding-left: 15px;text-align: center;position: absolute;top: 0px;left: 0px;border: 1px solid #000;border-color: rgba(0, 0, 0,0);}.energy{width: 50px;height: 50px;border: 1px solid #000;border-color: rgba(0, 0, 0,0);border-radius: 20px;opacity: 1;position: absolute;top: 0px;left: 0px;}/* 按钮样式 */.button{width: 120px;height: 45px;line-height: 41px;border-radius: 5px;color: aliceblue;background-repeat: no-repeat;text-align: center;position: absolute;top: 0px;left: 1080px;border: 1px solid #000;border-color: rgba(0, 0, 0,0);}/* 删除植物 */.delete{width: 45px;height: 45px;background-image: url(../images/铁锹.png);background-repeat: no-repeat;background-size: 40px;text-align: center;position: absolute;top: 0px;left: 850px;border: 1px solid #000;border-color: rgba(0, 0, 0,0);}.delete:hover{transform: scale(1.2);}/* 得分 */.grade{width: 200px;height: 30px;text-align: center;line-height: 30px;font-size: 25px;color: #fafcfa;position: absolute;top: 0;left: 400px;border: 1px solid #000;border-color: rgba(0, 0, 0,0);background-color: lightslategrey;border-radius: 20px;}.button:hover{color: #09f63c;}#leftui {width: 100px;height: 455px;position: absolute;top: 60px;left: 10px;}/* 植物选择框单元样式 */.plantui{width: 100px;height: 60px;font-weight: 700;padding-left: 60px;padding-top: 40px;margin-bottom: 5px;border: 1px solid #000;border-color: rgba(0, 0, 0,0);border-radius: 10px;}.plantui:hover{border: 1px solid #09f63c;}/* 网格坐标样式 */.geid{width: 80px;height: 100px;border: 1px solid #000;border-color: rgba(0, 0, 0,0);border-radius: 20px;position: absolute;top: 60px;left: 250px;}/* 植物div */.plant {width: 80px;height: 100px;text-align: center;color: rgb(249, 250, 251);border: 1px solid #000000;border-color: rgba(0, 0, 0,0);border-radius: 20px;position: absolute;/* opacity: 0.8; */}/* 植物img */.plantimg{width: 80%;margin-top: 0px;margin-left: 10px;position: absolute;top: 25px;left: 0;}.plantspan{position: absolute;top: 0;left: 25px;}/* 僵尸div */.zombie {width: 80px;height: 102px;text-align: center;color: rgb(7, 7, 7);border: 1px solid #000;border-color: rgba(0, 0, 0,0);border-radius: 20px;border-radius: 20px;position: absolute;}/* 僵尸img */.zombieimg{width: 150%;margin-top: -12px;margin-left: -30px;}/* 子弹 */.bullet{width: 10px;height: 10px;margin-top: 30px;margin-left: 60px;/* background-color: #0ddb10; */background-color: #02a0f5;border: 1px solid #000;border-radius: 50%;position: absolute;}/* 准备游戏样式 */#go{width: 255px;height: 108px;position: absolute;top: 246px;left: 573px;background-image: url(../images/loading/loading_0.png);animation: xz 1s infinite;}@keyframes xz{0%{transform: scale(1);}50%{transform: scale(1.1);}100%{transform: scale(1);}}/* 游戏结束 */.end{width: 566px;height: 470px;position: absolute;top: 50px;left: 400px;background-image: url(../images/zombieWon.png);border: 1px solid #000;border-color: rgba(0, 0, 0,0);animation: end 2s infinite;}@keyframes end {0%{transform: scale(1);}50%{transform: scale(1.1);}100%{transform: scale(1);}}/* 游戏胜利 */.vict{width: 566px;height: 470px;text-align: center;padding-top: 308px;padding-left: 230px;padding-right: 200px;font-size: 40px;color: white;background-image: url(../images/游戏胜利.png);background-size: 1000px;background-position: left -200px top -50px;background-repeat: no-repeat;border: 1px solid #000;border-color: rgba(0, 0, 0,0);position: absolute;top: 50px;left: 400px;animation: vict 2s infinite;}@keyframes vict {0%{transform: scale(1);}50%{transform: scale(1.1);}100%{transform: scale(1);}}/* 时钟 */.nz{width: 100px;height: 50px;margin: 5px;padding-left: 40px;padding-top: 10px;font-weight: 700;color: #fafcfa;line-height: 28px;text-align: center;border-radius: 15px;background-image: url(../images/闹钟.png);background-size: 50px;background-repeat: no-repeat;position: absolute;top: 60;left: 900px;}</style>
</head><body><div id="app"><!-- 植物选择框 --><div id="leftui"></div><!-- 顶部UI栏 --><div id="topui"></div><!-- 游戏准备画面 --><div id="go"></div><!-- 测试 --></div></div><script>var game = document.getElementById('app');// 获取游戏界面元素var leftUI = document.getElementById('leftui');// 获取植物选择框var topUI = document.getElementById('topui');// 获取植物选择框var Go = document.getElementById('go');// 开始游戏按钮// 定义游戏状态var gameState = {plants: [],// 植物列表zombies: [],// 僵尸列表energys:[],//能量列表bullets: [],// 子弹列表toolbar:[],// 顶部UI栏列表labels:[],// 植物选择框列表geids:[], // 网格坐标列表isOver: "",// 游戏是否结束occupy:false,  // 选中的植物的对象delete:false,//选择要删除的植物grade:0,//得分startTime1:0,  //游戏运行时间startTime2:0,  //游戏运行时间pro:0.01};// 定义植物属性var PlantUte = {// 向日葵SunFlower:{name:"向日葵",price:50,uisrc1:"../images/cards/plants/SunFlower.png",uisrc2:"../images/cards/plants/SunFlowerG.png",datasrc:"../images/plants/sunflower/idle/idle_0.png",url:"../images/plants/sunflower/idle/idle_",count:17,hp:100,attack:0,speed:0,range:0,color:"red"},// 初级豌豆射手Peashooter:{name:"初级豌豆射手",price:50,uisrc1:"../images/cards/plants/Peashooter.png",uisrc2:"../images/cards/plants/PeashooterG.png",datasrc:"../images/plants/peashooter/attack/attack_0.png",url:"../images/plants/peashooter/attack/attack_",count:7,hp:100,attack:5,speed:500,range:500,color:"chartreuse"},// 中级豌豆射手Repeater:{name:"中级豌豆射手",price:100,uisrc1:"../images/cards/plants/Repeater.png",uisrc2:"../images/cards/plants/RepeaterG.png",datasrc:"../images/plants/repeater/attack/attack_0.png",url:"../images/plants/repeater/attack/attack_",count:14,hp:100,attack:10,speed:500,range:500,color:"chartreuse"},// 高级豌豆射手GatlingPea:{name:"高级豌豆射手",price:200,uisrc1:"../images/cards/plants/GatlingPea.png",uisrc2:"../images/cards/plants/GatlingPeaG.png",datasrc:"../images/plants/gatlingpea/attack/attack_0.png",url:"../images/plants/gatlingpea/attack/attack_",count:12,hp:100,attack:10,speed:300,range:500,color:"chartreuse"},// 番茄炸弹CherryBomb:{name:"番茄炸弹",price:200,uisrc1:"../images/cards/plants/CherryBomb.png",uisrc2:"../images/cards/plants/CherryBombG.png",datasrc:"../images/plants/cherrybomb/idle/idle_0.png",url:"../images/plants/cherrybomb/idle/idle_",count:6,hp:50,attack:100,speed:1000,range:57,color:"rgba(0,0,0,0)"},// 食人花Chomper:{name:"食人花",price:300,uisrc1:"../images/cards/plants/Chomper.png",uisrc2:"../images/cards/plants/ChomperG.png",datasrc:"../images/plants/chomper/attack/attack_0.png",url:"../images/plants/chomper/attack/attack_",count:8,hp:100,attack:20,speed:100,range:57,color:"rgba(0,0,0,0)"},// 坚果防御WallNut:{name:"坚果防御",price:50,uisrc1:"../images/cards/plants/WallNut.png",uisrc2:"../images/cards/plants/WallNutG.png",datasrc:"../images/plants/wallnut/idleH/idleH_0.png",url:"../images/plants/wallnut/idleH/idleH_",count:15,hp:1000,attack:0,speed:0,range:0,color:"red"}}// 顶部UI类function ToolBar(text,style){this.text = text;this.element = document.createElement('div');this.element.className = style;this.element.innerText = this.text;topUI.appendChild(this.element); // 添加到游戏选择UI框gameState.toolbar.push(this)}// 植物选择框类function Labels(object){this.object = object;this.name=object.name; //名字this.price=object.price;// 价格this.uisrc1 = "url("+object.uisrc1+")";// UI图标路径this.uisrc2 = "url("+object.uisrc2+")";this.src = object.datasrc;// 生成图标路径this.url=object.url;// 动画路径this.count=object.count;// 动画图片数量this.hp = object.hp; // 血量this.attack = object.attack; // 攻击力this.speed = object.speed; // 攻击速度this.range = object.range; // 射程this.color = object.color;//攻击颜色this.occupy = false;//是否选中this.element = document.createElement('div'); // 元素节点this.element.alt = this.name;this.element.className = 'plantui'; // 添加样式this.element.style.backgroundImage = this.uisrc1;this.element.innerText=this.price;// 显示价格leftUI.appendChild(this.element); // 添加到游戏选择UI框gameState.labels.push(this); // 添加到植物选择框列表}// 网格坐标类function Geid(x,y){this.x = x;this.y = y;this.occupy = false;this.element = document.createElement("div");this.element.className = "geid";this.element.style.top = this.y + 'px'; // 设置位置this.element.style.left = this.x + 'px';game.appendChild(this.element)gameState.geids.push(this)}// 定义能量类function EnErgy(object){this.object = object;this.x = object.x;this.y = object.y+50;this.hp = true;this.element = document.createElement('img'); // 元素节点this.element.src = "../images/sun.gif" ;this.element.className = 'energy'; // 添加样式this.element.style.top = this.y + "px";this.element.style.left = this.x + "px";game.appendChild(this.element); // 添加到游戏界面gameState.energys.push(this);}// 定义植物类function Plant(x, y,object) {this.x = x;this.y = y;this.object2 = object;this.Animation = {src:object.src,url:object.url,count:object.count,num:0,animation:false}this.set = "set"+this.x+this.ythis.name = object.name;//名字this.hp = object.hp; // 血量this.attack = object.attack; // 攻击力this.speed = object.speed; // 攻击速度this.range = object.range; // 射程this.color = object.color;//攻击颜色this.lastAttackTime = 0; // 上次攻击时间this.element = document.createElement('div'); // 元素节点this.element.className = 'plant'; // 添加样式this.element.style.top = this.y + 'px'; // 设置位置this.element.style.left = this.x + 'px';this.element2 = document.createElement('img'); // 元素节点this.element2.className = 'plantimg'; // 添加样式this.element2.src = this.Animation.src;this.element2.alt = this.name;this.element3 = document.createElement('span'); // 元素节点this.element3.className = 'plantspan'; // 添加样式this.element3.innerText = this.hp;game.appendChild(this.element); // 添加到游戏界面this.element.appendChild(this.element2); // 添加img标签this.element.appendChild(this.element3); // 添加h1标签gameState.plants.push(this); // 添加到植物列表}// 定义僵尸类function Zombie(x, y) {this.x = x;this.y = y;// 僵尸动画属性this.Animation = {src:"../images/zombies/run/run_0.png",url:"../images/zombies/run/run_",count:30,num:0,animation:false}this.hp = 100; // 血量this.attack = 1; // 攻击力this.speed = 1; // 移动速度this.speedG = 50; // 攻击速度this.range = 50; // 射程this.rice = false;this.lastAttackTime = 0; // 上次攻击时间this.element = document.createElement('div'); // 元素节点this.element.className = 'zombie'; // 添加样式this.element.style.top = this.y + 'px'; // 设置位置this.element.style.left = this.x + 'px';this.element2 = document.createElement('img'); // 元素节点this.element2.className = 'zombieimg'; // 添加样式this.element2.src = this.Animation.src;this.element3 = document.createElement('span'); // 元素节点this.element3.className = 'zombiespan'; // 添加样式this.element3.innerText = this.hp;game.appendChild(this.element); // 添加到游戏界面this.element.appendChild(this.element3); // 添加img标签this.element.appendChild(this.element2); // 添加img标签gameState.zombies.push(this); // 添加到僵尸列表}// 定义子弹类function Bullet(plant, target) {this.x = plant.x;this.y = plant.y;this.speed = 5; // 移动速度this.attack = plant.attack;//攻击大小this.target = target; // 目标对象this.element = document.createElement('div'); // 元素节点this.element.className = 'bullet'; // 添加样式this.element.style.backgroundColor = plant.color;//子弹颜色this.element.style.borderColor = plant.color;this.element.style.left = this.x + 'px';// 设置位置this.element.style.top = this.y + 'px'; game.appendChild(this.element); // 添加到游戏界面gameState.bullets.push(this); // 添加到子弹列表}// 初始化选择框UIvar InitUI = function(){// 初始化网格线坐标for(var i=0;i<5;i++){for(var j=0;j<9;j++){new Geid(parseInt(j*80+240),parseInt(i*100+60))}}// 创建顶部UI信息栏对象实例new ToolBar(500,"vessel");//能量收集new ToolBar("","delete"); //铲子new ToolBar(0,"grade"); //销毁僵尸数量new ToolBar("00:00","nz"); //游戏时间// 创建UI标签栏对象实例new Labels(PlantUte.SunFlower); //向日葵new Labels(PlantUte.Peashooter); //初级豌豆射手new Labels(PlantUte.Repeater); //中级豌豆射手new Labels(PlantUte.GatlingPea); //高级豌豆射手new Labels(PlantUte.CherryBomb); //番茄炸弹new Labels(PlantUte.Chomper); //食人花new Labels(PlantUte.WallNut); //坚果防御}// 游戏时间var Initnz = function(){let time = Date.now()-gameState.startTime2;var date = new Date(time);var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':';var s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());var strDate = m+s;gameState.toolbar[3].element.innerText = strDate;}// 开始游戏按钮Go.onclick = function(){console.log("开始游戏");InitUI();gameState.startTime1 = Date.now();gameState.startTime2 = Date.now();// 游戏主循环定时器var Appset =  setInterval(function(){// 游戏时间Initnz()// 随机生成僵尸if (Math.random() < gameState.pro) {console.log("生成僵尸:",gameState.pro)new Zombie(1130, parseInt(Math.random()*5)*100+60);}// 选择要种植的植物gameState.labels.forEach(function(label){if(label.price <= gameState.toolbar[0].element.innerText){label.element.style.backgroundImage = label.uisrc1;label.element.style.color = "black";}else{label.element.style.backgroundImage = label.uisrc2;label.element.style.color = "red";}label.element.onclick = function(){if(gameState.toolbar[0].element.innerText >= label.price){gameState.occupy = label;gameState.geids.forEach(function(geid){if(geid.occupy){geid.element.style.borderColor="rgba(251, 4, 4,0.5)";}else{geid.element.style.borderColor="rgba(222, 251, 4, 0.759)";}})}}})// 选择生成植物的网格坐标gameState.geids.forEach(function(geid){geid.element.onclick = function(){if(gameState.occupy){geid.occupy = truenew Plant(geid.x,geid.y,gameState.occupy);gameState.toolbar[0].element.innerText -=gameState.occupy.price; gameState.occupy=false;gameState.geids.forEach(function(geid){geid.element.style.borderColor="rgba(0, 0, 0,0)";})}}})// 僵尸移动gameState.zombies.forEach(function(zombie) {if(zombie.x>=170){zombie.x -= zombie.speed;zombie.element.style.left = zombie.x + 'px';}else{gameState.isOver = "挑战失败";}});// 植物攻击僵尸gameState.plants.forEach(function(plant) {gameState.zombies.forEach(function(zombie) {if(zombie.y == plant.y){if (zombie.x - plant.x <= plant.range && zombie.x > plant.x) {if (Date.now() - plant.lastAttackTime >= plant.speed) {new Bullet(plant,zombie);plant.lastAttackTime = Date.now();if (zombie.hp <= 0) {gameState.toolbar[2].element.innerText = ++gameState.grade;game.removeChild(zombie.element);gameState.zombies.splice(gameState.zombies.indexOf(zombie), 1);}}}}});});// 僵尸攻击植物gameState.zombies.forEach(function(zombie) {gameState.plants.forEach(function(plant) {if(zombie.y == plant.y){if(zombie.x-plant.x <= zombie.range && zombie.x > plant.x ){zombie.x = plant.x+zombie.range;zombie.rice = true;if (Date.now() - zombie.lastAttackTime >= zombie.speedG) {plant.hp-=zombie.attack;// zombie.rice = true;plant.element3.innerText = plant.hp;zombie.lastAttackTime = Date.now();}// zombie.rice = false;}else{zombie.rice = false;}}// zombie.rice = false;});});// 判断该植物是否死亡，释放网格资源gameState.plants.forEach(function(plant){gameState.geids.forEach(function(geid){if(plant.hp<=0){if(geid.x == plant.x && geid.y == plant.y){geid.occupy = false;game.removeChild(plant.element);gameState.plants.splice(gameState.plants.indexOf(plant), 1);}}})})// 检测子弹是否击中目标gameState.bullets.forEach(function(bullet) {if (bullet.target && Math.abs(bullet.x - bullet.target.x) < 60) {bullet.target.hp -= bullet.attack;bullet.target.element3.innerText = bullet.target.hp;game.removeChild(bullet.element);gameState.bullets.splice(gameState.bullets.indexOf(bullet), 1);} else {bullet.x += bullet.speed;bullet.element.style.left = bullet.x + 'px';}});// 选择要删除的植物gameState.toolbar[1].element.onclick = function(){console.log("删除植物");gameState.delete = true;gameState.geids.forEach(function(geid){if(geid.occupy){geid.element.style.borderColor="rgba(222, 251, 4, 0.759)";}else{geid.element.style.borderColor="rgba(251, 4, 4,0.5)";}})}// 选择删除植物的网格坐标gameState.plants.forEach(function(plant){plant.element.ondblclick = function(){gameState.geids.forEach(function(geid){if(gameState.delete){if(geid.x == plant.x && geid.y == plant.y){geid.occupy = false;gameState.delete = false;plant.hp = 0;game.removeChild(plant.element);gameState.plants.splice(gameState.plants.indexOf(plant), 1);}gameState.geids.forEach(function(geid){geid.element.style.borderColor="rgba(0, 0, 0,0)";})}})}})// 游戏难度,每1分钟提升难度if(Date.now()-gameState.startTime1>=60000){gameState.startTime1 = Date.now();gameState.pro = gameState.pro+0.01;console.log("难度升级:",gameState.pro);if(gameState.pro >=0.02){game.style.backgroundImage = "url(../images/background2.jpg)";}if(gameState.pro >=0.04){game.style.backgroundImage = "url(../images/background1.jpg)";}if(gameState.pro >=0.06){game.style.backgroundImage = "url(../images/background2.jpg)";}if(gameState.pro >=0.07){gameState.isOver = "挑战成功";}}// 植物动画gameState.plants.forEach(function(plant){if(!plant.Animation.animation){var plantSet =  setInterval(function(){if(plant.name == "坚果防御" && plant.hp<600 && plant.hp >=300){plant.Animation.src = "../images/plants/wallnut/idleM/idleM_0.png";plant.Animation.url = "../images/plants/wallnut/idleM/idleM_";plant.Animation.count = 10;}if(plant.name == "坚果防御" && plant.hp<300){plant.Animation.src = "../images/plants/wallnut/idleL/idleL_0.png";plant.Animation.url = "../images/plants/wallnut/idleL/idleL_";plant.Animation.count = 14;}if(plant.Animation.num<=plant.Animation.count){plant.element2.src = plant.Animation.url+plant.Animation.num+".png";plant.Animation.num++;}else{plant.Animation.num=0;}if(plant.hp<=0){clearInterval(plantSet);}},100);plant.Animation.animation = !plant.Animation.animation;}})// 僵尸动画gameState.zombies.forEach(function(zombie){if(!zombie.Animation.animation){var zombieSet =  setInterval(function(){if(zombie.hp>20 && zombie.rice){zombie.Animation.src = "../images/zombies/attack_0.png";zombie.Animation.url = "../images/zombies/attack/attack_";zombie.Animation.count = 20;}else{zombie.Animation.src = "../images/zombies/run/run_0.png";zombie.Animation.url = "../images/zombies/run/run_";zombie.Animation.count = 30;}if(zombie.hp<=20){zombie.Animation.src = "../images/zombies/dying/body/body_0.png";zombie.Animation.url = "../images/zombies/dying/body/body_";zombie.Animation.count = 17;}if(zombie.hp<=5){zombie.Animation.src = "../images/zombies/die/die_0.png";zombie.Animation.url = "../images/zombies/die/die_";zombie.Animation.count = 9;}if(zombie.hp<=1){zombie.Animation.src = "../images/zombies/dying/head/head_0.png";zombie.Animation.url = "../images/zombies/dying/head/head_";zombie.Animation.count = 11;}if(zombie.Animation.num<=zombie.Animation.count){zombie.element2.src = zombie.Animation.url+zombie.Animation.num+".png";zombie.Animation.num++;}else{zombie.Animation.num=0;}if(zombie.hp<=0){clearInterval(zombieSet);}},50);zombie.Animation.animation = !zombie.Animation.animation;}})// 产生小太阳gameState.plants.forEach(function(plant){// console.log(plant);if(plant.name == "向日葵"){plant.name = "向日葵2";var energyset =  setInterval(function(){if(plant.hp>0){new EnErgy(plant);}else{clearInterval(energyset);}},10000)}})// 销毁小太阳gameState.energys.forEach(function(energy){if(energy.hp){energy.hp = false;var energyYD = setInterval(function(){if(energy.y>10){energy.y--;energy.element.style.top = energy.y+"px";}if(energy.x>140){energy.x--;energy.element.style.left = energy.x+"px";}if(energy.x <= 140 && energy.y <=10){clearInterval(energyYD);gameState.toolbar[0].element.innerText =parseInt(gameState.toolbar[0].element.innerText)+10;game.removeChild(energy.element);gameState.energys.splice(gameState.energys.indexOf(energy), 1);}},10)}})// 如果游戏结束，停止循环if (gameState.isOver == "挑战失败") {var End = document.createElement('div'); // 元素节点End.className = "end";game.appendChild(End);clearInterval(Appset);End.ondblclick = function(){game.removeChild(End);location.reload();}}// 如果游戏通过，停止循环if (gameState.isOver == "挑战成功") {var End = document.createElement('div'); // 元素节点End.className = "vict";End.innerText = gameState.grade;game.appendChild(End);clearInterval(Appset);End.ondblclick = function(){game.removeChild(End);location.reload();}}}, 50);setInterval(function(){gameState.toolbar[0].element.innerText++;}, 1000);game.removeChild(Go);}</script></body></html>

因为这里面有植物和僵尸的图片，所有直接运行代码会报错，我这里分享完整项目资源。
链接：https://pan.baidu.com/s/1iYpYNTFcSzIGUkryjwHNVg
提取码：1034
最后大家如果有什么不懂的可以问我哦。

HTML实现植物大战僵尸（游戏截图+动态演示+源码分享）相关推荐

用python实现植物大战僵尸（游戏截图+动态演示+源码分享）
大家好,我是梦执,对梦执着.希望能和大家共同进步! 下面给大家带来python实现植物大战僵尸的的源码分享,只含有冒险模式. 截图+动态演示+源码分享游戏截图动态演示源码分享 state/too ...
C/C++编程笔记：经典游戏植物大战僵尸游戏辅助，源码送上
从前一直迷恋植物大战僵尸这款游戏,从一开始的水平不行,到后来经常看植物大战僵尸的过关视频来提升自己的游戏水平,到现在游戏是玩的越来越好了,后来为了让游戏通关更快,就写了一个简单的修改阳光和种植植物后免 ...
植物大战僵尸中文版修改器源码
很简单一个辅助,关键是游戏数据的分析,实现了两个功能,无限阳光和无冷却.特别注意的一下,如果用VS2008编译的话,调试的时候是正常的,但编译后功能就会失效,这是因为OpenProcess权限的问题, ...
植物大战僵尸以及超级玛丽源码分享
看到私信有许多小伙伴问我要源码,很抱歉不能及时回复,现在把源码放在这里啦.有需要自取植物大战僵尸演示地址:用python实现植物大战僵尸(游戏截图+动态演示+源码分享) 链接:点击获取源码提取 ...
steam动态令牌源码(python版本)
steam动态令牌源码分享(python版本) 由于去年做了一个小项目,需要自动化的程序,所以研究起来steam的东西,steam游戏大家都不陌生,当你绑定手机之后,手机会有一个steam动态令牌,动 ...
【kafka】Kafka中的动态配置源码分析
1.概述 2.源码分析 Broker启动加载动态配置 KafkaServer.startup 启动加载动态配置总流程 2.1 动态配置初始化 config.dynamicConfig.initiali ...
简约动态时钟h5源码分享-可做桌面动态壁纸
简约动态时钟h5源码分享-可做桌面动态壁纸
表白代码抖音很火的卡通H5动态表白源码HTML+CSS，七夕情人节代码，520代码
作品介绍查看更多关于抖音的文章很火的卡通H5动态表白源码,搭起来发给你心爱的人向她表白吧纯html的源码,上传就可以打开使用啦! 用代码编辑器或记事本打开可修改你要表白的内容.名字等效果图 ...
java毕业设计物流信息管理系统录像演示源码+lw文档+mybatis+系统+mysql数据库+调试
java毕业设计物流信息管理系统录像演示源码+lw文档+mybatis+系统+mysql数据库+调试 java毕业设计物流信息管理系统录像演示源码+lw文档+mybatis+系统+mysql数据库+调 ...

HTML实现植物大战僵尸（游戏截图+动态演示+源码分享）