當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端小游戏——植物大战僵尸

發布時間：2023/12/20 HTML 39 豆豆

生活随笔收集整理的這篇文章主要介紹了前端小游戏——植物大战僵尸小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

給大家分享一個植物大戰僵尸網頁游戲源代碼，感興趣的小伙伴可收藏學習（完整源碼在文末）

文章目錄

- ??效果展示
- ??游戲介紹
- ??游戲內容
- - （1）冒險模式
  - （2）小游戲
- ??圖片資源
- ??代碼展示
- - （1）HTML源碼
  - （2）部分JS源碼
- ??完整源碼

先來一睹“芳容”

??效果展示

??游戲介紹

《植物大戰僵尸》 是一款極富策略性的小游戲。可怕的僵尸即將入侵，每種僵尸都有不同的特點，例如鐵桶僵尸擁有極強的抗擊打能力，礦工僵尸可以挖地道繞過種植在土壤表面的植物等。玩家防御僵尸的方式就是栽種植物。49種植物每種都有不同的功能，例如櫻桃炸彈可以和周圍一定范圍內的所有僵尸同歸于盡，而食人花可以吃掉最靠近自己的一只僵尸。玩家可以針對不同僵尸的弱點來合理地種植植物，這也是勝利的訣竅。游戲根據玩法不同分為五種游戲模式：冒險模式、迷你模式、解謎模式、生存模式、禪境花園。加之黑夜、屋頂、濃霧以及泳池之類的障礙增加了其挑戰性該游戲近乎永無止境。

《植物大戰僵尸》集成了即時戰略、塔防御戰和卡片收集等要素，玩家控制植物抵御僵尸的進攻，保護這片植物園。游戲中可以選用的植物有40多種，而每個場景最多只能選用10種植物，這就需要玩家根據自己的游戲策略來作出取舍。因為它成功地借鑒了一些戰略游戲的要素——采集資源并利用資源建造其它單位，有些玩家甚至拿星際的戰略往這款游戲中套用，以闡述這款游戲需要在何時發展“經濟”，何時發展“兵力”。

這款游戲要求玩家既有大腦的智慧，又要有小腦的反應。在有了正確的戰略思想之后，還要靠戰術將戰略實現出來。戰術范圍包括很廣，植物的搭配、戰斗時的陣型、植物與僵尸相遇時，是戰是防這都屬于戰術的范疇。正確的戰術是玩家在戰斗中勝利的關鍵，選擇正確的戰術，需要先分析情況，再做出決定。那么提高戰術水平也是要提高分析情況的能力。

??游戲內容

（1）冒險模式

冒險模式也就是闖關模式，共有兩大關卡，第一大關卡是白天模式，一共有十個小關卡。第二大關是夜晚模式，只有兩個小關。

（2）小游戲

小游戲更加豐富多樣，本人體驗效果非常不錯（不信你來試試）

開掛式僵尸讓你體會不一樣的樂趣（5000個僵尸，本人撐了不到一個回合，神仙來了估計也呼不住😜）

更多小游戲請自行體驗

??圖片資源

下面是一些用到的部分圖片（各紅各樣的植物以及一些場地道具）

??代碼展示

完整源碼可點此下載：https://download.csdn.net/download/CSDN_anhl/86424202?spm=1001.2014.3001.5503

（1）HTML源碼

進度條

選項界面

