无聊吗?写个【飞机大战】来玩吧(上篇)

01前言介绍

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

源码地址:

https://github.com/A123asdo11/aircraft_war

(新版ccc已无法正常使用,需要修复,文章作者花费了大量的时间和精力,在ccc2.0以上版本进行了修复,并在微信小游戏正常运行)

02微信小游戏飞机大战简介

1、大事记   

经典飞机大战是腾讯交流软件微信5.0版本在2013年8月推出的软件内置经典小游戏。微信早已正式发布微信内置飞机大战游戏,目前该游戏已经下线。

2、玩法介绍

玩家点击开始游戏并移动自己的大飞机,在躲避迎面而来的其它飞机时,大飞机通过发射炮弹打掉其它小飞机来赢取分数。一旦撞上其它飞机,游戏就结束。

此时,界面中会显示此次玩家的飞机大战分数。点击历史成绩后可看到“历史成绩排行榜”。点击重新挑战可继续重玩。点击退出游戏后,回到开始游戏等待页。

3、游戏介绍

1)、首先要清楚飞机的分数,小飞机1000分。 中飞机4000分。 大飞机16000分。 尽量别招惹中大飞机很容易来不及打爆就下来了或者后面又跟着中大飞机。

2)、手机屏幕要敏感度高,用大屏幕的pad或者长点的手机玩比较有优势。(因为能提前看到前面的障碍物)

3)、要尽量活的长,安全第一。安全的时候,就是开始比较慢的时候,可以多打一些小飞机,积累分数;遇到飞船,前面可以出击,需要击打一段时间才能摧毁。

4)、如果吃到了蓝色的双色炮弹,请不要犹豫,尽量找多的,大的地方打。最好身边保留一个炸弹,关键时刻救急,后面的速度很快, 飞机很密集。

5)、去洗手,手上、屏幕上不能汗渍,水渍、油渍等影响发挥。保持手指、屏幕的顺滑。

6)、和传统的飞机射击游戏一样,此游戏飞机也不是被碰到就会死,而是飞机有一个点,大概就是最中心那一块,只要不被敌机碰到那一块,而是碰到两边翅膀,那么飞机就不会爆炸,不过这个方法不好掌握,活用的方法是,躲在屏幕的最左或最右,把中心部分隐藏住。

7)、如果飞机打光了,可以向好友索要,如果好友在一定时间没给你,或者没有好友给你飞机,其实也不用着急到了一定时间,飞机就可以刷出来了,又能继续刷分咯。

8)、游戏界面预览

想体验游戏的用户请关注我们公众号:Web前端Talk,并在后台回复,“我要体验”,我们将随机抽取幸运玩家。名额有限哦!!!

03游戏场景设计

1、开始场景

A、主界面(公共背景图,动画小飞机)

B、开始游戏按钮

2、游戏场景

A、英雄机

①、子弹(无限,红色)、超级子弹(有限,蓝色)、子弹碰撞敌机

②、英雄机移动、子弹跟随移动

③、主角与敌机碰撞

B、敌机

①、小、中、大敌机随机生成

②、敌机生命值,获得分数

C、BUFF

(炸弹)

(超级子弹,蓝色弹夹)

D、分数、炸弹夹

3、GameOver场景

A、主角碰撞敌机后游戏结束,展示当前获得分数

B、主界面上方展示历史最高分数

C、玩家可选择按钮,重新挑战、历史得分、退出游戏

Cocos creator工具预览

目录结构:

Scene:场景,

Script:脚本,所有脚本都在这里,

Texture:图片资源以及图集资源,

Animation:动画元素,

Prefab:预载体资源,用于重复利用节点

Sound:音乐资源

层级管理器

Canvas:画布,开发者用于在画布中创建精灵,节点等内容。

MainCamera:摄像机,玩家观察游戏世界的窗口,一个场景至少有一个摄像机,用于渲染场景,另外可新增空节点,UI节点,渲染节点;

 

04方案实现 

使用cocos creator开发创建场景scene,分别为:start(开始页)、main(游戏主页)、historyScore(历史分数页)、end(游戏结束页)

1、公共部分

设计所有场景自适应宽高尺寸,size为w:640,h:1136,选中层级里的canvas元素

