植物大战僵尸【源代码分享+核心思路讲解】
植物大战僵尸已经正式完结，今天和大家分享一下，话不多说，直接上链接！！！（如果大家在运行这个游戏遇到了问题或者bug，那么请私我谢谢）
大家写的时候可以参考一下我的代码思路
git地址：--- 植物大战僵尸源代码---
不下载直接玩： --- 植物大战僵尸浏览器页面直接玩 ---（也可以在手机里面点开，但是放置植物时会有些卡（可以点一下植物然后再点一下草坪，也可以实现功能），电脑莫有问题）大家第一次玩这个可能会有些卡顿，第二次就好了
界面介绍：
进入游戏开始界面：
游戏主菜单界面：
游戏界面：
界面底层使用和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类，然后后面是我在这个类中定义的方法
到这里就结束了，真心希望大家可以通过我的分享学习到一些东西