<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)">重新開始</div><div class="BigLevel" style="cursor:pointer" onClick="HiddenOptions();SelectModal(0);SetBlock($('dSurface'),$('iSurfaceBackground'))">返回菜單</div><div class="OptionsMenuButton" style="margin-top:108px" onMouseDown="OptionsMenuDown(this,$('sOptionsMenu'))" onMouseUp="OptionsMenuUP(this,$('sOptionsMenu'));HiddenOptions()"><span id="sOptionsMenu" class="OptionsMenuButtonSpan">返回游戲</span></div></div><div id="dSelectLevel"><div class="TitleBigContainer"><div id="dTitleSmallContainer" class="TitleSmallContainer" style="display:none"><div id="dBigLvl1"><div class="BigLevel">   第一大關   <span style="cursor:pointer" onClick="SetNone($('dBigLvl1'));SetBlock($('dBigLvl2'))" title="點擊進入到第二大關">>></span></div><div onClick="SelectModal(1)" class="SmallLevel">第一關</div><div onClick="SelectModal(2)" class="SmallLevel">第二關</div><div onClick="SelectModal(3)" class="SmallLevel">第三關</div><div onClick="SelectModal(4)" class="SmallLevel">第四關</div><div onClick="SelectModal(5)" class="SmallLevel">第五關</div><div onClick="SelectModal(6)" class="SmallLevel">第六關</div><div onClick="SelectModal(7)" class="SmallLevel">第七關</div><div onClick="SelectModal(8)" class="SmallLevel">第八關</div><div onClick="SelectModal(9)" class="SmallLevel">第九關</div><div onClick="SelectModal(10)" class="SmallLevel">第十關</div></div><div id="dBigLvl2" style="display:none"><div class="BigLevel"><span style="cursor:pointer" onClick="SetNone($('dBigLvl2'));SetBlock($('dBigLvl1'))" title="點擊進入到第一大關"><<</span>   第二大關   </div><div onClick="SelectModal(11)" class="SmallLevel">第一關</div><div onClick="SelectModal(12)" class="SmallLevel">第二關</div></div></div><div id="dMiniSmallContainer" class="TitleSmallContainer" style="display:none"><div class="BigLevel">小游戲模式</div><div onClick="SelectModal('StrongLevel')" class="SmallLevel" style="width:100%">超乎尋常的壓力！</div><div onClick="SelectModal('TestUHeart')" class="SmallLevel" style="width:100%">你的心臟夠強勁嗎？</div><div onClick="SelectModal('ZombieRun')" class="SmallLevel" style="width:100%">僵尸快跑！</div><div onClick="SelectModal('PovertyOfTheSoil')" class="SmallLevel" style="width:100%">貧瘠之地</div><div onClick="SelectModal('MassGrave')" class="SmallLevel" style="width:100%">亂葬崗</div></div></div><div class="OptionsMenuButton" style="margin-top:20px" onMouseDown="OptionsMenuDown(this,$('sLevelMenu'))" onMouseUp="OptionsMenuUP(this,$('sLevelMenu'));HiddenLevel();HiddenMiniGame()"><span id="sLevelMenu" class="OptionsMenuButtonSpan">返    回</span></div></div></div></div> </div>

主界面EDAll

<div class="WindowFrame" id="dAll" style="position:absolute;left:0;top:0;width:900px;background-color:#000"><div style="position:absolute;width:1400px;height:600px;display:none;z-index:0" id="tGround"></div><div id="dCardList" style="visibility:hidden;position:absolute;left:500px;top:0;width:100px;overflow:visible;z-index:254"></div><div id="dZombie" style="position:absolute;width:335px;height:600px;left:1065px;top:0;z-index:1"></div><div id="dSelectCard" align=center style="display:none;position:absolute;left:600px;top:0;width:465px;height:600px;z-index:1;background: url('images/interface/SeedChooser_Background.png') no-repeat"><div style="text-align:center;line-height:35px;font-size: 12pt;color:#FC6;height:35px;width:100%;top:0;font-family:新宋體;font-weight: bold">選擇你的植物</div><div id="dPCard" style="position:relative;width:96%;height:455px;"></div><div style="width:100%;height:40px;line-height:40px;text-align:center;margin-top:10px"><input onClick="ResetSelectCard()" type="button" value="重選" name="btnReset" id="btnReset" style="width: 65; height: 35; border-left: 3px solid #85411C; border-right: 3px solid #4E250C; border-top: 3px solid #85411C; border-bottom: 3px solid #4E250C; background-color: #602D11; color:#FC6; font-weight:bold; font-size:14px;cursor:pointer"><input onClick="LetsGO()" type="button" value="GO!" disabled="disabled" name="btnOK" id="btnOK" style="width: 65; height: 35; border-left: 3px solid #85411C; border-right: 3px solid #4E250C; border-top: 3px solid #85411C; border-bottom: 3px solid #4E250C; background-color: #602D11; color:#888; font-weight:bold; font-size:14px;cursor:pointer"></div></div><div id="dTop" style="position:absolute;left:605px;top:561px;height:35px;width:123px;display:none;z-index:1;"><div id="dSunNum" style="background:url('images/interface/SunBack.png') no-repeat;position:absolute;width:123px;height:35px"><span id="sSunNum" style="text-align:center;position:absolute;top:4px;left:43px;width:68px;font-family:Verdana;font-weight:bold;font-size:18pt"></span></div><div id="tdShovel" style="position:absolute;width:71px;height:35px;left:130px;background: url('images/interface/ShovelBack.png') no-repeat;visibility:hidden"><img id="imgShovel" src="images/interface/Shovel.png" onMouseDown="ChoseShovel(event)"></div></div> </div>

