植物大战僵尸htm5源码_植物大战僵尸html源码资源-CSDN文库

共364个文件

png：148个

gif：135个

bmp：36个

植物大战僵尸

html5

javasrcipt

需积分: 5 26 浏览量 2023-01-28 16:27:34 上传评论 2 收藏 7.88MB ZIP 举报

《植物大战僵尸HTML5源码解析》 "植物大战僵尸"是一款广受欢迎的塔防类游戏，而HTML5版本的源码则展示了如何利用Web技术实现这样一款游戏。本篇文章将深入探讨HTML5、JavaScript以及相关技术在实现这个游戏中的应用。一、HTML5基础 HTML5是超文本标记语言的最新版本，它极大地增强了网页的交互性和多媒体支持。在"植物大战僵尸"中，HTML5主要负责页面结构和内容的展示，如游戏界面的布局、元素的定位和交互元素的标记。二、JavaScript核心 JavaScript是实现游戏逻辑的关键，"植物大战僵尸"的全部功能都由JavaScript编写。游戏中的动画效果、用户输入响应、僵尸的移动和攻击逻辑、植物的种植与升级、分数计算等都是通过JavaScript代码控制的。 1. 游戏对象与数据结构：JavaScript对象用于表示游戏中的各种元素，如植物、僵尸、阳光等，其属性和方法定义了这些元素的行为和状态。 2. 事件处理：通过监听用户的点击事件，实现种植植物、购买道具等功能。同时，JavaScript还处理游戏时间的更新，触发僵尸的行动和游戏进程。 3. 动画框架：JavaScript可以创建自定义的动画框架，通过改变元素的位置、透明度等属性，实现游戏中的动态效果。三、Canvas绘图 HTML5的Canvas元素提供了动态图形绘制的能力，"植物大战僵尸"中的所有视觉元素，如背景、植物、僵尸，都是通过Canvas API进行绘制的。开发者可以控制每一帧的画布内容，实现流畅的动画效果。 1. 绘制函数：Canvas API提供了大量的绘图方法，如`fillRect`、`drawImage`等，用于绘制游戏场景。 2. 动画更新：通过定时器（如`requestAnimationFrame`）定期调用重绘函数，实现连续的动画帧。 3. 僵尸和植物的碰撞检测：通过Canvas的路径和区域比较，实现僵尸与植物之间的碰撞检测，触发相应的游戏逻辑。四、游戏状态管理为了维护游戏的状态，如当前的分数、玩家拥有的资源、游戏进度等，需要一个有效的方法来存储和更新这些信息。JavaScript中的对象和数组可以很好地胜任这个角色，它们动态地记录着游戏的每一步变化。五、优化与性能由于JavaScript在浏览器环境中执行，性能优化显得尤为重要。"植物大战僵尸"可能需要处理大量的游戏逻辑和动画，因此可能需要以下优化策略： 1. 函数复用：避免重复创建函数，使用闭包或立即执行函数表达式（IIFE）来减少内存消耗。 2. 数据结构优化：选择合适的数据结构（如数组、对象、Map等）来提高查找和操作效率。 3. 渲染优化：仅在必要时重绘Canvas，减少不必要的渲染操作。总结来说，"植物大战僵尸"HTML5源码是一个集HTML5结构、JavaScript逻辑和Canvas绘图于一体的典型示例，它展示了Web技术在游戏开发领域的强大能力。通过深入研究这段源码，开发者可以学习到如何构建复杂的游戏机制、优化性能以及实现丰富的用户体验。

资源推荐

资源详情

资源评论

收起资源包目录

植物大战僵尸htm5源码（364个子文件）

CoffeeBean.bmp 18KB

Chomper.bmp 18KB

SplitPea.bmp 18KB

PotatoMine.bmp 18KB

Threepeater.bmp 18KB

Garlic.bmp 18KB

Repeater.bmp 18KB

TallNut.bmp 18KB

Peashooter.bmp 18KB

SunFlower.bmp 18KB

FumeShroom.bmp 18KB

Cactus.bmp 18KB

TwinSunflower.bmp 18KB

WallNut.bmp 18KB

