使用js实现植物大战僵尸的一些基本功能

js原生，仅实现了部分游戏基本功能。植物有向日葵，豌豆射手，坚果，土豆雷。僵尸只有普通僵尸。是在学习前端的过程写的，有小bug存在, js部分注释较全，欢迎大家批评指正。

游戏截图：编辑

html:

css:

js:

下载:

游戏截图：

html:

<!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>pvz</title><link rel="stylesheet" href="pvz.css">
</head><body><div class="game"><div class="start"><span>开始摇滚吧</span></div><div class="end"></div><div class="card_slot"><div class="zanwei"><span class="sun_sum">100</span><button class="test_sun">9999阳光</button></div><img src="data:images/向日葵卡片.png" alt="向日葵"><img src="data:images/豌豆卡片.png" alt="豌豆射手"><img src="data:images/坚果卡片.png" alt="坚果墙"><img src="data:images/土豆雷卡片.gif" alt="土豆雷"><div class="shovel"><img src="data:images/铲子.png" alt="铲子"></div></div><div class="game_site"><div><div class="route"><button class="makeZombie">僵尸</button></div><div class="route"><button class="makeZombie">僵尸</button></div><div class="route"><button class="makeZombie">僵尸</button></div><div class="route"><button class="makeZombie">僵尸</button></div><div class="route"><button class="makeZombie">僵尸</button></div><div class="process"><span></span></div></div><table><tbody class="grid"></tbody></table></div><input class="test" type="text" placeholder="作弊码"><button class="kill_zombie">僵尸全灭</button></div><div><audio id="background_music" loop="loop"><source src="audio/游戏背景音乐.wav" type="audio/ogg"></audio><audio id="plant_music"><source src="audio/种植声.wav" type="audio/mpeg"></audio><audio id="hit_music"><source src="audio/击中声.wav" type="audio/mpeg"></audio><audio id="collect_music"><source src="audio/收集.ogg" type="audio/ogg"></audio><audio id="blast_music"><source src="audio/爆炸.ogg" type="audio/ogg"></audio><audio id="zombiecoming_music"><source src="audio/僵尸出现.ogg" type="audio/ogg"></audio><audio id="lose_music"><source src="audio/失败.ogg" type="audio/ogg"></audio><audio id="win_music"><source src="audio/胜利.ogg" type="audio/ogg"></audio></div></body>
<script src="pvz.js"></script></html>

css:

* {margin: 0;padding: 0;
}body {background: url(images/body背景.png) no-repeat;background-size: contain;
}.game {position: relative;width: 960px;margin: 50px auto 0;/* background-color: pink; */
}.start,
.end {position: absolute;z-index: 1;
}.start {width: 300px;height: 200px;background: url(images/开始.png) no-repeat;background-size: contain;
}.end {background: url(images/失败.png) no-repeat;background-size: contain;
}.start span {padding-left: 100px;font-weight: 700;font-size: 30px;
}.card_slot {width: 100%;height: 120px;margin: 0 0 20px;background: url(images/植物商店.png) no-repeat;background-position-x: -80px;background-size: contain;/* background-color: skyblue; */
}.card_slot>div {display: inline-block;width: 100px;height: 100%;
}.sun_sum {display: inline-block;width: 75px;height: 30px;margin-left: 11px;text-align: center;font-size: 25px;
}.card_slot img {height: 85%;margin-top: 10px;
}.card_slot .shovel {float: right;width: 100px;height: 45px;margin-top: 30px;
}.game_site {position: relative;width: 100%;height: 720px;background: url(images/游戏背景.png) no-repeat;background-size: contain;
}.grid {position: absolute;top: 90px;left: 50px;
}.grid td {position: relative;width: 85px;height: 120px;/* background-color: pink; */
}.grid td image {width: 100%;
}.grid .sunlight {position: absolute;top: -10px;left: -10px;
}.grid .line_shot {position: absolute;top: 24px;left: 56px;width: 35%;z-index: 1;
}/* z-index层叠顺序 */
/* ·具有负值的stacking contexts元素，按照出现的先后顺序排列（越靠后层级越靠上）
·没有被定位，没有浮动的块级元素，按照出现的先后顺序排列
·没有被定位，浮动的元素，按照出现的先后顺序排列
·内联元素，按照出现的先后顺序排列排列
·被定位的元素，按照出现的先后顺序排列 */.route {position: absolute;width: 100%;
}.route div {position: absolute;bottom: 0;right: 100px;width: 200px;
}.route img {width: 100%;
}.process {position: absolute;top: -23px;right: 0;width: 120px;height: 20px;border: 3px solid gray;border-radius: 10px;
}.process span {display: block;width: 0;height: 100%;background-color: chartreuse;
}/*测试，作弊用*/
.test {position: absolute;top: 0;right: -200px;width: 150px;height: 30px;font-size: 25px;outline: none;border: none;
}.makeZombie {display: none;position: absolute;bottom: 0;right: -50px;width: 50px;height: 20px;
}.test_sun {float: left;display: none;
}.kill_zombie {display: none;position: absolute;top: 50px;right: -100px;width: 100px;
}

