給大家分享一個植物大戰(zhàn)僵尸網(wǎng)頁游戲源代碼,感興趣的小伙伴可收藏學(xué)習(xí)(完整源碼在文末)
先來一睹“芳容”
??效果展示
??游戲介紹
《植物大戰(zhàn)僵尸》 是一款極富策略性的小游戲。可怕的僵尸即將入侵,每種僵尸都有不同的特點(diǎn),例如鐵桶僵尸擁有極強(qiáng)的抗擊打能力,礦工僵尸可以挖地道繞過種植在土壤表面的植物等。玩家防御僵尸的方式就是栽種植物。49種植物每種都有不同的功能,例如櫻桃炸彈可以和周圍一定范圍內(nèi)的所有僵尸同歸于盡,而食人花可以吃掉最靠近自己的一只僵尸。玩家可以針對不同僵尸的弱點(diǎn)來合理地種植植物,這也是勝利的訣竅。游戲根據(jù)玩法不同分為五種游戲模式:冒險模式、迷你模式、解謎模式、生存模式、禪境花園。加之黑夜、屋頂、濃霧以及泳池之類的障礙增加了其挑戰(zhàn)性該游戲近乎永無止境。
《植物大戰(zhàn)僵尸》集成了即時戰(zhàn)略、塔防御戰(zhàn)和卡片收集等要素,玩家控制植物抵御僵尸的進(jìn)攻,保護(hù)這片植物園。游戲中可以選用的植物有40多種,而每個場景最多只能選用10種植物,這就需要玩家根據(jù)自己的游戲策略來作出取舍。因為它成功地借鑒了一些戰(zhàn)略游戲的要素——采集資源并利用資源建造其它單位,有些玩家甚至拿星際的戰(zhàn)略往這款游戲中套用,以闡述這款游戲需要在何時發(fā)展“經(jīng)濟(jì)”,何時發(fā)展“兵力”。
這款游戲要求玩家既有大腦的智慧,又要有小腦的反應(yīng)。在有了正確的戰(zhàn)略思想之后,還要靠戰(zhàn)術(shù)將戰(zhàn)略實現(xiàn)出來。戰(zhàn)術(shù)范圍包括很廣,植物的搭配、戰(zhàn)斗時的陣型、植物與僵尸相遇時,是戰(zhàn)是防這都屬于戰(zhàn)術(shù)的范疇。正確的戰(zhàn)術(shù)是玩家在戰(zhàn)斗中勝利的關(guān)鍵,選擇正確的戰(zhàn)術(shù),需要先分析情況,再做出決定。那么提高戰(zhàn)術(shù)水平也是要提高分析情況的能力。
??游戲內(nèi)容
(1)冒險模式
冒險模式也就是闖關(guān)模式,共有兩大關(guān)卡,第一大關(guān)卡是白天模式,一共有十個小關(guān)卡。第二大關(guān)是夜晚模式,只有兩個小關(guān)。
(2)小游戲
小游戲更加豐富多樣,本人體驗效果非常不錯(不信你來試試)
開掛式僵尸讓你體會不一樣的樂趣(5000個僵尸,本人撐了不到一個回合,神仙來了估計也呼不住??)
更多小游戲請自行體驗
??圖片資源
下面是一些用到的部分圖片(各紅各樣的植物以及一些場地道具)
??代碼展示
完整源碼可點(diǎn)此下載:https://download.csdn.net/download/CSDN_anhl/86424202?spm=1001.2014.3001.5503
(1)HTML源碼
進(jìn)度條
<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)">重新開始</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"> 第一大關(guān) <span style="cursor:pointer" onClick="SetNone($('dBigLvl1'));SetBlock($('dBigLvl2'))" title="點(diǎn)擊進(jìn)入到第二大關(guān)">>></span></div>
<div onClick="SelectModal(1)" class="SmallLevel">第一關(guān)</div>
<div onClick="SelectModal(2)" class="SmallLevel">第二關(guān)</div>
<div onClick="SelectModal(3)" class="SmallLevel">第三關(guān)</div>
<div onClick="SelectModal(4)" class="SmallLevel">第四關(guān)</div>
<div onClick="SelectModal(5)" class="SmallLevel">第五關(guān)</div>
<div onClick="SelectModal(6)" class="SmallLevel">第六關(guān)</div>
<div onClick="SelectModal(7)" class="SmallLevel">第七關(guān)</div>
<div onClick="SelectModal(8)" class="SmallLevel">第八關(guān)</div>
<div onClick="SelectModal(9)" class="SmallLevel">第九關(guān)</div>
<div onClick="SelectModal(10)" class="SmallLevel">第十關(guān)</div>
</div>
<div id="dBigLvl2" style="display:none">
<div class="BigLevel"><span style="cursor:pointer" onClick="SetNone($('dBigLvl2'));SetBlock($('dBigLvl1'))" title="點(diǎn)擊進(jìn)入到第一大關(guān)"><<</span> 第二大關(guān) </div>
<div onClick="SelectModal(11)" class="SmallLevel">第一關(guān)</div>
<div onClick="SelectModal(12)" class="SmallLevel">第二關(guān)</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%">你的心臟夠強(qiáng)勁嗎?</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="dMenu" style="display:none;position:absolute;cursor:pointer;width:226px;height:41px;left:677px;z-index:254">
<div id="dMenu0" class="Menu" onClick="PauseGame(this)">暫 停</div>
<div id="dMenu1" class="Menu" onClick="ClickMenu()">菜 單</div>
</div>
圖鑒
<div id="dHandBook" style="display:none;position:absolute;z-index:255" class="WindowFrame">
<table border="0" width="800" cellspacing="0" cellpadding="0" background="images/interface/Almanac_IndexBack.jpg" height="600">
<tr>
<td height="88" align="center" style="font-size: 32px; font-weight: bold; font-family: 黑體;" colspan="3"> 圖鑒——索引</td>
</tr>
<tr>
<td align="center" width="400" height="473">
<img border="0" src="images/Plants/SunFlower/SunFlower.gif" width="73" height="74"><br>
<br>
<br>
<br>
<input type="button" value="查看植物" name="btnViewPlant" id="btnViewPlant" style="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:#FFCC66; font-weight:bold; font-size:14pt; font-family:幼圓" onClick="ViewProducePlant()"><br>
<br>
</td>
<td align="center" width="400" height="473" colspan="2">
<img border="0" src="images/Zombies/Zombie/Zombie.gif" width="149" height="130"><br>
<table border="0" width="113" background="images/interface/Button.png" height="41" cellspacing="0" cellpadding="0">
<tr>
<td style="cursor:pointer;font-weight:bold; font-size:14pt; font-family:幼圓; color:#00F500" align="center" onClick="ViewProduceZombie()">查看僵尸</td>
</tr>
</table>
<p><br>
<br>
</td>
</tr>
<tr>
<td align="center" width="400">
</td>
<td align="center" width="238">
</td>
<td align="center" width="162">
<table border="0" width="89" cellspacing="0" cellpadding="0" height="26">
<tr>
<td background="images/interface/Almanac_CloseButton.png" style="cursor:pointer" onMouseOver="this.style.backgroundImage='url(images/interface/Almanac_CloseButtonHighlight.png)'" onMouseOut="this.style.backgroundImage='url(images/interface/Almanac_CloseButton.png)'" onClick="SetNone($('dHandBook'))" align="center">
<font color="#000080" style="font-size: 9pt;">關(guān)閉</font></td>
</tr>
</table>
</td>
</tr>
</table>
</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="下一關(guān)!" 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>
開發(fā)進(jìn)度顯示文章來源:http://www.zghlxwxcb.cn/news/detail-779339.html
<div id="dProcess">
<div id="dProcess2"><span id="sFailed" style="line-height:30px;font-size:16px;color:#FF0;font-weight:bold">未成功從作者網(wǎng)站上加載到進(jìn)度文件<br>如果互聯(lián)網(wǎng)未連接或者作者網(wǎng)站無法成功打開則無法查看最新進(jìn)度顯示!</span></div>
<br>
<input type="button" value="關(guān)閉" 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">
//初始化系統(tǒng)對象,載入關(guān)卡
LoadLvl();
</script>
</body>
</html>
(2)部分JS源碼
//關(guān)卡頁面10波強(qiáng)度最大為15
oS.Init({
//場景對象數(shù)據(jù)
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:'關(guān)卡 2-2',
LargeWaveFlag:{10:$('imgFlag3'),20:$('imgFlag1')},
Monitor:{f:AppearTombstones,ar:[7,9,4]}, //初始化時在7到9列隨機(jī)生成4個墓碑
UserDefinedFlagFunc:function($T){ //最后一波時從墳?zāi)钩鰜斫┦?/span>
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'
},{
//傳遞給流程控制對象數(shù)據(jù)
ArZ:[oZombie,oZombie,oZombie,oZombie,oZombie,oZombie,oConeheadZombie,oConeheadZombie,oNewspaperZombie,oBucketheadZombie],
FlagNum:20, //僵尸波數(shù)
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波強(qiáng)度是1,4-5是2,6-9是3,其余是10
FlagToMonitor:{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 -
百度網(wǎng)盤:鏈接:
https://pan.baidu.com/s/1u4LONHReBVeORbUG6j8lxQ?pwd=2bjk
提取碼:2bjk
更多源碼關(guān)注博主專欄,后續(xù)更新??【JavaWeb】Web前端文章來源地址http://www.zghlxwxcb.cn/news/detail-779339.html
到了這里,關(guān)于前端小游戲——植物大戰(zhàn)僵尸的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!