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

现在创建新项目会默认给飞机大战的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文件,用于积分和结算界面

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

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

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

新增代码

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

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

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

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

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

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

顺便打个广告,欢迎大家关注笑林新记,每天都有不一样的爆笑内容,可以放松一下,扫码关注一下吧,我的更新也在这里。

这里也附上我个人的微信,欢迎大家和我交流

微信demo小游戏:飞机大战从无到有的更多相关文章

  1. 原生JS实现的h5小游戏-植物大战僵尸

    代码地址如下:http://www.demodashi.com/demo/12755.html 项目介绍 本项目是利用原生js实现的h5小游戏-植物大战僵尸,主要结合了一下自己对于h5小游戏的理解,结 ...

  2. 软件工程 Android小游戏 猜拳大战

    一.前言 最近学校举办的大学生程序设计竞赛,自己利用课余时间写了一个小游戏,最近一直在忙这个写这个小游戏,参加比赛,最终是老师说自己写的简单,可以做的更复杂的点的.加油 二.内容简介 自己玩过Andr ...

  3. android小游戏 飞机躲子弹

    最近android老师让每人写一个小东西,因为之前学awt时写过一个java版的飞机躲子弹,所以这次想写成android版的. 文件直接导入就行http://files.cnblogs.com/fil ...

  4. 关于Unity的入门游戏飞机大战的开发(下)

    开发思路: 1: 修改测试模式,去掉开始按钮方便开发,加入敌机的资源2: 创建敌机 添加刚体,碰撞器组件,添加帧动画播放组件;3: 创建敌机出现的队形;4: 根据队形随机 生成我们的敌机,调整敌机的速 ...

  5. 关于Unity的入门游戏飞机大战的开发(上)

    每个组件都是一个类的实例,要获得某个组件,要先创建一个同类型的组件类实例,然后把实例传引用过去,就可以对想要的组件实例进行操作. 做游戏一般创建一个逻辑节点,里面只管逻辑,再创建一个动画节点,里面有好 ...

  6. 【Web前端Talk】无聊吗?写个【飞机大战】来玩吧(上篇)

    01前言介绍 微信小游戏是基于微信客户端的游戏,它即点即玩,无需下载安装,体验轻便,可以和微信内的好友一起玩,比如PK.围观等,享受小游戏带来的乐趣.那如何开发一款属于自己的小游戏呢? 源码地址: h ...

  7. python飞机大战简单实现

    小游戏飞机大战的简单代码实现: # 定义敌机类 class Enemy: def restart(self): # 重置敌机的位置和速度 self.x = random.randint(50, 400 ...

  8. 微信小游戏 demo 飞机大战 代码分析(四)(enemy.js, bullet.js, index.js)

    微信小游戏 demo 飞机大战 代码分析(四)(enemy.js, bullet.js, index.js) 微信小游戏 demo 飞机大战 代码分析(一)(main.js) 微信小游戏 demo 飞 ...

  9. 微信小游戏 demo 飞机大战 代码分析 (三)(spirit.js, animation.js)

    微信小游戏 demo 飞机大战 代码分析(三)(spirit.js, animation.js) 微信小游戏 demo 飞机大战 代码分析(一)(main.js) 微信小游戏 demo 飞机大战 代码 ...

随机推荐

  1. Spring-使用JAVA的方式配置Spring-代理模式

    9.使用Java的方式配置Spring 我们现在要完全不使用Spring的xml配置了,全权交给Java来做! JavaConfig是Spring的一个子项目,在Spring4之后,它成为了一个核心功 ...

  2. IntelliJ IDEA 生成类注释和方法注释

    1.类注释 settings-> file and code templates-> files(Class) 代码: #if (${PACKAGE_NAME} && ${ ...

  3. 关键字local、global和内置函数【locals、globals】

    每个函数都有着自已的命名空间,叫做局部名字空间,它记录了函数的变量,包括函数的参数和局部定义的变量.每个模块拥有它自已的命名空间,叫做全局命名空间,它记录了模块的变量,包括函数.类.其它导入的模块.模 ...

  4. Codeforces Round #596 (Div. 2, based on Technocup 2020 Elimination Round 2) A. Forgetting Things

    链接: https://codeforces.com/contest/1247/problem/A 题意: Kolya is very absent-minded. Today his math te ...

  5. [Google Guava] 8-区间

    原文链接 译文链接 译文:沈义扬 范例 1 List scores; 2 Iterable belowMedian =Iterables.filter(scores,Range.lessThan(me ...

  6. SQL的左连接与右链接

    1.准备工作 Oracle  外连接(OUTER JOIN)包括以下: 左外连接(左边的表不加限制) 右外连接(右边的表不加限制) 全外连接(左右两表都不加限制) 对应SQL:LEFT/RIGHT/F ...

  7. 避免Double数据显示为科学记数

    显示现象     数据类型 实体类中为 private Double tradeAmount; Oracle数据库中为  NUMBER(19,4) 解决方式 第一种解决方式 - 无效 将Double转 ...

  8. Material icons 全图标一览

    Material icons 全图标一览 2018年12月17日 16:52:55 boywcx 阅读数 3090   版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog. ...

  9. 数据结构实验之二叉树五:层序遍历 (SDUT 3344)

    #include <bits/stdc++.h> using namespace std; struct node { char data; struct node *lc, *rc; } ...

  10. tar 命令出现 Cowardly refusing to create an empty archive 问题详解

    错误提示的字面意思是,系统惴惴不安地拒绝执行创建一个空压缩包的任务.检查tar命令的语法!!!参考:https://blog.csdn.net/deniro_li/article/details/54 ...