今天杭州又下雨了，我被淋湿了。都是因为我的大狼狗坚持要骑电动车。昨天想买的那件帅气的雨衣还没买呢。但是大雨和飞机战争游戏更适合。本文来自我司同学王老吉。欢迎大家关注公众号，在公众号后台回复“我要体验”进群，就可以亲身体验大师（又帅又单身）用JavaScript编写的小程序游戏啦~~（貌似掘金高手不少，不好说啊~，我写个相亲帖给他）1.前言介绍微信小游戏是一款基于微信客户端的游戏。无需下载安装即可立即播放。体验轻，可以和微信好友一起PK、围观等，享受小游戏带来的乐趣。那么如何开发一款属于自己的小游戏呢？源码地址：github.com/A123asdo11/...（新版本的ccc已经不能正常使用，需要修复，文章作者花费了大量的时间和精力在ccc2以上的版本修复。0，在微信小游戏中正常运行）2.飞机大战微信小游戏简介1.大事记经典飞机大战是腾讯通信软件微信5.0版于2013年8月推出的一款内置经典小游戏。微信已经正式发布了微信内置的战机对战游戏，目前已下线。2.玩法玩家点击开始游戏，移动自己的大飞机。在避开其他迎面而来的飞机时，大飞机发射炮弹摧毁其他小飞机以获得积分。一旦你撞上另一架飞机，游戏就结束了。此时界面会显示玩家的战机战绩。点击历史积分后，可以看到“历史积分榜”。点击重新挑战继续重播。点击退出游戏后，返回等待开始游戏的页面。三、游戏介绍1）、首先你要知道飞机的分数，小飞机是1000分。中机4000点。大型飞机16000点。尽量不要去招惹中大飞机，很容易在爆炸之前下来，或者中大飞机跟在后面。2)手机的屏幕应该是高度敏感的。使用大屏幕的pad或者更长的手机来玩更有优势。（因为你可以提前看到前方的障碍物）3）尽量活得久一点，安全第一。安全的时候，也就是起步比较慢的时候，可以多打小飞机积点；遇到飞船可以向前攻击，摧毁它需要一段时间。4）如果你吃过蓝色双色贝壳，请不要犹豫，尽量多找，大地方打。最好随身携带一枚炸弹，以备关键时刻紧急救援之用。后面的速度很快，位面非常密集。5）洗手，手或屏幕上不能有汗渍、水渍、油渍等影响性能。保持手指和屏幕光滑。6)和传统的飞行器射击游戏一样，这款游戏中的飞行器是不会死的，但是飞行器上有一个点，大概是最核心的一块。只要不被敌机碰到，两边都是机翼的话，飞机是不会爆炸的，不过这个方法很难掌握。灵活的方法是通过隐藏在屏幕的最左边或最右边来隐藏中心部分。7)如果飞机上没有人，可以向朋友要。如果你的朋友在一定时间内没有给你飞机，或者没有朋友给你飞机，你不必担心。飞机会在一定时间后准备就绪，您可以继续赚取积分。8）游戏界面预览想要体验游戏的用户请关注我的公众号，并在消息中回复“我要体验”，我们将随机抽取幸运玩家。名额有限！！！3.游戏场景设计1）、开始场景A、主界面（公共背景图、动画小飞机）B、开始游戏按钮2）、游戏场景A、英雄机①、子弹（无限、红色）),超级子弹(限定,蓝色),子弹撞敌机②,英雄机移动,子弹跟随移动③,主角撞敌机B,敌机①,小中大型敌机随机生成②,敌机飞机生命值，得分C，BUFF（炸弹），（超级子弹，蓝色弹匣）D，暂停，得分，炸弹剪辑3），GameOver场景A，主角与敌机相撞后游戏结束，显示当前得分B，主界面上方显示历史最高得分C，玩家可以选择按钮，重新挑战，历史得分，退出游戏Cocoscreator工具预览目录结构：Scene:scene,Script:script，所有的脚本都在这里，Texture：图片资源和图片集资源，Animation：动画元素，Prefab：前载体资源，用来重用节点Sound：音乐资源层次管理器Canvas：画布，开发者用来创建精灵，节点等在画布中MainCamera：相机，玩家观察游戏在世界之窗中，一个场景至少有一个相机，用于渲染场景。另外可以添加空节点、UI节点、渲染节点；4.方案实现使用cocoscreator开发创建场景，分别为：start（起始页）、main（游戏首页）、historyScore（历史比分页）、end（游戏结束页）1.公共部分设计适配到所有场景的宽度和高度。大小为w：640，h：1136。在hierarchycanvaslevel中选择canvas元素创建一个sprite，将背景拖到资源管理器Texture中的spriteFrame2，起始页的标题，添加一个新的sprite，拖入“shoot_copyright”小平面动画，添加一个动画节点，将资源管理下的animation文件夹下的game_loading拖入到默认的Clip中，clips是一个动画片段列表，可以通过脚本访问。勾选playOnLoad，游戏运行后自动播放动画开始按钮。添加一个带有自己的标签文本节点的按钮节点。可以先设置按钮的背景图，然后将label改为“Startthegame”点击开始游戏触发场景切换，在资源管理脚本文件夹下添加start.js，主要声明动画节点对象,和properties是脚本对象中的自定义属性，可用于拖拽节点、编辑等操作为此，将start.js拖到图层画布，并将game_loading动画节点拖到GameLoading；button按钮需要设置ClickEvents为1，在layer中添加start节点，设置函数代码说明：this.game_loading.getComponent(cc.Animation);//获取当前属性game_loading动画节点gameloading&&gameloading.play();//当节点对象存在时，执行动画播放事件play()cc.director.preloadScene('main');//使用cc.director导演对象调用preloadScene预加载主场景复制代码3.游戏首页（事件拆分）暂停按钮、得分、炸弹文件夹、添加按钮、标签、精灵（子节点标签）；设置暂停按钮和Press的正常状态等待背景图片（实现按下的状态变化）绑定点击事件pauseClick代码说明：根据eState值判断是否等于游戏常量值当前节点对象。为1时，游戏暂停，飞机、子弹、英雄机、背景音乐停止。执行事件；为2时，游戏继续，飞机、子弹、英雄机、背景音乐开始执行；显示分数和弹夹，英雄机子弹撞到敌机并摧毁加分，英雄机本体撞到BUFF后弹夹显示改变英雄机，作为主节点，使用sprite作为飞行器模型，绑定hero.js，添加polygonCollider碰撞组件，添加动画组件作为英雄机动hero.js主要设置4个属性，主角与敌机。onCollisionEnter事件在主角与游戏结束音乐、主要功能节点、主角的子弹组发生碰撞时执行。判断碰撞到的节点是BUFF还是敌机。敌机从上到下随机生成。敌机有小型、中型、大型3种；name:敌机名称,freqTime:敌机生成时间(s),initPollCount:初始对象池,prefab:预制对象池之后随机生成敌机，每个敌机绑定一个恢复机制。英雄机与敌机碰撞的绿色连接线是多边碰撞，需要通过碰撞组件生成。子弹生成与碰撞4.GameOver页面渲染当前得分，根据保存在cc.sys.localStorage中的本地数据获取并设置label的字符串属性，并为每个按钮绑定相应的事件5.sprite历史比分页作为背景框列表，Scrollview作为滚动容器组件，加上mask遮罩层组件，加上滚动条显示可见区域的内容。场景加载时会遍历score对象，根据cc.instantiate克隆prefab节点添加子节点到scrollContent节点的内容，并初始化子节点的显示内容score和时间；(完)以上是所有场景对应的功能。由于文章内容较长，富婆拆分了部分内容，敬请期待下篇（如何制作图集、ani、prefab、musicclip资源、游戏部署、游戏上线）。文中如有错误，请指正~~欢迎关注公众号【Web前端漫谈】在公众号后台回复“我要体验”，让帅气的单身程序员小哥拉你进群体验游戏~~
