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

server/2024/9/23 5:03:07/
htmledit_views">

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

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


http://www.ppmy.cn/server/120638.html

相关文章

【力扣 | SQL题 | 每日三题】力扣182

1. 力扣182&#xff1a;查找重复的电子邮箱 1.1 题目&#xff1a; 表: Person ---------------------- | Column Name | Type | ---------------------- | id | int | | email | varchar | ---------------------- id 是该表的主键&#xff08;具有唯…

【软件工程】系统流程图

一、定义 二、常用符号 例题 选择题

【Linux】简易日志系统

目录 一、概念 二、可变参数 三、日志系统 一、概念 一个正在运行的程序或系统就像一个哑巴&#xff0c;一旦开始运行我们很难知晓其内部的运行状态。 但有时在程序运行过程中&#xff0c;我们想知道其内部不同时刻的运行结果如何&#xff0c;这时一个日志系统可以有效的帮…

Qt:NULL与nullptr的区别(手写nullptr)

前言 发现还是有人不知道NULL 与nullptr的区别&#xff0c;故写此文章。 正文 对于NULL 先看NULL的源码 我们可以看出这段代码是一个典型的预处理器宏定义块&#xff0c;用于处理 NULL 宏的定义。 先看开头 #if defined (_STDDEF_H) || defined (__need_NULL)这行代码检…

Spring AOP - 配置文件方式实现

目录 AOP基础概念 示例1&#xff1a;模拟在com.text包及子包项下所有类名称以ServiceImpl结尾的类的所有方法执行前、执行后、执行正常后返回值、执行过程中出异常的情况 示例2&#xff1a;统计com.text包及子包项下所有类名称以DaoImpl结尾的类的所有方法执行时长情况 AOP基…

利用JAVA写一张纸折叠珠穆拉玛峰高度

public class zhumulama {public static void main(String[] args) {double height 8848860;double zhi 0.1;int count 0;while(zhi < height){zhi*2;//每次折完厚度count;//计数}System.out.println("一共需要折"count"次");System.out.println(&qu…

机器学习查漏补缺(4)

[M] What happens if we accidentally duplicate every data point in your train set or in your test set? Train set duplication: Duplicating every data point in the training set will effectively double the importance of each sample, but it won’t introduce ne…

laravel public 目录获取

在Laravel框架中&#xff0c;public目录是用来存放公共资源的&#xff0c;如CSS、JS、图片等。你可以通过多种方式获取public目录的路径。 方法一&#xff1a;使用helper函数public_path() $path public_path(); 方法二&#xff1a;使用Request类 $path Request::root().…