js:

"use strict";var t = window.devicePixelRatio   // 获取下载的缩放 125% -> 1.25    150% -> 1.5
document.body.style.zoom = 1 / t;   // 就去修改页面的缩放比例var start = document.querySelector(".start");//开始图片的位置
start.style.top = (start.parentNode.offsetHeight - start.offsetHeight) / 2 + "px";
start.style.left = (start.parentNode.offsetWidth - start.offsetWidth) / 2 + "px";var background_music = document.querySelector("#background_music");//游戏背景音乐
var plant_music = document.querySelector("#plant_music");//种植声
var hit_music = document.querySelector("#hit_music");//击中声
var collect_music = document.querySelector("#collect_music");//收集声
var blast_music = document.querySelector("#blast_music");//爆炸声
var zombiecoming_music = document.querySelector("#zombiecoming_music");//僵尸出现声
var lose_music = document.querySelector("#lose_music");//失败声
var win_music = document.querySelector("#win_music");//胜利声var game_site = document.querySelector(".game_site");//游戏场地
var grid = document.querySelector(".grid");//格子容器
var routes = document.querySelectorAll(".route");//路线
//布置网格
for (var i = 0; i < 5; i++) {//布置网格var tr = "<tr></tr>";grid.insertAdjacentHTML("beforeend", tr);for (var j = 0; j < 9; j++) {var td = "<td></td>";grid.childNodes[i].insertAdjacentHTML("beforeend", td);}grid.childNodes[i].index = i;//布置路线routes[i].style.top = 70 + 120 * (i + 1) + "px";
}
var trs = document.querySelectorAll("tr");//所有行
var tds = document.querySelectorAll("td");//所有格子var cards = document.querySelectorAll(".card_slot>img");//植物卡片
var sun_sum = document.querySelector(".sun_sum");//阳光总数var num = 0;//僵尸数量
var zombies = document.querySelectorAll(".zombie");//所有僵尸var end = document.querySelector(".end");//存放结束动画start.onclick = function () {start.style.display = "none";start.onclick = null;background_music.play();//播放音乐for (var i = 0; i < cards.length; i++) {//判断点击的卡片cards[i].index = i;cards[i].onclick = function () {follow_mouse(plants[this.index].img);//鼠标移动grow_plant(plants[this.index]);};}var shovel = document.querySelector(".shovel");//铲子var shovelimg = '<img src="data:images/铲子.png">';//铲子图片//铲除植物shovel.onclick = function () {follow_mouse(shovelimg);//跟随鼠标移动for (var i = 0; i < tds.length; i++) {tds[i].onclick = function () {if (this.innerHTML !== "") {clearInterval(this.timer);//移除格子定时器this.childNodes[0].remove();//铲除植物}}}}var process = document.querySelector(".process span");//僵尸进度条setTimeout(make_zombie_time, 10000 - num * 450);//函数不需要加括号function make_zombie_time () {//生成僵尸var x = parseInt(Math.random() * 5);make_zombie(x);num += 1;process.style.width = num * 4 + "px";//僵尸进度条宽度改变//JavaScript引擎是单线程运行的,浏览器无论在什么时候都只且只有一个线程在运行JavaScript程序. //setInterval会一直执行；导致间隔时间并不能被刷新。所以需要反复的清除再运行，由于每次只运行一次，使用setTimeout替代。var yy = setTimeout(make_zombie_time, 10050 - num * 300);if (num == 30) {clearTimeout(yy);}}
}var follow_element;//跟随鼠标移动的元素
function follow_mouse (image) {//跟随鼠标移动if (follow_element !== undefined) {//如果已经有图片跟随follow_element.remove();//清除上一次的图片}game_site.insertAdjacentHTML("afterbegin", image);//生成图片follow_element = game_site.querySelector(".game_site>img");//获取图片follow_element.style.position = "absolute";//图片绝对定位game_site.onmousemove = function (e) {//跟随鼠标移动follow_element.style.left = e.clientX - follow_element.parentNode.parentNode.offsetLeft + 120 + 'px';follow_element.style.top = e.clientY - follow_element.parentNode.parentNode.offsetTop - 80 + 'px';}
}//oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单。
document.oncontextmenu = function (e) {//鼠标右键点击//点击右键后要执行的代码for (var i = 0; i < tds.length; i++) {//不能再种植物tds[i].onclick = null;}if (follow_element !== undefined) {//不再跟随game_site.onmousemove = null;follow_element.remove();}return false;//阻止浏览器的默认弹窗行为(阻止右键点击出现菜单（复制、粘贴等功能栏）)
}
//新生成元素的点击
grid.onclick = function (e) {var ev = ev || window.event;//事件源：Event对象提供了一个属性叫target，可以返回事件的目标节点，标准浏览器用ev.target，IE浏览器用event.srcElement，var target = ev.target || ev.srcElement;//target只是获得了当前节点位置，但不知道具体节点名称，所以使用nodeName来获取标签名，//这里获得但标签名是大写INPUT除来获取标签名，这里也可以获取当前点击标签但其他属性，例如：ev.target.id, ev.target.value, ev.target.type.if (target.className.toLocaleLowerCase() == 'sunlight') {//收集阳光collect_music.play();animation_slide(target, -68 - target.parentNode.offsetLeft, -250 - target.parentNode.offsetTop);sun_sum.innerHTML = parseInt(sun_sum.innerHTML) + 25;}
}//植物 构造函数（对象）
function Plant (img, price, life, type, objone, objtwo, objthree) {this.img = img;//植物本身图片this.price = price;//植物价格this.life = life;//植物生命值this.type = type;//植物类型this.objone = objone;//不同类型传进的不同参数this.objtwo = objtwo;this.objthree = objthree;//植物能制造的图片  或被攻击的图片 或植物生长后的图片 植物爆炸图片
}
//向日葵
var sunflower = new Plant('<img src="data:images/向日葵.gif" class="plant">', 50, 100, "resource", '<img src="data:images/阳光.gif" class="sunlight">');
//豌豆射手
var peashoter = new Plant('<img src="data:images/豌豆射手.gif" class="plant">', 100, 100, "line_attack", '<img src="data:images/豌豆子弹.png" class="line_shot">');
//坚果墙
var nutwall = new Plant('<img src="data:images/坚果.gif" class="plant">', 50, 1000, "defense", '<img src="data:images/坚果被攻击.gif"  class="plant">');
//土豆雷
var potato_thunder = new Plant('<img src="data:images/土豆雷生长.gif" class="plant">', 25, 50, "grow_blast", 5000, '<img src="data:images/土豆雷.gif">', '<img src="data:images/土豆雷爆炸.gif" style="width:75px">');
var plants = [sunflower, peashoter, nutwall, potato_thunder];
//种植植物
function grow_plant (obj) {//参数:要种下的植物for (var i = 0; i < tds.length; i++) {//判断点击的格子tds[i].onclick = function () {if (sun_sum.innerHTML >= obj.price) {//判断阳光是否足够if (this.innerHTML === "") {//判断格子是否可以种植plant_music.play();//种植音播放this.insertAdjacentHTML("beforeend", obj.img);//种下植物的性质this.childNodes[0].life = obj.life;//判断植物类型，给予对应行为type_action(this, obj);sun_sum.innerHTML = parseInt(sun_sum.innerHTML) - obj.price;//消耗阳光}} else {//阳光不够，sun_sum.style.color = "red";setTimeout(function () {sun_sum.style.color = "";}, 200)}}}
}
//判断植物类型，给予对应行为
function type_action (td, obj) {//参数:要种植的格子，需要的植物对象if (obj.type == "resource") {make_resource(td, obj.objone);} else if (obj.type == "line_attack") {make_line_shot(td, obj.objone, td.parentNode.index);} else if (obj.type == "defense") {defence(td, obj.life, obj.objone);} else if (obj.type == "grow_blast") {grow(td, obj.img, obj.objone, obj.objtwo)setTimeout(function () {if (td.innerHTML == obj.objtwo) {blast(td, obj.objthree);}}, obj.objone * 1.1)}
}
//资源型植物行为
function make_resource (td, img) {//参数:所在的格子，所生产资源的图片td.timer = setInterval(function () {td.insertAdjacentHTML("beforeend", img);//生成图片if (td.childNodes.length > 1) {//如果生成了资源setTimeout(function () {//5秒之后不点击，资源消失if (td.childNodes.length > 1) {td.childNodes[1].remove();}}, 5000)}}, 8000)
}
//直线攻击型植物行为
function make_line_shot (td, img, index) {//参数:所在的格子，所生产资源的图片，所在的行数td.timer = setInterval(function () {routes[index].zombies = routes[index].querySelectorAll(".zombie");//所在行的僵尸数量for (var i = 0; i < routes[index].zombies.length; i++) {// routes[index].zombies[i]行上的一个僵尸if (routes[index].zombies[i].offsetLeft - td.offsetLeft > -20) {//判断是否有僵尸在植物右边td.insertAdjacentHTML("beforeend", img);//生成子弹var bullet = td.childNodes[td.childNodes.length - 1];//获取新生成的子弹line_bullets(bullet, index);//子弹行为break;//跳出循环，防止重复生成子弹}}}, 1000)
}
//防御型植物行为
function defence (td, life, img) {//参数:所在的格子，植物原本血量，植物被攻击图片td.timer = setInterval(function () {//td.childNodes[0].life:植物现在血量if (td.childNodes[0].life < life / 3) {//血量低到一定程度var life_temp = td.childNodes[0].life;//暂存植物现在血量td.innerHTML = img;//更换图片td.childNodes[0].life = life_temp;//给予图片植物现在血量}}, 1000)
}
//生长型植物行为
function grow (td, img_child, time, img_adult) {//参数:所在的格子，植物生长前的图片，植物生长所需时间，植物生长后的图片setTimeout(function () {if (td.innerHTML == img_child) {td.innerHTML = img_adult;//一定时间后，替换图片}}, time)
}
//爆炸型植物行为
function blast (td, img) {//参数:所在的格子，植物生长所需时间，植物爆炸后图片var index = td.parentNode.index;//植物所在行td.timer = setInterval(function () {routes[index].zombies = routes[index].querySelectorAll(".zombie");//所在行的僵尸数量for (var i = 0; i < routes[index].zombies.length; i++) {var x = td.offsetLeft - routes[index].zombies[i].offsetLeft;//植物与僵尸距离if (x > 0 && x < 100) {blast_music.play();td.innerHTML = img;//替换图片setTimeout(function () {clearInterval(td.timer);//移除格子定时器td.childNodes[0].remove();//移除植物}, 500)//0.5秒内有僵尸靠近，仍然造成伤害,时间要小于土豆.timer,对同一个僵尸造成多次伤害routes[index].zombies[i].life -= 150;//僵尸血量减少zombie_life(routes[index].zombies[i]);//判断僵尸血量}}}, 600)
}
//判断植物血量
function plant_life (plant, zombie) {if (plant.life == 0) {clearInterval(plant.parentNode.timer);//清除所在格的定时器，不再具有对应行为plant.remove();//移除植物zombie_life(zombie);zombie.style.right = zombie.style.right;//使僵尸能够移动}
}
//直线型子弹的行为
function line_bullets (bullet, index) {//参数:子弹，子弹所在的行bullet.style.left = 56 + "px";//子弹初始位置bullet.timer = setInterval(function () {//给子弹本身一个定时器bullet.style.left = parseInt(bullet.style.left) + 3 + "px";//子弹移动if (bullet.offsetLeft + bullet.parentNode.offsetLeft > 900) {//子弹超出边界bullet.remove();} else {//判断击中hit(bullet, index);}}, 10)
}
//判定子弹击中
function hit (bullet, index) {//参数:子弹，子弹所在的行routes[index].zombies = routes[index].querySelectorAll(".zombie");//所在行的僵尸数量for (var i = 0; i < routes[index].zombies.length; i++) {var x = routes[index].zombies[i].offsetLeft - bullet.offsetLeft - bullet.parentNode.offsetLeft;//子弹与僵尸距离if (x < -20 && x > -100) {hit_music.play();clearInterval(bullet.timer);//清除子弹的定时器bullet.src = 'images/豌豆子弹击中.gif';setTimeout(function () {bullet.remove();//移除子弹}, 200)routes[index].zombies[i].life -= 10;//僵尸血量减少zombie_life(routes[index].zombies[i]);//判断僵尸血量break;}}
}//僵尸 构造函数（对象）
function Zombie (img, life) {this.img = img;//僵尸图片this.life = life;//僵尸血量
}
//普通僵尸
var ordinary_zombie = new Zombie('<img src="data:images/普通僵尸.gif">', 100);function make_zombie (index) {//制造僵尸var div = '<div class="zombie">' + ordinary_zombie.img + '</div>';//僵尸容器，方便更换图片routes[index].insertAdjacentHTML("beforeend", div)//生成僵尸var zbe = routes[index].childNodes[routes[index].childNodes.length - 1];//新生成的僵尸//根据僵尸数量变更血量,类型(之后改为函数)if (num > 10) {zbe.life = ordinary_zombie.life * 1.5;} else if (num > 20) {zbe.life = ordinary_zombie.life * 3.5;} else if (num > 25) {zbe.life = ordinary_zombie.life * 5.5;} else {zbe.life = ordinary_zombie.life;}if (num == 10 || num == 20) {background_music.pause();zombiecoming_music.play();//僵尸来了音乐setTimeout(function () {background_music.play();}, 3000)}zbe.style.right = 100 + "px";//初始位置zbe.timer = setInterval(function () {//给僵尸本身一个定时器zbe.style.right = parseInt(zbe.style.right) + 2 + "px";//僵尸移动if (parseInt(zbe.style.right) > 900) {//僵尸到达左边界background_music.pause();lose_music.play();end.style.backgroundImage = "url(images/失败.png)";animation_size(end, 900, 700);} else {eat(zbe, index);//判断僵尸是否吃植物}}, 100)
}
//判断僵尸血量，替换图片
function zombie_life (zombie) {if (zombie.life <= 0) {zombie.innerHTML = '<img src="data:images/僵尸被打死.gif">';clearInterval(zombie.timer);//清除僵尸定时器，不再移动zombie.className = "";setTimeout(function () {zombie.remove();//移除僵尸}, 3000)win();} else if (zombie.life <= 30) {zombie.innerHTML = '<img src="data:images/僵尸被打中.gif">';} else if (zombie.life <= 100) {zombie.innerHTML = '<img src="data:images/普通僵尸.gif">';}
}
//僵尸吃植物
function eat (zombie, index) {//参数:僵尸，僵尸所在的行trs[index].plants = trs[index].querySelectorAll(".plant");//行上的所有植物for (var i = 0; i < trs[index].plants.length; i++) {var x = trs[index].plants[i].parentNode.offsetLeft - zombie.offsetLeft;//植物与僵尸距离if (x > 15 && x < 100) {if (zombie.life > 30) {//根据僵尸血量，替换不同的图片zombie.innerHTML = '<img src="data:images/僵尸吃东西.gif">';}zombie.style.right = parseInt(zombie.style.right) - 2 + "px";//僵尸吃东西时不再移动trs[index].plants[i].life -= 2.5;//植物血量减少plant_life(trs[index].plants[i], zombie);//判断植物血量break;}}
}function win () {//胜利zombies = document.querySelectorAll(".zombie");if (num == 30 && zombies.length == 0) {//僵尸到达一定数量且全部倒下setTimeout(function () {background_music.pause();win_music.play();end.style.backgroundImage = "url(images/胜利.png)";animation_size(end, 900, 700);}, 1000)}
}
//清除所有定时器
function cleartime () {var alltimer = setTimeout(function () { });for (var i = 0; i <= alltimer; i++) {clearInterval(i);}
}//动画效果
function animation_slide (obj, targetX, targetY) {//参数:改变位置的元素，X方向目标值，Y方向目标值var slide_timer = setInterval(function () {obj.style.left = obj.offsetLeft + (targetX - obj.offsetLeft) / 50 + "px";//x方向移动obj.style.top = obj.offsetTop + (targetY - obj.offsetTop) / 50 + "px";//y方向移动if ((targetX - obj.offsetLeft) < 50 && (targetX - obj.offsetLeft) > -50 && (targetY - obj.offsetTop) < 50 && (targetY - obj.offsetTop) > -50) {clearInterval(slide_timer);//清除定时器obj.remove();//移除图片，也可以使用callback?}}, 5)
}
function animation_size (obj, target_width, target_height) {var size_timer = setInterval(function () {obj.style.top = (obj.parentNode.offsetHeight - obj.offsetHeight) / 2 + "px";//元素中心不变obj.style.left = (obj.parentNode.offsetWidth - obj.offsetWidth) / 2 + "px";obj.style.width = obj.offsetWidth + (target_width - obj.offsetWidth) / 50 + "px";//宽变化obj.style.height = obj.offsetHeight + (target_height - obj.offsetHeight) / 50 + "px";//高变化if ((target_width - obj.offsetWidth) < 50 && (target_width - obj.offsetWidth) > -50 && (target_height - obj.offsetHeight) < 50 && (target_height - obj.offsetHeight) > -50) {clearInterval(size_timer);//清除定时器cleartime();//清除所有定时器setTimeout(function () {obj.remove();}, 3000)}}, 5)
}var test = document.querySelector(".test");//输入框 测试、作弊用
var makeZombies = document.querySelectorAll(".makeZombie");//按钮，生成僵尸
var text_sun = document.querySelector(".test_sun");//按钮，9999阳光
var kill_zombie = document.querySelector(".kill_zombie")//按钮，僵尸全灭document.addEventListener("keypress", function (e) {if (e.which == 13) {if (test.value == "1") {for (var i = 0; i < makeZombies.length; i++) {makeZombies[i].style.display = "block";makeZombies[i].index = i;makeZombies[i].onclick = function () {make_zombie(this.index)};}text_sun.style.display = "block";text_sun.onclick = function () {sun_sum.innerHTML = "9999";}kill_zombie.style.display = "block";kill_zombie.onclick = function () {var zombies = document.querySelectorAll(".zombie");//所有僵尸for (var i = 0; i < zombies.length; i++) {clearInterval(zombies[i].timer);zombies[i].remove();win();}}}}
})

下载:

https://pan.baidu.com/s/1d4m250z-9mhWQtnP7EH5Sg

提取码：pvzf

使用js实现植物大战僵尸的一些基本功能相关推荐

JS实现植物大战僵尸小游戏，代码记录及效果展示
前几天看到了一个很有趣的demo,用js制作植物大战僵尸小游戏,本着学习的心态,对照着做了一下,发现这里面的一些代码设计的确很精妙,这里分享下源码和效果,如果有需要,可以看下. 效果如下: 下载地址
java swing 植物大战僵尸精品游戏432 功能完善完整代码下载即可以运行
上一期分享了一个比较复杂的植物大战僵尸游戏后,今天为大家继续分享一个非常优秀的对植物大战僵尸游戏432,该游戏编写的漂亮.整个系统是学习的优秀demo,整个项目提供完整的项目源码,希望大家可以喜欢.喜 ...
使用Python对植物大战僵尸学习研究
根据上一篇使用使用Python学习win32库进行内存读写中,使用Python win32库,对一款游戏进行了读内存操作. 今天来写一下对内存进行写的操作正文要进行32位的读写,首先了解一下 ...
js HTML5 网页版植物大战僵尸游戏
js HTML5 网页版植物大战僵尸游戏源于:http://www.huiyi8.com/moban/ 植物大战僵尸Javascript版 HTML5模版 body{-moz-user-select ...
植物大战僵尸资源文件提取总结
PvZ资源文件提取总结参考植物大战僵尸资源文件(main.pak):格式/提取/工具下载[转贴] 植物大战僵尸pak资源文件分析植物大战僵尸资源提取 C/C++中判断某一文件或目录是否存在 P ...
使用javascript实现植物大战僵尸部分功能
实现了植物的种植,随机僵尸的在随机道路上出现,射手们的攻击,土豆雷的生长等,但还有很多bug. 放上代码(判断是用多个定时器写的,比较辣鸡) <!DOCTYPE html> <htm ...
VUE+WebPack:开发一款太空版植物大战僵尸的前端页游
从本节开始,我们探讨如何使用VUE和WebPack开发一款类似于植物大战僵尸的前端游戏,当游戏完成后,情况如下: 更详细的讲解和代码调试演示过程,请点击链接游戏的设定如下,一系列外星飞船从天而降入侵 ...
Java项目:植物大战僵尸(java+swing)
源码获取:博客首页 "资源" 里下载! 功能简介: 植物大战僵尸.冒险模式.生存模式.解谜模式小车服务类: public class CarThread extends Thre ...
Python开发植物大战僵尸游戏（附github项目地址）
今天给大家分享一个仿<植物大战僵尸>的小游戏开发案例. 开发思路引入需要的模块,配置图片路径,设置界面宽高背景颜色,创建游戏主入口. #1引入需要的模块 import pygame im ...

使用js实现植物大战僵尸的一些基本功能

游戏截图：

html:

css:

js:

下载:

使用js实现植物大战僵尸的一些基本功能相关推荐

最新文章

热门文章