菜單

圖鑒

獲得新植物

<div id="dNewPlant" style="display:none;position:absolute;width:800px;height:600px;background:url(images/interface/AwardScreen_Back.jpg) no-repeat"><div id="dNewPlantTitle" style="position:absolute;left:50%;text-align:center;margin-left:-250px;color: #FC6; font-size: 20px;height:90px;line-height:90px; font-weight: bold; width:500px">你獲得了一棵新的植物！</div><div style="position:absolute;top:100px;width:800px;height:191px;line-height:191px;text-align:center"><img id="iNewPlantCard" border="0"></div><br><div id="dNewPlantName" style="position:absolute;position:absolute;top:291px;text-align:center;left:50%;margin-left:-150px;width:300px;height:55px;font-family: 宋體; font-size: 20px; color: #FC6; font-weight: bold;line-height:55px">abc</div><br><br><br><div id="dNewPlantTooltip" style="position:absolute;left:50%;top:400px;text-align:center;margin-left:-140px;width:280px;font-weight: bold;font-family: 宋體; font-size: 12px;color:#232323">abc</div><br><br><br><br><br><br><input type="button" value="下一關！" name="btnNextLevel" id="btnNextLevel" style="position:absolute;cursor:pointer;width: 113; height: 41; border-left: 3px solid #85411C; border-right: 3px solid #4E250C; border-top: 3px solid #85411C; border-bottom: 3px solid #4E250C; background-color: #8F431B; color:#FC6; font-weight:bold; font-size:14px; font-family:幼圓; left:344; top:507"> </div>

開發進度顯示

<div id="dProcess"><div id="dProcess2"><span id="sFailed" style="line-height:30px;font-size:16px;color:#FF0;font-weight:bold">未成功從作者網站上加載到進度文件<br>如果互聯網未連接或者作者網站無法成功打開則無法查看最新進度顯示！</span></div><br><input type="button" value="關閉" onClick="SetNone($('dProcess'))" style="cursor:pointer;width: 113px; height: 30px; border-left: 3px solid #85411C; border-right: 3px solid #4E250C; border-top: 3px solid #85411C; border-bottom: 3px solid #4E250C; background-color: #8F431B; color:#FC6; font-weight:bold; font-size:14px; font-family:幼圓"> </div><script type="text/javascript"> //初始化系統對象，載入關卡 LoadLvl();</script></body> </html>

（2）部分JS源碼