PuffShroom.bmp 18KB

Plantern.bmp 18KB

SunShroom.bmp 18KB

DoomShroom.bmp 18KB

SnowPea.bmp 18KB

GatlingPea.bmp 18KB

SeaShroom.bmp 18KB

Torchwood.bmp 18KB

Starfruit.bmp 18KB

ScaredyShroom.bmp 18KB

Blover.bmp 18KB

PumpkinHead.bmp 18KB

IceShroom.bmp 18KB

Jalapeno.bmp 18KB

Spikerock.bmp 18KB

FlowerPot.bmp 18KB

GloomShroom.bmp 18KB

CherryBomb.bmp 18KB

Squash.bmp 18KB

Spikeweed.bmp 18KB

HypnoShroom.bmp 18KB

LilyPad.bmp 18KB

Thumbs.db 8KB

Thumbs.db 7KB

LostHeadWalk1.gif 140KB

PoleVaultingZombieWalk.gif 104KB

HeadWalk1.gif 94KB

Zombie2.gif 78KB

ConeheadZombie.gif 72KB

PoleVaultingZombieLostHeadWalk.gif 71KB

Zombie.gif 65KB

FlagZombie.gif 63KB

HeadWalk0.gif 61KB

PoleVaultingZombieAttack.gif 61KB

ZombieAttack.gif 58KB

Zombie3.gif 56KB

FlagZombieLostHead.gif 55KB

Blover.gif 54KB

JalapenoAttack.gif 53KB

PoleVaultingZombie.gif 52KB

LostNewspaper.gif 51KB

FlagZombieLostHeadAttack.gif 50KB

BucketheadZombie.gif 50KB

Plantern.gif 50KB

FlagZombieAttack.gif 48KB

PoleVaultingZombieLostHeadAttack.gif 45KB

BucketheadZombieAttack.gif 45KB

PoleVaultingZombieJump.gif 44KB

FumeShroom.gif 43KB

TallNut.gif 42KB

LostHeadWalk0.gif 42KB

DoomShroom.gif 41KB

ZombieLostHead.gif 41KB

GloomShroomSleep.gif 41KB

ConeheadZombieAttack.gif 40KB

SunFlower.gif 40KB

TallnutCracked1.gif 39KB

TallnutCracked2.gif 38KB

Sun.gif 38KB

HeadAttack1.gif 38KB

FumeShroomSleep.gif 37KB

GloomShroom.gif 37KB

Chomper.gif 36KB

Threepeater.gif 35KB

Cactus.gif 34KB

TwinSunflower.gif 34KB

SplitPea.gif 31KB

PumpkinHead.gif 31KB

HeadAttack0.gif 30KB

Squash.gif 30KB

LostHeadAttack1.gif 29KB

HypnoShroom.gif 29KB

IceShroom.gif 28KB

ZombieLostHeadAttack.gif 28KB

Repeater.gif 28KB

PumpkinHead1.gif 27KB

Wallnut_cracked2.gif 27KB

Spikeweed.gif 26KB

PoleVaultingZombieJump2.gif 26KB

SnowPea.gif 25KB

GatlingPea.gif 25KB

GloomShroomBullet.gif 25KB

ChomperAttack.gif 24KB

Die.gif 24KB

PoleVaultingZombieLostHead.gif 23KB

Peashooter.gif 21KB

