HTML网页真人在线投注极速赛车官网网植物大战僵尸源码分享
植物大战僵尸优化版，停止循环 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); } 植物选择栏：可以选择自己要种植的植物。 网页版植物大战僵尸游戏源码代码， 演示地址http://www.bokequ.com/show/youxi/2/src/
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.price=object.price;// 价格 this.uisrc1 = "url("+object.uisrc1+")";// UI图标路径 this.uisrc2 = "url("+object.uisrc2+")"; this.occupy = false;//是否选中 this.element = document.createElement('div'); // 元素节点 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.object = object; this.Animation = { src:object.datasrc, url:object.url, count:object.count, num:0, animation:false } this.set = "set"+this.x+this.y this.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); // 添加到子弹列表 } // 初始化选择框UI var 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.object; 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 = true new 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){ 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) } }) // 如果游戏结束，挖掉植物。
-铲子：可以删除玩家种植的植物。
-击败僵尸数：展示玩家击败的僵尸数量，html植物大战僵尸小游戏，HTML
-游戏时间：展示当前游戏运行的时间。
顶部为UI栏：
-能量值：游戏开始后，每秒能量值+1 ，
- 最近发表
- 随机阅读
-
- Helen响应式wordpress博客主题,个人博客网站模板/html模板
- wordpress禁止加载图片属性srcset和sizes
- wordpress简约清新范博客主题Pinghsu
- CSS盒模型display行内块元素/float浮动
- 织梦dede:arclist标签使用说明
- 百度搜索引擎搜索查询的表现形式
- 天猫精灵：跨设备连接领跑行业，品类覆盖引领消费新潮
- 利用excel分析IIS服务器日志
- DedeCMS个人网站常见漏洞有哪些
- wordpress博客头部wp
- HTML网页植物大战僵尸源码分享
- 搜索引擎的工作原理(三)
- 荣耀手表Fit即将揭秘健康能量评估功能，萌宠表盘引爆5月28日，科技与时尚碰撞，你准备好了吗？
- 小米新款智能净烟机S20上市：告别油烟困扰，还能实时监测空气质量
- 帝国CMS列表页分页标题设置页码
- WordPress建站安装时“此站点遇到了致命错误”
- wordpress博客头部wp
- 织梦dede:arclist标签使用说明
- 李炎恢老师HTML5第一季视频教程下载
- OpenAI与Jony Ive联手打造AI硬件：未来科技饰品，明年亮相？
- 搜索
-
- 友情链接
-