//關卡頁面10波強度最大為15 oS.Init({//場景對象數據PName:[oPeashooter,oSunFlower,oCherryBomb,oWallNut,oPotatoMine,oSnowPea,oChomper,oRepeater,oPuffShroom,oSunShroom],ZName:[oZombie,oConeheadZombie,oNewspaperZombie,oBucketheadZombie],PicArr:function(){var Pro=oFumeShroom.prototype,PicArr=Pro.PicArr;return ['images/interface/background2.jpg','images/interface/Tombstones.png','images/interface/Tombstone_mounds.png',PicArr[Pro.CardGif],PicArr[Pro.NormalGif]]}(),backgroundImage:'images/interface/background2.jpg',CanSelectCard:1,DKind:0,SunNum:50,LevelName:'關卡 2-2',LargeWaveFlag:{10:$('imgFlag3'),20:$('imgFlag1')},Monitor:{f:AppearTombstones,ar:[7,9,4]}, //初始化時在7到9列隨機生成4個墓碑UserDefinedFlagFunc:function($T){ //最后一波時從墳墓出來僵尸oP.FlagNum==oP.FlagZombies&&oP.SetTimeoutTomZombie([oZombie,oConeheadZombie,oBucketheadZombie])},LoadMusic:function(){NewEle('oEmbed','embed','width:0;height:0',{src:'music/Look up at the.swf'},EDAll)},StartGameMusic:'Ultimate battle.swf'},{ //傳遞給流程控制對象數據ArZ:[oZombie,oZombie,oZombie,oZombie,oZombie,oZombie,oConeheadZombie,oConeheadZombie,oNewspaperZombie,oBucketheadZombie],FlagNum:20, //僵尸波數SumToZombie:{1:6,2:9,3:10,'default':10},FlagToSumNum:{a1:[3,5,9,10,13,15,19],a2:[1,2,3,10,4,5,6,20]}, //代表第1-3波強度是1，4-5是2，6-9是3，其余是10FlagToMonitor:{9:[ShowLargeWave,0],19:[ShowFinalWave,0]},FlagToEnd:function(){NewImg('imgSF','images/Card/Plants/FumeShroom.png','left:587px;top:270px',EDAll,{onclick:function(){SelectModal(0)}});NewImg('PointerUD','images/interface/PointerDown.gif','top:235px;left:596px',EDAll);} }); oS.Init({PicArr:function(){var a=$User.Browser.IE6?8:32;return[ShadowPNG,"images/Sun.gif","images /OptionsMenuback"+a+".png","images /OptionsBackButton"+a+".png","images/Surface.png","images /Help.png","images /SelectorScreenStartAdventur.png","images /SelectorScreenSurvival.png","images/Logo.jpg","images /LawnMower.gif","images/ZombiesWon.png","images /LargeWave.gif","images/FinalWave.gif","images /PrepareGrowPlants.gif","images/interface /PointerUP.gif","images/interface /PointerDown.gif","images/interface/Shovel.png","images /interface/SunBack.png","images/interface /ShovelBack.png","images/interface/GrowSoil.png","images /interface/SeedChooser_Background.png","images/interface /Button.png","images/interface/LogoLine.png","images /interface/dialog_topleft.png","images/interface /dialog_topmiddle.png","images/interface /dialog_topright.png","images/interface /dialog_centerleft.png","images/interface /dialog_centermiddle.png","images/interface /dialog_centerright.png","images/interface /SelectorScreen_Almanac.png","images/interface /SelectorScreen_AlmanacHighlight.png","images/interface /dialog_bottomleft.png","images/interface /dialog_bottommiddle.png","images/interface /dialog_bottomright.png","images/interface /Almanac_IndexBack.jpg","images/interface /Almanac_IndexButton.png","images/interface /Almanac_CloseButton.png","images/interface /Almanac_CloseButtonHighlight.png","images/interface /Almanac_IndexButtonHighlight.png","images/interface /Almanac_PlantBack.jpg","images/interface

??完整源碼

CSDN下載：需要VIP
https://download.csdn.net/download/CSDN_anhl/86424202?spm=1001.2014.3001.5503
GitHub獲取：附其他小游戲源碼，感謝您的star
https://github.com/liangdianjun/game/tree/main/Temp
百度網盤：鏈接：
https://pan.baidu.com/s/1u4LONHReBVeORbUG6j8lxQ?pwd=2bjk
提取碼：2bjk

更多源碼關注博主專欄，后續更新👉【JavaWeb】Web前端

總結

以上是生活随笔為你收集整理的前端小游戏——植物大战僵尸的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： set_bit() 等位函数分析!
下一篇：编写Web前端代码的注意事项