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

embedded/2024/11/15 8:32:49/
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/embedded/115290.html

相关文章

UI自动化测试框架搭建详解

&#x1f345; 点击文末小卡片 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 今天给大家分享一个seleniumtestngmavenant的UI自动化&#xff0c;可以用于功能测试&#xff0c;也可按复杂的业务流程编写测试用例&#xff0c;今天此篇文章不过…

专业学习|动态规划(概念、模型特征、解题步骤及例题)

一、引言 &#xff08;一&#xff09;从斐波那契数列引入自底向上算法 &#xff08;1&#xff09;知识讲解 &#xff08;2&#xff09;matlap实现递归 &#xff08;3&#xff09;带有备忘录的遗传算法 &#xff08;4&#xff09;matlap实现带有备忘录的递归算法 “&#xff1…

【JavaEE初阶】多线程7(面试要点)

欢迎关注个人主页&#xff1a;逸狼 创造不易&#xff0c;可以点点赞吗~ 如有错误&#xff0c;欢迎指出~ 目录 常见的锁策略 乐观锁vs悲观锁 重量级锁vs轻量级锁 挂起等待锁vs自旋锁 公平锁vs非公平锁 可重入锁vs不可重入锁 读写锁 synchronized的加锁过程 锁升级的过程 偏向锁 …

基于 Web 的工业设备监测系统:非功能性需求与标准化数据访问机制的架构设计

目录 案例 【说明】 【问题 1】(6 分) 【问题 2】(14 分) 【问题 3】(5 分) 【答案】 【问题 1】解析 【问题 2】解析 【问题 3】解析 相关推荐 案例 阅读以下关于 Web 系统架构设计的叙述&#xff0c;回答问题 1 至问题 3 。 【说明】 某公司拟开发一款基于 Web 的…

go webapi上传文件 部属到linux

go厉害的地方&#xff0c;linux服务器上无需安装任务依赖就可以运行&#xff0c;大赞&#xff01; 一、编译 #在Goland中cmd中执行 go env -w GOARCHamd64 go env -w GOOSlinux go build main.go # 切换回来 否则无法运行 go env -w GOOSwindows go run main.go 拷贝到linux服…

TCP/IP网络模型分层

应用层 应用层是最上层的&#xff0c;也就是我们能直接接触到的就是应用层(Application Layer),手机和电脑上的应用软件都是在应用层实现。当两个不同设备的应用需要通信的时候&#xff0c;应用就会把数据传输给下一层&#xff0c;也就是传输层 所以&#xff0c;应用层只需要…

Spring Boot-WebSocket相关问题

Spring Boot 中的 WebSocket 相关问题及解决方案 WebSocket 是一种双向的实时通信协议&#xff0c;它允许客户端和服务器之间建立持久连接&#xff0c;并在此连接上双向传输数据。与传统的 HTTP 请求-响应模型不同&#xff0c;WebSocket 能够显著减少网络开销和延迟&#xff0…

第k个排列 - 华为OD统一考试(E卷)

2024华为OD机试(E卷+D卷+C卷)最新题库【超值优惠】Java/Python/C++合集 题目描述 给定参数n,从1到n会有n个整数:1,2,3,.,n,这n个数字共有 n!种排列。按大小顺序升序列出所有排列情况,并-一标记,当n=3时,所有排列如下: “123” “132” “213” “231” “312” “…