植物大战僵尸【源代码分享+核心思路讲解】

植物大战僵尸已经正式完结，今天和大家分享一下，话不多说，直接上链接！！！（如果大家在运行这个游戏遇到了问题或者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类，然后后面是我在这个类中定义的方法

到这里就结束了，真心希望大家可以通过我的分享学习到一些东西