使用CoffeeScript+Browserify开发cocos2d-js游戏的体验

使用cocos2d-js一年多了,从早期的2.1.2开始到现在的3.0 对javascript/cocos2d-js的使用越来越顺手。不过目前涉及的项目都只是卡牌类回合制游戏,还有自己做的一些益智类小游戏。每次自己做一个小游戏或demo都需要从原来的项目中Copy文件并修改后才能正常使用,所以一直在想能否写一个自己的类库。

由上述原因,一直在思考如何模块化的构建cocos2d-js工程代码,有些基础的代码可以反复利用。无意见看到cocos2dx.org官网上的文章《MVC模式开发cocos2d-js游戏的系列文章》于是想尝试使用CoffeeScript+Browserify的方式实现一个游戏demo,以验证能实现模块化的目的。

一. CoffeeScript 

CoffeeScript 是一门编译到 JavaScript 的小巧语言. 关于CoffeeScript的详细可以看他的网官网站:

www.coffeescript.org

www.coffeescript.cn

早在一年前就了解过coffee,感觉很好,但一直没机会用。逮住这个机会尝试一下,同时还有以下原因:

1.感觉coffee很爽,但没有实践过,完全是个人的喜好,喜欢折腾。

2.感觉可以偷懒,CoffeScript语法简洁,还避开javascript的一些坑。

3.在WebStrom中同样可以支持代码补全\调试,使写起代码很享受。

4.可以装逼, 让人感觉很牛的样子!

二. Browserify

Browserify 可以让你使用类似于node的require() 的方式来组织浏览器端的 Javascript 代码,通过预编译让前端 Javascript 可以直接使用 Node NPM 安装的一些库。

Cocos2d-JS MVC模块化开发系列文章中专门有一篇讲解Browserify的使用,大家可以看看。在cocos2d-js中不管我们使用的是引擎代码还是自己写的类、数据定义其实大都是使用的全局变量。对于工程中使用引擎暴露的接口没有什么问题,因为我们就是依赖(爱)上他了。但我们想重用自己代码怎么办呢?如何做到模块化?nodejs的Browserify可以帮助到我们。

1.不用再去理会project.json中的jsLlist数组了

记得最早做cocos2d-js项目时,手工填写jsList数组,而且还要注意加载的依赖顺序。后来自己写了个蹩脚的脚本工具来生成才得以解脱。使用Browserify后可以完全不用理会jsLlist了,因为我们的所有代码将会被Browserify编译输出到一个文件中。

    2.解决名字污染,代码不易被破坏

在js中可以任意为已经生成的对象动态增删属性或方法,这使得js非常的灵活。但随意滥用会导致代码可读性降低,或者误用覆盖正常的代码,而且还不易发现。使用Browserify可以减少这类问题的发生。

3.使用require与exports来管理你的代码

使用别的js文件中的类、数据定义时需要require(‘xxx.js‘), 如果你想导出类、方法、数据定义时使用exports来暴露你提供的功能。这里稍微会比以前的写法要多动点脑子,因为我在头几次的时候遇到好几次出错。

三. coffeeify插件

我使用了CoffeeScript来编写游戏代码,CoffeeScript代码是需要编译成js才能运行的。可以我又使用了Browserify,它也会预编译我的js代码,这下不知道该怎么办了。因为coffee代码中使用了require\exports这是Browserify提供的接口。先使用coffee的编译命令他们不认识require\exports,
如果先使用Browserify的命令编译他又不认识coffee代码。一下子感觉到心都凉了,不过我还是没放弃,经过一番的google搜索和折腾发现了coffeeify。coffeeify是Browserify的一个插件,它可以支持你使用coffeescript与js代码的混合开发。对我来说简直是太棒了。

使用方法:browserify -t coffeeify main.coffee --debug > main.js

四. 总结

终于大功告成,我做了一个简易的画线消除 + 对战的小游戏(单机)。目前只是个不完整的demo,但有基本的功能。

1.连接两个或两个以上相同颜色的珠子,后会激活他们飞出打击对方的珠子。

2.如果双方激活的珠子碰到,以剪刀、石头、布来判定谁吃掉谁。

3.阵型中的未激活的珠子会被对方激活的珠子吃掉。

代码github:https://github.com/ShawnZhang2015/chaoswars

做这个demo的过程中还是有些与以往不两同的体验,在html5上的开发、调试上感觉非常不错。在nantive上调试会有些不方便,只能调试打包后的js代码,而且都在一个文件中。还有不建议在不熟练javascript的前提下使用CoffeeScript,WebStorm调试起也有些小问题@member不能识别,有时断点不准确。还有就是代码风格你是否认同。Browserify对于改善代码的依赖有很大帮助,如果不在乎真机调试问题我认为是不错的选择。总的来说非常合适纯html5游戏中使用。感觉纯js+Browserify更合我的口味。

时间: 2024-12-24 15:50:34

使用CoffeeScript+Browserify开发cocos2d-js游戏的体验的相关文章

cocos2d 游戏开发:Cocos2d v3 "hello world"+显示飞船

