重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章主要介绍javascript中createjs小游戏开发的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
为台州等地区用户提供了全套网页设计制作服务,及台州网站建设行业解决方案。主营业务为成都网站设计、成都做网站、台州网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!1. 实现一个无缝连接的背景图,模拟出汽车在加速的状态
this.backdrop = new createjs.Bitmap(bg);this.backdrop.x = 0;this.backdrop.y = 0;this.stage.addChild(that.backdrop);this.w = bg.width;this.h = bg.height;//创建一个背景副本,无缝连接var copyy = -bg.height;this.copy = new createjs.Bitmap(bg);this.copy.x = 0;this.copy.y = copyy; //在画布上y轴的坐标为负的背景图长//使用createjs的tick函数,逐帧刷新舞台createjs.Ticker.addEventListener("tick", tick);function tick(e) { if (e.paused !== 1) {//舞台逐帧逻辑处理函数that.backdrop.y = that.speed + that.backdrop.y; that.copy.y = that.speed + that.copy.y;if (that.copy.y > -40) { that.backdrop.y = that.copy.y + copyy; }if (that.copy.y > -copyy - 100) { that.copy.y = copyy + that.backdrop.y; } that.stage.update(e); } }
2. 随机绘制障碍物
由于一条跑道肯定会有很多障碍物,对于超出屏幕的障碍物我们要进行‘资源回收’,否则游戏到后面会越来越卡顿。
// 删除越界的元素for (var i = 0, flag = true, len = that.props.length; i < len; flag ? i++ : i) {if (that.props[i]) {if (that.props[i].y > height + 300) { that.stage.removeChild(that.props[i]); that.props.splice(i, 1); flag = false; } else { flag = true; } } }
一共有3条赛道,我们不能出现3个道具同时出现在水平线上,因此我们会随机取1~2个值绘制障碍物。所有游戏我们都应该有参数去控制它的难易程度,免得临上线的时候,老板体验之后觉得游戏太难了……那就非常地尴尬了。 因此,我们会设置加速物体,减速物体,炸弹出现的比例,后期可以调整这个比例来设置游戏的难易程度。
var num = parseInt(2 * Math.random()) + 1, i;for (i = 0; i < num; i++) {var type = parseInt(10 * Math.random()) + 1;// 设置道具出现比例if (type == 1) {/绘制炸弹 } else if ((type >= 2) && (type <= 5)) {//绘制加速道具} else if ((type >= 6) && (type <= 10)) {//绘制减速道具 } }
第一次绘制完障碍物之后,会随机时间绘制下一次的障碍物。
var time = (parseInt(3 * Math.random()) + 1); //随机取1~3整数// 随机时间绘制障碍物setTimeout(function () { that.propsTmp = []; //清空 that.drawObstacle(obj); }, time * 400); //400ms ~ 1200ms
3.碰撞检测
我们用一个数组来存放汽车占的矩形区域,障碍物占的矩形区域,在每一次tick的时候循环遍历数组,看是否有重叠的,若有重叠,则发生了碰撞。
createjs的一些小知识:
1. 暂停和恢复舞台渲染
createjs.Ticker.addEventListener(“tick”, tick); function tick(e) { if (e.paused === 1) { //处理 } } createjs.Ticker.paused = 1; //在函数任何地方调用这个,则会暂停tick里面的处理 createjs.Ticker.paused = 0; //恢复游戏
2. 由于汽车会有加速,减速,弹气泡的效果。因此我们把这几个效果绘制在同一个container中,方便统一管理,对这些效果设置name属性,之后可以直接使用getChildByName获取到该对象。
container.name = ‘role’; //设置name值car = this.stage.getChildByName(“role”); //使用name值方便获取到该对象
3. 预加载 preload (createjs 的 preload 非常的实用)
一开始是自己写的预加载,后来发现createjs里面对图片是有跨域处理的,自己处理跨域的img就比较麻烦,所以直接使用createjs的预加载。
//放置静态资源的数组 var manifest = [ {src: __uri('./images/car_prop2_tyre@2x.png'), id: 'tyre'} ]; var queue = new createjs.LoadQueue(); queue.on('complete', handleComplete, this); queue.loadManifest(manifest); //资源加载成功后,进行处理 function handleComplete() { var tyre = queue.getResult('tyre'); //拿到加载成功后的img }
一般做一个游戏,我们正常都会构建一个游戏类来承载。 下面是一个游戏正常有的接口:
;(function () {function CarGame(){} CarGame.prototype = { init:function(manifest) {this.preLoad(manifest); //资源预加载//时间倒计时this.prepare(3, 3); //倒计时3秒this.bindEvent(); }, render:function() { this.drawBg(bg1); this.drawRole(car, effbomb, effquick); this.drawObstacle(obj); },//在游戏结束的时候批量销毁destroy:function(){//移除tick事件createjs.Ticker.removeEventListener("tick", this.tick);//暂停里程,倒计时clearInterval(this.changem); clearTimeout(this.gametime); },//由于期间用户可能切出程序进行其他操作,因此都需要一个暂停的接口pause:function() {//暂停里程,倒计时clearInterval(this.changem); clearTimeout(this.gametime);//暂停页面滚动createjs.Ticker.paused = 1; },//重新开始游戏reStart:function(){ this.destroy(); this.init(manifest); }, gameOver:function(){ //显示爆炸效果 var car = this.stage.getChildByName("role"); car.getChildByName('bomb').visible = true; car.getChildByName('quick').visible = false; this.destroy(); } } })()
以上是“javascript中createjs小游戏开发的示例分析”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联成都网站设计公司行业资讯频道!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。