canvas层级下创建sprite,并在资源管理器Texture拖动background到spriteFrame

2、开始页

标题,新增sprite,拖入“shoot_copyright“

小飞机动画,新增animation节点,将资源管理下animation文件夹下的game_loading拖入至default Clip,clips是可以通过脚本访问的动画clip列表,勾选playOnLoad即游戏运行后自动播放动画

开始按钮,新增button节点,自带label文本节点,可先设置按钮背景图,再改label为“开始游戏”

点击开始游戏触发场景切换,在资源管理Script文件夹下新增start.js,主要申明动画节点对象,properties是脚本对象里的自定义属性,可用于拖入节点,编辑等操作;

将start.js拖入至层级canvas下,并将game_loading动画节点拖入至GameLoading中;

button按钮需设置Click Events为1,添加层级中的start节点,设置函数

代码说明:

this.game_loading.getComponent(cc.Animation);//是获取当前属性game_loading动画节点

gameloading&&gameloading.play();//当该节点对象存在时,执行动画播放事件play()

cc.director.preloadScene(‘main‘);//使用cc.director导演对象调用preloadScene预加载main场景

3、游戏主页(事件拆分)

暂停按钮,分数,炸弹夹,新增button、label、sprite(子节点label);

设置暂停按钮普通状态和按下等背景图(达到按下状态变化)

绑定点击事件pauseClick

代码说明:

根据当前节点对象eState值判断是否等于游戏常量值,为1时,游戏暂停,停止飞机、子弹、英雄机、背景音乐执行事件;为2时,游戏继续,飞机、子弹、英雄机、背景音乐开始执行;

分数和炸弹夹展示,英雄机的子弹碰撞敌机销毁后加分、英雄机主体碰撞BUFF后改变炸弹夹展示英雄机,作为主要节点,使用sprite作为飞机模型,绑定hero.js,添加polygonCollider碰撞组件,添加animation组件作为英雄机动态化。

hero.js主要设置4个属性,主角碰撞敌机后爆炸预制资源、游戏结束音乐、main主函数节点、主角子弹组生成

当主角碰撞时执行onCollisionEnter事件。判断其碰撞的节点是BUFF还是敌机。

敌机随机从顶部外向下生成,共3种敌机,小、中、大;

name:敌机名称,

freqTime:敌机生成时间(s),

initPollCount:初始对象池,

prefab:预制体

有对象池之后,随机生成敌机,并给每个敌机绑定回收机制

英雄机与敌机的碰撞

绿色连接线为多边缘碰撞,需碰撞组件生成。

子弹生成与碰撞

4、Game Over页

渲染当前分数,根据cc.sys.localStorage保存的本地数据获取并设置label的string属性

给每个按钮button绑定对应事件

5、历史成绩页

Sprite作为背景框架列表,scrollview作为滚动容器组件,加上mask遮罩层组件,加上scrollbar实现内容在可视区域内展示,场景加载时,会遍历分数对象,在根据cc.instantiate克隆该prefab节点,用于添加子节点到scrollContent节点内容中,并初始化该子节点的展示内容score和time;

end~~

以上就是所有场景scene对应的功能。

还有下期小游戏说明,敬请期待哦~~

在公众号后台回复“我要体验”让程序员小哥哥拉你体验游戏哦~~

原文地址:https://www.cnblogs.com/migufe/p/10872984.html

时间: 2024-07-30 03:18:08

无聊吗?写个【飞机大战】来玩吧(上篇)的相关文章

android:如何用一天时间,写出“飞机大战”这样的游戏!(无框架-SurfaceView绘制)

序言作为一个android开发者,时常想开发一个小游戏娱乐一下大家,今天就说说,我是怎么样一天写出一个简单的"飞机大战"的.体验地址:http://www.wandoujia.com/apps/edu.njupt.zhb.planegame游戏分析玩过"飞机大战"游戏的都知道,飞机大战中的主要"角色"有:1.玩家飞机2.敌方飞机3.玩家飞机发送的子弹4.敌方Boss飞机发送的子弹我们需要控制的有:1.绘制屏幕内的角色2.控制角色的逻辑,比如:敌方

android:怎样用一天时间,写出“飞机大战”这种游戏!(无框架-SurfaceView绘制)