V3 RC4 版本图片 显示一个飞船 将Chapter1中 SpaceCargoShip.png 文件 添加到项目里面. 代码在 init : CCSprite *spaceCargoShip = [CCSprite spriteWithImageNamed:@"SpaceCargoShip.png"]; [spaceCargoShip setPosition:ccp(200.0f,150.9f)]; [self addChild:spaceCargoShip]; 在上面的代码下增加如

Html5+Lufylegend.js游戏开发(一)引擎介绍及原理

Yorhom|2013-09-26 10:30|次浏览| 游戏开发(4)HTML5(124)游戏引擎(33)Lufylegend.js(1) Html5游戏开发最近受到很多开发者的关注.但是html5本身不是为游戏开发而量身定造的,所以开发起来十分麻烦.因此挑选好的引擎对游戏开发十分有帮助. 在游戏开发中,有这么几种程序语言: C++配合OpenGL(移动端游戏开发) C++配合DirectX(PC端游戏开发) Java (移动端游戏开发) ActionScript(网页游戏开发) html5在

使用Html5+C#+微信 开发移动端游戏详细教程 :(三)使用html5引擎搭建游戏框架

教程里的案例我们是通过H5游戏引擎开发,目前H5的游戏引擎比较好用的是白鹭,不过对于新手来说白鹭的开发环境和工具使用过于复杂,这里推荐一个国内大神编写的游戏引擎:lufylegend. 直接在页面引入Js文件,就可以开发了,运行效率非常高效,语法是仿AS3语法,懂C#的人上手会很快. Lufylegend引擎具体的API和使用方法可以参考官网和论坛: http://www.lufylegend.com/api/zh_CN/out/classes/FPS.html 之前微信上有一款"怪兽必须死&q

三年一个人使用虚幻引擎(UDK)开发的一个游戏心路

三年一个人使用虚幻引擎(UDK)开发的一个游戏心路 转载   出处来源http://mobile.51cto.com/news-488590.htm 对于我个人来说,完成她的意义不仅在与完成了一个儿时的愿望,也是一次战胜自我的旅程,3年的时光,经历了种种变荡.最终,通过压榨自己的业余时光,学习新语言,新游戏平台,3D建模,3D动画,美工,音效,FLASH,各种配置. 作者:来源:CocoaChina|2015-08-18 09:57 收藏 分享 这个游戏没有做任何宣传(这个帖子算是第一个吧),其

cocos2d js ClippingNode 制作标题闪亮特效

1.效果图: 之前在<Android 高仿 IOS7 IPhone 解锁 Slide To Unlock>中制作了文字上闪亮移动的效果,这次我们来看下怎样在cocos2d js 中做出类似的效果. 顺便给我公司的游戏打下广告.https://itunes.apple.com/cn/app/kuang-zhan-san-guo/id691116157? mt=8 2.效果原理 很easy.就是一张白色两边羽化的图片在标题上从左往右移动.可是普通的移动会穿帮.我们须要以标题作为模板来截取白色的图片

使用Laya引擎开发微信小游戏(上)

本文由云+社区发表 使用一个简单的游戏开发示例,由浅入深,介绍了如何用Laya引擎开发微信小游戏. 作者:马晓东,腾讯前端高级工程师. 微信小游戏的推出也快一年时间了,在IEG的游戏运营活动中,也出现了越来越多的以小游戏作为载体运营的活动类型,比如游戏预约,抢先试完等等,都收到了非常良好的效果. 在支持微信小游戏的游戏引擎中,Cocos,Egret,Laya都对小游戏的开发提供了很多强大的支持.前段时间正好抽空研究了一下这块的内容,现做一个总结,针对如何使用Laya引擎开发微信小游戏给大家做一下

UC前端‘搭积木’的模块化开发——scrat.js

模块化开发 将模块所需的js\css\img\tmpl维护在一起,一个模块一个目录 js渲染模板 css只关心模块内样式 开发团队心声:"我们希望每次研发新产品不是从零开始,不同团队不同项目之间能有可复用的模块沉淀下来." 模块生态 每个工程有_工程模块_和_生态模块_. 生态模块:基于_component规范_开发,部署到Github上,可以通过命令行工具将Github上的模块安装到工程中使用.比如:jQuery, iscroll, zepto.js, vue.js 安装命令: sc

微信公众平台开发(103) JS API支付

本文介绍如何使用JS API支付接口完成微信支付. 一.JS API支付接口(getBrandWCPayRequest) 微信JS API只能在微信内置浏览器中使用,其他浏览器调用无效.微信提供getBrandWCPayRequest接口供商户前端网页调用,调用之前微信会鉴定商户支付权限,若商户具有调起支付的权限,则将开始支付流程.这里主要介绍支付前的接口调用规则,支付状态消息通知机制请参加下文.接口需要注意:所有传入参数都是字符串类型! getBrandWCPayRequest参数如表6-5所

VS轻松开发Node.js应用

PTVS开发团队又开发出一款可以在VS里编写Node.js应用程序的插件--NTVS(Node.js Tools for Visual Studio),开发者可以在VS里轻松开发Node.js应用. NTVS是一款开源工具,遵循Apache开源许可,由微软和社区维护.适用于Node.js 0.10.20版或更高的版本上.NTVS具有可编辑.智能提示.分析.NPM.调式(本地和远程)等功能,并且还可以发布在Azure网站和Cloud服务上. Node.js可在32位和64位架构上运行,NTVS也同