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

植物大战僵尸已经正式完结,今天和大家分享一下,话不多说,直接上链接!!!(如果大家在运行这个游戏遇到了问题或者bug,那么请私我谢谢)

大家写的时候可以参考一下我的代码思路

git地址:--- 植物大战僵尸源代码---

不下载直接玩: ---植物大战僵尸浏览器页面直接玩 --- (也可以在手机里面点开,但是放置植物时会有些卡(可以点一下植物然后再点一下草坪,也可以实现功能),电脑莫有问题)大家第一次玩这个可能会有些卡顿,第二次就好了

界面介绍:

进入游戏开始界面:

游戏主菜单界面:

游戏界面:

界面底层使用和js思路分析:

HTML的内容(所有) :

javascript 复制代码
<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类中定义的方法实现的

javascript 复制代码
      g.drawPlants()
      g.drawZombies()
      g.drawStepImg()
      g.drawPic()
      g.drawShovel()
      g.drawReturn()
      g.drawCars()

就比如上面这个就是当我的游戏在进行时,在页面中绘画植物,僵尸,进度条,鼠标点击植物时出现的卡片,小铲子,小车等等... g是我的class game类,然后后面是我在这个类中定义的方法

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

相关推荐
清幽竹客7 分钟前
vue-37(模拟依赖项进行隔离测试)
前端·vue.js
vvilkim7 分钟前
Nuxt.js 页面与布局系统深度解析:构建高效 Vue 应用的关键
前端·javascript·vue.js
滿11 分钟前
Vue3 父子组件表单滚动到校验错误的位置实现方法
前端·javascript·vue.js
专注VB编程开发20年11 分钟前
javascript的类,ES6模块写法在VSCODE中智能提示
开发语言·javascript·vscode
夏梦春蝉1 小时前
ES6从入门到精通:模块化
前端·ecmascript·es6
拓端研究室2 小时前
视频讲解:门槛效应模型Threshold Effect分析数字金融指数与消费结构数据
前端·算法
工一木子3 小时前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
随缘而动,随遇而安4 小时前
第八十八篇 大数据中的递归算法:从俄罗斯套娃到分布式计算的奇妙之旅
大数据·数据结构·算法
半点寒12W5 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端6 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app