百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程字典 > 正文

微信demo小游戏:飞机大战从无到有

toyiye 2024-07-03 01:59 17 浏览 0 评论

现在创建新项目会默认给飞机大战的demo,这里给大家从基础开始讲解游戏的从无到有是怎么实现的。

具体实现步骤:

创建背景图->背景图运动起来->创建飞机并随背景图一起动->控制飞机移动->飞机发射子弹->创建敌机->消灭敌机->玩家飞机被击毁->显示结算界面

首先删除所有自带文件,只保留game.js、game.json和project.config.json(原来的最好保留,因为等会要复制一些内容)

删除game.js中的内容,此时模拟器为一片漆黑,如下图所示

好,我们正式开始一步步开始编写飞机大战

官方提供了Adapter库,方便我们操作,官方的解释如下:

这里weapp-adapter足够用,就不用其它游戏引擎了!

1、weapp-adapter

新建JS文件夹,在js文件夹中新建libs文件夹,将weapp-adapter复制进来(原来保存中复制),然后js目录下新建一个main.js文件

2、在game.js中添加代码

main.js先空着,我们要先建立精灵类

3、创建精灵类

精灵,是构成游戏中活动体(比如,飞机、野兽等游戏人物)的最基本单元。

在JS目录下新建sprite.js文件,添加代码,定义背景图的文件,大小,位置等,并显示在画布上。

4、显示背景图

然后添加背景图片images/bg.jpg,在background.js文件中添加代码

背景图片的方法已经完成,现在到主函数main.js中实现图片显示,添加代码

即可实现图片加载,效果如下:

5、背景图运动起来

如果细心的朋友会发现,前面背景图方法里是绘制了两张图片的,一张是和铺满屏幕的,另一张是在屏幕上方看不到的。

如果让背景图运动起来,就要是图片向下移动,因为每一帧都会重新绘制,所以要再背景图方法中加一个向下运动的方法

然后再loop循环中添加

此时背景图就运动起来了

6、加载飞机,并随地图一起运动

新建玩家飞机类

在主函数中添加飞机相关

将loop循环中的内容拆分为重绘和更新

此时,玩家飞机出现,并可以和地图一起运动

7、控制飞机移动

新增判断手指的相关动作,以及判断是否处于屏幕中

此时,飞机的位置可以通过手指和鼠标进行控制

8、发射子弹

这个时候因为子弹会有很多个,而且超出屏幕的要回收掉,所以要加全局管理器和对象池

Base目录中新增pool.js文件(对象池),js目录中新增databus.js文件(全局管理器),这两个文件可以复制原来的

添加子弹类文件bullet.js,复制原来的即可

飞机类新增代码发射子弹

主函数文件中新增

Render中重绘子弹

Update中更新子弹的位置,并每隔20帧发射一枚子弹,数值越小,发射速度越快

已完成子弹发射的功能。

9、创建敌机

敌机会有爆炸的动画,所以要新建一个帧动画类和敌机类

帧动画类:base目录下的animation.js

敌机类:npc目录下enemy.js

(复制过来就行,具体不做详解)

主函数中新增生成敌机的代码

此时不会有敌机爆炸,也没有撞机的功能

10、消灭敌机

主函数中新增全局碰撞检测,被注释掉的是玩家飞机和敌机碰撞,暂时先不要

全局碰撞方法要放到update函数中,此时可以消灭敌机,但是没有爆炸动画,玩家也是出于无敌状态的。

新增代码,显示爆炸动画

11、玩家飞机被击毁,游戏结束

然后控制游戏不再更新

这个时候画面静止不动了,游戏结束了

12、显示结算界面

在runtime文件夹中新增gameinfo.js文件,用于积分和结算界面

判断游戏结束后,显示结算页面,并新增点击重新开始事件

游戏结束后,手指触摸事件

此时,如果游戏结束后,点击重新开始,会发现不正常,游戏立马结束了,原因是原来所有的游戏单元都还在。

新增代码

所有的单元全部重置,此时又有新的问题,游戏速度变的越来越快了

此时可以重新开始,但是飞机不能移动了,原因很简单,事件监听中还是开始的事件,要删除掉