序言作为一个android开发人员,时常想开发一个小游戏娱乐一下大家,今天就说说,我是怎么样一天写出一个简单的"飞机大战"的. 体验地址:http://www.wandoujia.com/apps/edu.njupt.zhb.planegame 源码:https://github.com/nuptboyzhb/newplanegame 游戏分析 玩过"飞机大战"游戏的都知道,飞机大战中的主要"角色"有:1.玩家飞机2.敌方飞机3.玩家飞机发送的子

Python版飞机大战

前面学了java用java写了飞机大战这次学完python基础后写了个python版的飞机大战,有兴趣的可以看下. 父类是飞行物类是所有对象的父类,setting里面是需要加载的图片,你可以换称自己的喜欢的图片,敌机可以分为敌机和奖励,enemy为普通敌人的父类,award为奖励敌机的父类. 各个类的基本属性 主类的大概逻辑 具体的代码: settings配置 import pygame class Settings(object): """设置常用的属性"&quo

500行代码,教你用python写个微信飞机大战

这几天在重温微信小游戏的飞机大战,玩着玩着就在思考人生了,这飞机大战怎么就可以做的那么好,操作简单,简单上手. 帮助蹲厕族.YP族.饭圈女孩在无聊之余可以有一样东西让他们振作起来!让他们的左手 / 右手有节奏有韵律的朝着同一个方向来回移动起来! 这是史诗级的发明,是浓墨重彩的一笔,是-- 在一阵抽搐后,我结束了游戏,瞬时觉得一切都索然无味,正在我进入贤者模式时,突然想到,如果我可以让更多人已不同的方式体会到这种美轮美奂的感觉岂不美哉? 所以我打开电脑,创建了一个 plan_game.py-- 先

微信飞机大战游戏开发

原文出自:方杰|http://fangjie.sinaapp.com/?p=366转载请注明出处 这学期上了一学期的Windows游戏开发课程,学期末的时候所以决定做一个微信飞机大战的小游戏. 不同于微信手机上的飞机大战,这是一个Win32平台下游戏.Win32项目,VS2008开发平台,利用我的老师写的TinyEngine微型游戏引擎开发. TinyEngine引擎的相关源码及介绍参见:https://github.com/JayFang1993/TinyEngine 飞机大战游戏的相关源码参

安卓飞机大战(二) SurfaceView实现自制背景

用SurfaceView写一个自制的背景图,并且可以移动,加上安卓飞机大战(一)中的BackgroundManager类,可以直接使用 GameView代码: public class GameView extends SurfaceView implements SurfaceHolder.Callback,Runnable{    private SurfaceHolder hd=null;    private Canvas canvas=null;    private Backgrou

android:“新版飞机大战”源代码开源啦!

今天10.24,为了纪念程序员的节日,把之前写过的一个"飞机大战"的一个源代码开源了. 源代码地址:https://github.com/nuptboyzhb/newplanegame 豌豆荚Demo:http://www.wandoujia.com/apps/edu.njupt.zhb.planegame 截图: ------------------------------------------------------------------- 更多交流,Android开发联盟QQ

cocos2dx 3.0 飞机大战

因为课程须要.然后又水平有限.所以写了个飞机大战.加上不会画画.所以图片资源也是从微信apk解压出来的,设计思路參考的偶尔e网事. 闲话不说.先讲一下设计.大体上一共分为3个场景.场景以下是Layer 開始场景:WelcomeScene -->WelcomeLayer  类似欢迎界面 游戏主场景:GameScene  --> GameLayer  游戏元素加入 和 碰撞检測 结束场景:GameOverScene -->GameOverLayer 然后是游戏的元素,在GameLayer加入

web版canvas做飞机大战游戏 总结

唠唠:两天的时间跟着做了个飞机大战的游戏,感觉做游戏挺好的.说是用html5做,发现全都是js.说js里一切皆为对象,写的最多的还是函数,都是函数调用.对这两天的代码做个总结,希望路过的大神指点一下,我对这个游戏的思路,可改进优化的代码. 先说一下游戏的基本内容: 打飞机(不要想歪了),有鼠标控制移动英雄机,子弹自动射击:敌机从上而下,有三种敌机: 先说下HTML代码(主要就是这一行): <canvas id="canFly" width="480" heig