植物大战僵尸【源代码分享+核心思路讲解】
- git项目
- 时间：2024-09-26 08:54
- 1107人已阅读
🔔🔔好消息!好消息!🔔🔔
有需要的朋友👉:微信号
界面介绍：
进入游戏开始界面：
界面底层使用和js思路分析：
HTML的内容（所有） ：
<div class="total wrapper">
<!-- 整个页面的内容 -->
<div class="entire wrapper">
<!-- 设置游戏开始是的场景 -->
<div class="startJframe">
<!-- 放置我事件监听的按钮 -->
<div class="startGame-btn wrapper">
<div class="begin-text"></div>
</div>
</div>
<div class="menu">
<div class="menu_btn"></div>
</div>
<div class="game-jframe">
<canvas id="canvas" style="width: 1120px; height: 620px;">
</canvas>
</div>
</div>
</div>
我这里只有3个页面，你们写的时候可以多加几个关卡，我这里相当于只有一个关卡，然后我将讲解一下我的这三个界面都是如何构成的
第一个页面：纯HTML（div startjframe）+CSS
第二个页面：纯HTML（div menu）+CSS
第三个页面：HTML（div game-jframe）里面的 canvas 绘画和 js（僵尸植物除了草坪的所有东西都是通过canvas绘画的）
canvas js代码思路：
我一共写了4个js，在这里和大家系统介绍一下：
mcommon是我用来存储图片路径的
mscene是我来定义类的（里面只有类 【植物，僵尸，小卡车，太阳，铲子，子弹，植物卡片】 ）
（大家在创建类的时候可能会有些麻烦，如果遇到问题可以在评论区问我，我会尽力帮大家解决的）
mgame是我用来通过调用mscene中的类对象的draw方法来进行页面绘制的（通过canvas中的drawImage方法绘制的）-（下面的那个图片中的cxt就是context【canvas的上下文】）
mmain是我用来初始化一些东西的【僵尸数组，植物数组，小车数组，卡片数组，一个太阳全局生成定时器，一个reset退出游戏界面清空僵尸植物和太阳的数组，并将太阳数量重置】
js游戏运行核心：
整个游戏我是通过定时器来实现我的页面运行的，因为我还没有学到其他的一些知识，所以现在只能如此
通过游戏进度的判断然后来调用game类中定义的方法实现的
g.drawPlants()
g.drawZombies()
g.drawStepImg()
g.drawPic()
g.drawShovel()
g.drawReturn()
g.drawCars()
就比如上面这个就是当我的游戏在进行时，在页面中绘画植物，僵尸，进度条，鼠标点击植物时出现的卡片，小铲子，小车等等... g是我的class game类，然后后面是我在这个类中定义的方法
到这里就结束了，真心希望大家可以通过我的分享学习到一些东西
原文链接：kaigejava2022