cocos 创建一个js项目_如何使用Cocos2d-JS引擎快速开发一个微信游戏?
今天我们来介绍一下如何使用Cocos2d-JS引擎快速开发一个微信游戏《来自喵星的你》。
1.Cocos2d-JS引擎
2.Cocos Code IDE
Cocos Code IDE是基于 Eclipse的跨平台 IDE,可帮助开发者便捷地创建游戏工程、编写调试代码、实时查看修改效果、并最终直接发布成可上架的安装包。
官方下载地址:http://cn.cocos2d-x.org/download/
官方JS指南:http://cn.cocos2d-x.org/tutorial/show?id=1173
3.游戏
《来自喵星的你》主角是一只喵星小喵咪。他的使命是在危险的地球上铲除汪星人(为什么这两个星球的主战场要设置在地球上,我也没想通,不要在意这些细节嘛。。。),配角就是一群不断产生的汪星人,玩家需要控制喵星人的移动和攻击来躲避或者打败汪星人,打败的越多分数越高,如果喵星人被打败了,游戏结束,这个时候就可以把你的成绩分享给你的好友,比一比谁更牛。
游戏无外乎就是各种游戏内的对象根据你所设定的逻辑或者用户的交互运行一系列动画而已。明白了这一点,我们就开始动手来开发一个已经在微信上刷屏刷的一塌糊涂的《来自喵星的你》,想想是不是有点小激动。
我们先简单介绍一下这个游戏的结构,
A.不要主菜单不要一堆乱七八糟的东西,一进游戏就开始玩,越简洁越能抓住用户。
B.游戏的主界面,玩家操作界面和分数标签。
C.喵星人只有一只,汪星人随着时间一直产生。
D.游戏结束显示游戏结束的界面,可以重玩也可以分享。所以这是个单场景游戏。
1)window.onload函数是Cocos2d-JS游戏的入口。在这里,我们加载了资源后进入到游戏场景。cc.LoaderScene.preload(["catnorrisd.png", "pg.png", "arrow.png", "end.png"], function () {
cc.director.runScene(new MyScene());
MyScene就是游戏的主场景了,MyScene从cc.Scene继承而来。进入游戏后,引擎会调用onEnter函数,所以我们可以在onEnter函数里初始化整个游戏场景UI和处理触摸相关的逻辑。
2)创建分数标签
比如,创建一个分数标签,很简单,只需要初始化标签的属性,并添加到场景中即可。this.scoreLabel = UI.scoreLabel = new cc.LabelTTF("0", "黑体", 24, cc.size(150, 30), cc.TEXT_ALIGNMENT_LEFT);
this.addChild(this.scoreLabel);
this.scoreLabel.attr({
x:30,
y:cc.director.getVisibleSize().height - 25,
strokeStyle: cc.color(0,0,0),
lineWidth: 2,
color: cc.color(255,150,100),
anchorX:0.1
});
3)处理触摸逻辑
如何捕获用户的触摸?Cocos2d-JS提供了一个很方便的接口,我们只要在游戏的场景中调用
cc.eventManager.addListener
重写下面三个函数就可以了。onTouchBegan:function(touch, event);
onTouchMoved:function(touch, event);
onTouchEnded:function(touch, event);
从命名就可以看出来这三个函数是处理触摸的三个时间点。这里要注意的是,如果我们根据触摸的时间来判断用户是长按还是点击,如果是长按,喵星人就会移动,如果是点击,喵星人就会进行攻击。目标点坐标怎么获取呢?touch参数暴露咯。。。
4)主角登场
喵星人终于要出来了,为了方便操作喵星人,我们把它封装为一个类Cat,从cc.Sprite继承而来。ctor构造函数初始化了喵星人的状态。ctor:function(){
this._super("catnorrisd.png", cc.rect(144,148,70,32));
this.attr({
anchorX:0.5,
anchorY:0
});
this.scheduleUpdate();
this.idle();
},
5)状态机
从上面的代码我们可以看到有2个奇怪的函数调用scheduleUpdate()和idle(),又是做什么用的呢?这里我们把喵星人设置为状态机模式。给定了喵星人可能的几个状态,idle,walking,attacking,dieing和dead。
同样的调用walk(),attack()等等也会切换喵星人的状态。那这些只是状态的切换,如何表现这些状态呢?
假如此时是walk的状态,喵星人会有一个左右摇晃的动作。this.runAction(cc.sequence(cc.rotateTo(0.12, -3), cc.rotateTo(0.12,3)).repeatForever());
cc.rotateto是一个旋转动作。Sequence是一个连续动作,它把2个rotateTo连接在一起,按顺序执行。而repeatForever表示这个动作循环进行。
同理,2种汪星人Doge和Husky也被封装为状态机的模式,然后后Manager对象统一进行管理,Manager对象主要做的事就是定时产生汪星人。
6)碰撞检测
碰撞检测同样在每帧进行,主角喵星人是一个精灵,在游戏看来它只是一块矩形纹理,汪星人同样也是,即便有的地方是透明的。所以这里采用的方式是检测喵星人的位置和汪星人的位置,一旦距离低于我们设置的值就判定为碰撞。if(cc.pDistance(this.target.getPosition(),this.getPosition())
...
如果喵星人被打败后,显示游戏界面,即UI对象。在这里可以重新游戏,也可以进行微信分享。
7)微信分享
这么碉堡的游戏怎么能少得了微信分享功能呢?分享功能的代码可以在index.html中看到。Api.shareToFriend(wxFriend, wxCallbacks);
Api.shareToTimeline(wxData, wxCallbacks);
Api.shareToWeibo(wxData, wxCallbacks);
其中wxFriend.desc和wxData.desc表示内容描述,可以在游戏结束的时候会进行修改。其他字段同样也可以在这里进行修改,比如链接,图标等等。document.title = window.wxData.desc = "喵星刷屏!喵获得"+UI.score+"分,在众喵中排名"+(0|(percent*100))+"%,尼能超过喵吗!";
document.title = window.wxFriend.desc = "我拿了"+UI.score+"分,战胜了"+ UI.pg +"个汪,超越了"+(0|(percent*100))+"%的好友!你能超过我吗";
4.总结
可以看到,《来自喵星的你》只用了一个js文件就搞定了,使用Cocos2d-JS引擎可以高效快速方便地开发一个JS游戏,只要有了Cocos2d-JS和Cocos Code IDE,你也能轻松、快速地打造出一款趣味的优秀游戏。
目前微信游戏平台已成为国内最高人气的平台之一,并且诞生出了许多成功作品。借助Cocos2d-JS和Cocos Code IDE,从此开发者可以告别繁琐的工序,让开发来得更有效率。也许下款微信大热之作就属于你哦!
5.源码下载地址和效果图
游戏效果图:
cocos 创建一个js项目_如何使用Cocos2d-JS引擎快速开发一个微信游戏?相关推荐
- Java如何接手别人项目_程序员必备技能——怎样快速接手一个项目
作为一个程序员,我们很少能从头到尾参与一个新项目的开发.如果你经常开发的是新项目,那你真是太幸福了. 更多的情况是半路进入一个项目组进行开发,或者是有其他同事离职了,之前由他维护的系统转交给你维护. ...
- 品达物流TMS项目_第6章 数据聚合服务开发(pd-aggregation)
品达物流TMS项目_第6章 数据聚合服务开发(pd-aggregation) 文章目录 品达物流TMS项目_第6章 数据聚合服务开发(pd-aggregation) 第6章 数据聚合服务开发(pd-a ...
- 【Java速成教学】桌球游戏项目_教你用最短的时间开发桌球小游戏_Java初学者项目
Java小游戏项目回归!今天给大家带来的是桌球游戏~ 本课程面向刚入门或者有一定Java基础的人群,帮助学员理解面向对象编程,并将基础知识进行实际应用,最终目标为开发出一个功能强大的桌球游戏.[Jav ...
- 有了 serverless,前端也可以快速开发一个 Puppeteer 网页截图服务
更多云原生技术资讯可关注阿里巴巴云原生技术圈. Puppeteer 是什么? puppeteer 官网的介绍如下: Puppeteer is a Node library which provides ...
- Serverless 实战 —— 前端也可以快速开发一个 Puppeteer 网页截图服务
Serverless 实战 -- 前端也可以快速开发一个 Puppeteer 网页截图服务 更多云原生技术资讯可关注阿里巴巴云原生技术圈. Puppeteer 是什么? puppeteer 官网的介绍 ...
- FastAPI:快速开发一个文本转语音的接口
这段音频就是本文的接口生成的. Python Web 开发方面有一个很重要的环节就是开发接口,开发接口性能最好的工具就是闪电侠 FastAPI[1],正如它的名字一样,是非常快的 API.当然,还有一 ...
- uni-App快速开发一个安卓应用
uni-App快速开发一个安卓应用 本期将会用到的开发工具及SDK: 1,[HBuilderX][https://www.dcloud.io/] 2,[Android Studio][http://w ...
- 如何快速开发一个App手机应用
随着智能手机的不断普及,Adroid.IOS APP应用越来越多,不仅方便和丰富了我们的生活,同时也让许多企业都想在移动端分得一杯羹或者为自己的企业开发一个手机应用,但通常这些企业可能没有自己的技术团 ...
- 如何快速开发一个完整的ios直播app
如何快速开发一个完整的iOS直播app 一.个人见解(直播难与易) 直播难:个人认为要想把直播从零开始做出来,绝对是牛逼中的牛逼,大牛中的大牛,因为直播中运用到的技术难点非常之多,视频/音频处理,图形 ...
- 使用.NET Core快速开发一个较正规的命令行应用程序
程序员的世界,命令行工具一直是"体验非常友好"的工具,也能自动化完成很多事情,同时还能结合shell来进行某项任务的批处理(脚本).在.NET Core中,命令行应用程序是基础,但 ...
最新文章
- TypeScript的推介与应用
- python2.7获取当前脚本目录
- GitLab初次安装后,登录GitLab网页的管理员账号和密码各是什么?
- scrapy框架的概念和流程
- js获取一周从开始到结束日期范围
- 【Javascript 拾遗之三】Closure 闭包
- oracle standby审计,监控oracle standby
- SublimeText集成印象笔记插件简略步骤
- 裁剪好的视频如何去除黑边?
- oracle siebel crm 8.0,Solix实现Oracle Siebel CRM 8.1整合
- iOS程序上架到appStore/已上线软件升级更新教程
- 论如何设计博客分类标签系统
- Cef开发学习 - Windows平台简易的Cef浏览器,支持下载管理和多标签管理
- 学会这些,不做委屈的项目经理
- 爱创课堂vue视频资料
- Loki 收集Nginx日志以 grafana 可视化展示
- mac删除global protect
- 迪米特法则(LOD)
- eclipse中显示代码行数
- 在 Android 模拟器上运行 ARM 应用
热门文章
- CNN(卷积神经网络)、RNN(循环神经网络)、DNN(深度神经网络)概念区分理解
- 明晰当下洞见未来 做区块链你还需要这四项技能
- Python3快速入门——(2)list和tuple(列表和元组)
- python 环境问题
- esxi update patch
- libvirt API管理hypervisors
- 关于PC机相关系统的远程桌面协作的相关介绍和配置(转帖整理)
- 1分钟学会python,分分钟钟学会Python -基础运算符
- java中如何获得屏幕的宽度和高度,android-如何获取屏幕的宽度和高度
- xcode打包ipa_codesign签名ipa