共 364 条

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="KeyWords" content="lonelystar,植物大战僵尸,网页版,JS植物大战僵尸,PVZ,JSPVZ,JS版,Javascript"> <meta name="Description" content="JavaScript版的植物大战僵尸,偶的网名叫LonelyStar,不叫‘辣妈’"> <title>植物大战僵尸Javascript版</title> <style type="text/css"> body{-moz-user-select:none} td{font-family: 宋体; font-size: 12px} div{left:0} span{cursor:default} span,div,h2,h3{padding:0;margin:0} td.HandBookZombie{background: url(images/interface/Almanac_ZombieWindow2.png) no-repeat; width:20%; height:16%; text-align:center} #DivTeach{ filter:"alpha(opacity=90)"; /* IE 8 */ filter:alpha(opacity=90); /* IE 4-7 */ opacity:.9; /* FireFox,Safari(WebKit),Opera */ -moz-opacity:.9; /* FireFox<3.5 */ position:absolute;width:900px;height:50px;top:530px;left:0;z-index:100;text-align: center; font-family: 幼圆; font-size: 20pt; font-weight: bold; color: #FFFFFF; background-color: #5B432E} .WindowFrame{position:absolute;width:900px;height:600px;OVERFLOW: hidden;border:3px outset ;} #dFlagMeterTitleB{position:absolute;color:#000; font-size: 18pt;font-weight:bold;width:343px;top:15px;left:-5px} #dFlagMeterTitleB span{position:absolute;color:#F93;font-size: 18pt;font-weight: bold;width:343px;top:-1px;left:-1px;} #dSurfaceBack{position:absolute;display:none;top:0;width:900px;height:600px;z-index:255} #dHelp{width:614px;height:399px;background:url(images/Help.png);position:absolute;display:none;left:143px;top:100px} #dSelectLevel{position:absolute;width:100%;height:100%;font-weight:bold;display:none} #dOptionsMenuBack{position:absolute;text-align:center;left:244px;top:60px;width:412px;height:483px;display:none;background:url(images/OptionsMenuback32.png);_background:url(images/OptionsMenuback8.png)} .TitleBigContainer{position:relative;width:220px;margin:120px auto 0 auto;height:240px;overflow:hidden} .TitleSmallContainer{position:relative;width:100%;line-height:35px;color:#FFF;font-size:16px} .SmallLevel{float:left;cursor:pointer;width:50%} .BigLevel{float:left;color:#FC6;font-size:20px;width:100%;height:40px} .OptionsMenuButton,.OptionsMenuButtonDown{background:url(images/OptionsBackButton32.png);_background:url(images/OptionsBackButton8.png);float:left;font-family:黑体;font-size:32px;cursor:pointer;width:360px;height:100px;margin-left:26px;display:inline;color:#FC6} .OptionsMenuButton{background-position:0 0} .OptionsMenuButtonDown{background-position:0 100} .OptionsMenuButtonSpan{height:100px;line-height:100px;cursor:pointer} #dPCard img{left:0;width:70px;height:42px} #dPCard .span1{cursor:pointer;width:70px;height:42px;float:left;margin:8px 0 0 2px;position:relative;} #dPCard .span2{cursor:pointer;text-align:center;position:absolute;left:40px;top:27px;font-family:Fixedsys;font-size:9pt} #dCardList div{position:relative;cursor:pointer;padding:0;height:60px} #dCardList span{cursor:pointer;position:absolute;left:66px;top:40px;width:34px;height:20px;font-family:Fixedsys;font-size:11pt} #dCardList img{position:absolute;width:100px;height:60px} .SelectModal{color: #FC6; font-weight: bold;cursor:pointer;background: url(images/interface/Button.png) no-repeat center;text-align:center;height:43px;width:115px} .Menu{float:left;text-align:center;line-height:41px;font-weight:bold;font-family:黑体;color:#00CB08;height:41px;width:113px;background:url(images/interface/Button.png)} #imgSF{position:absolute;cursor:pointer;z-index:254} #PointerUD{position:absolute;z-index:50} #dTitle{display:none;position:absolute;left:100;background-color:#FFD;width:150px;font-size:12px;text-align:center;line-height:1.5;border:1px solid #000;padding:3px;z-index:254} #dAll img,#dFlagMeter img{position:absolute;border-style:none} #dProcess{text-align:center;border: 1px solid #FFF;background-color:#000;color:#FFF;position:absolute;left:130px;top:50px;width:640px;height:500px;display:none;z-index:250;padding:10px;*padding:10px 5px 10px 2px} #dProcess img{margin:5px 0} #dProcess h2{font-size:16px;margin:0 10px;color:#E80} #dProcess h3{font-size:12px} #dProcess2{overflow:auto;line-height:18px;font-size:12px;text-align:left;width:100%;*width:96%;height:450px} #dLink{position:absolute;left:5px;top:610px;width:500px;height:50px} #dLink div{float:left;margin-right:10px} .Tom1{left:0;top:0;width:86px;height:91px;background:url(images/interface/Tombstones.png) no-repeat} .Tom2{position:absolute;left:0;top:0;width:86px;height:91px;background:url(images/interface/Tombstone_mounds.png) no-repeat} </style> <script src="js/Cfunction.js" type="text/javascript"></script> <script src="js/CPlants.js" type="text/javascript"></script> <script src="js/CZombie.js" type="text/javascript"></script> <script id="JSPVZ" type="text/javascript"></script> <script id="JSProcess" type="text/javascript"></script> </head> <body id="dBody" topmargin="0" leftmargin="0" oncontextmenu="return false" ondragstart="return false" onselectstart="return false" bgcolor="#008080">  <div id="dFlagMeter" style="visibility:hidden;position:absolute;z-index:255;left:50px;top:280px;width:500px;height:40px"> <div id="dFlagMeterTitle" style="position:absolute;text-align:right"><div id="dFlagMeterTitleB"><span id="sFlagMeterTitleF"></span></div></div> <div id="dFlagMeterContent" style="position:absolute;left:344px;width:157px;height:40px"> <img id="imgFlagMeterEmpty" border="0" src="images/interface/FlagMeterEmpty.png" style="top: 17px"> <img id="imgFlagMeterFull" border="0" src="images/interface/FlagMeterFull.png" style="top: 17px;clip:rect(0,auto,auto,157px)"> <img id="imgFlag1" src="images/interface/FlagMeterParts2.png" style="left: 10px; top: 14px;display:none"> <img id="imgFlag2" src="images/interface/FlagMeterParts2.png" style="left: 40px; top: 14px;display:none"> <img id="imgFlag3" src="images/interface/FlagMeterParts2.png" style="left: 70px; top: 14px;display:none"> <img id="imgFlag4" src="images/interface/FlagMeterParts2.png" style="left: 100px; top: 14px;display:none"> <img id="imgGQJC" src="images/interface/FlagMeterLevelProgress.png" style="left: 35px; top: 29px;display:block"> <img id="imgFlagHead" src="images/interface/FlagMeterParts1.png" style="left: 139px; top: 13px"> </div> </div>  <div id="dSurface" class="WindowFrame" style="display:none;z-index:255"> <div id="iSurfaceBackground"> <map name="FPMap0"> <area href="javascript:void(0)" shape="rect" coords="641, 466, 724, 527" onclick="ShowOptions()"> <area href="javascript:void(0)" shape="rect" coords="718, 512, 790, 558" onclick="ShowHelp()"> <area href="javascript:void(0)" shape="rect" coords="800, 495, 879, 548" onclick="SetNone($('dSurface'))"> </map> <img src="images/surface.png" usemap="#FPMap0" border="0"> <div style="position: absolute;background:url('images/SelectorScreenStartAdventur.png');left:474px;top:80px;width:331px;height:146px;cursor:pointer" onmouseover="this.style.backgroundPosition='bottom'" onmouseout="this.style.backgroundPosition='top'" onclick="ShowLevel()"></div> <div style="position: absolute;background:url('images/SelectorScreenSurvival.png');left:474px;top:203px;width:313px;height:131px;cursor:pointer" onmouseover="this.style.backgroundPosition='bottom'" onmouseout="this.style.backgroundPosition='top'" onclick="ShowMiniGame()"></div> </div> <div id="dSurfaceBack"> <div id="dHelp" onclick="HiddenHelp()"></div> <div id="dOptionsMenuback"> <div id="dOptionsMenu" style="line-height:40px;position:absolute;width:100%;height:100%;display:none;font-weight:bold"> <div style="margin-top:150px;height:40px"><input type="checkbox" id="cAutoSun" value="1" onchange="CheckAutoSun(this)"><label for="cAutoSun" id="lAutoSun" style="color:#FFF">自动拾取阳光</label></div> <div class="BigLevel" style="cursor:pointer" onclick="SelectModal(oS.Lvl)">�

评论收藏

内容反馈