至此,已经完成了飞机大战的制作了(音效就没管了,需要可以自己研究一下)

结束。。等等,游戏中的时候居然没有显示实时积分??这个居然漏了,现在补上

上面是显示积分,下面是积分增加,消灭一个敌机加一

至此,真的结束了,至少每一步是怎么实现的,应该有所了解,具体实现的逻辑可以自己研究,后续会有更多的实例提供大家参考。

相关推荐

为何越来越多的编程语言使用JSON(为什么编程)

JSON是JavascriptObjectNotation的缩写,意思是Javascript对象表示法,是一种易于人类阅读和对编程友好的文本数据传递方法,是JavaScript语言规范定义的一个子...

何时在数据库中使用 JSON(数据库用json格式存储)

在本文中,您将了解何时应考虑将JSON数据类型添加到表中以及何时应避免使用它们。每天?分享?最新?软件?开发?,Devops,敏捷?,测试?以及?项目?管理?最新?,最热门?的?文章?,每天?花?...

MySQL 从零开始:05 数据类型(mysql数据类型有哪些,并举例)

前面的讲解中已经接触到了表的创建,表的创建是对字段的声明,比如:上述语句声明了字段的名称、类型、所占空间、默认值和是否可以为空等信息。其中的int、varchar、char和decimal都...

JSON对象花样进阶(json格式对象)

一、引言在现代Web开发中,JSON(JavaScriptObjectNotation)已经成为数据交换的标准格式。无论是从前端向后端发送数据,还是从后端接收数据,JSON都是不可或缺的一部分。...

深入理解 JSON 和 Form-data(json和formdata提交区别)

在讨论现代网络开发与API设计的语境下,理解客户端和服务器间如何有效且可靠地交换数据变得尤为关键。这里,特别值得关注的是两种主流数据格式:...

JSON 语法(json 语法 priority)

JSON语法是JavaScript语法的子集。JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔花括号保存对象方括号保存数组JS...

JSON语法详解(json的语法规则)

JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔大括号保存对象中括号保存数组注意:json的key是字符串,且必须是双引号,不能是单引号...

MySQL JSON数据类型操作(mysql的json)

概述mysql自5.7.8版本开始,就支持了json结构的数据存储和查询,这表明了mysql也在不断的学习和增加nosql数据库的有点。但mysql毕竟是关系型数据库,在处理json这种非结构化的数据...

JSON的数据模式(json数据格式示例)

像XML模式一样,JSON数据格式也有Schema,这是一个基于JSON格式的规范。JSON模式也以JSON格式编写。它用于验证JSON数据。JSON模式示例以下代码显示了基本的JSON模式。{"...

前端学习——JSON格式详解(后端json格式)

JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScriptProgrammingLa...

什么是 JSON:详解 JSON 及其优势(什么叫json)

现在程序员还有谁不知道JSON吗?无论对于前端还是后端,JSON都是一种常见的数据格式。那么JSON到底是什么呢?JSON的定义...

PostgreSQL JSON 类型:处理结构化数据

PostgreSQL提供JSON类型,以存储结构化数据。JSON是一种开放的数据格式,可用于存储各种类型的值。什么是JSON类型?JSON类型表示JSON(JavaScriptO...

JavaScript:JSON、三种包装类(javascript 包)

JOSN:我们希望可以将一个对象在不同的语言中进行传递,以达到通信的目的,最佳方式就是将一个对象转换为字符串的形式JSON(JavaScriptObjectNotation)-JS的对象表示法...

Python数据分析 只要1分钟 教你玩转JSON 全程干货

Json简介:Json,全名JavaScriptObjectNotation,JSON(JavaScriptObjectNotation(记号、标记))是一种轻量级的数据交换格式。它基于J...

比较一下JSON与XML两种数据格式?(json和xml哪个好)

JSON(JavaScriptObjectNotation)和XML(eXtensibleMarkupLanguage)是在日常开发中比较常用的两种数据格式,它们主要的作用就是用来进行数据的传...

取消回复欢迎 发表评论:

请填写验证码