闲扯游戏编程之html5篇--山寨版《flappy bird》
一、源码框架介绍
这个游戏呢,采用开源的htML5游戏引擎melonJS作为框架,这个引擎比较轻量级,比较简单易懂。了解完源码整体框架就明白了整个引擎的框架了。
首先看一下游戏入口这里(game.js):大部分是框架相关的,非框架代码则是data的补充定义,用户按键事件绑定这些。
复制代码
VAR game = {
data : {
score : 0,
timer: 0,
start: false
} ,
"onload" : function () {
if (!me.video.inIT("screen", 900, 600, true, 'auto')) {
alert("Your browser does not support HTML5 canvas.");
return;
}
me.audio.init("mP3,ogg");
me.loader.onload = this.loaded.bind(this);
me.loader.PReload(game.resources);
me.state.change(me.state.LOADING);
} ,
"loaded" : function () {
me.state.set(me.state.MENU, new game.TitleScreen());
me.state.set(me.state.play, new game.PlayScreen());
me.state.set(me.state.GAME_OVER, new game.GameOverScreen());
me.state.transition("fade", "#000", 100);
me.input.bindKey(me.input.KEY.SPACE, "fly", true);
me.input.bindTouch(me.input.KEY.SPACE);
me.state.change(me.state.MENU);
}
} ;
复制代码
onload 预加载的game.resources主要是图片如下的一些素材。
新年新气象,最近事情不多,继续闲暇学习记点随笔,欢迎拍砖。之前的〈简单游戏学编程语言python篇〉写的比较幼稚和粗糙,且告一段落。开启新的一篇关于javascript+html5的从零开始的学习。仍然以咱们有兴趣写的小游戏开始,〈flappy bird〉最近真是火的离谱,我也是昨天才开始找这个游戏试玩一下,果然难度不小,只能玩到33分了 ,哈哈。这游戏的评论网上已经铺天盖地了,这里不做过多评论,毕竟个人属于这个移动游戏圈子之外的。不过还是忍不住说一下,这游戏创意已经不算新颖,像素级的入门游戏精美度更是差上很多,开发难度也就是入门级的水平(相对来说)。不过作为菜鸟的门外汉来说,这游戏的设计思路和开发细节还是比较值得新手去研究和作为练手的案例研究一下。于是找到网上牛人放出的山寨版《flappy bird》之clumsy-bird,来简单研究一下源码吧,顺便从零学习一下canvas和Js一些东西,作为记录。
一、源码框架介绍
这个游戏呢,采用开源的html5游戏引擎melonJS作为框架,这个引擎比较轻量级,比较简单易懂。了解完源码整体框架就明白了整个引擎的框架了。
首先看一下游戏入口这里(game.js):大部分是框架相关的,非框架代码则是data的补充定义,用户按键事件绑定这些。
复制代码
var game = {
data : {
score : 0,
timer: 0,
start: false
} ,
"onload" : function () {
if (!me.video.init("screen", 900, 600, true, 'auto')) {
alert("Your browser does not support HTML5 canvas.");
return;
}
me.audio.init("mp3,ogg");
me.loader.onload = this.loaded.bind(this);
me.loader.preload(game.resources);
me.state.change(me.state.LOADING);
} ,
"loaded" : function () {
me.state.set(me.state.MENU, new game.TitleScreen());
me.state.set(me.state.PLAY, new game.PlayScreen());
me.state.set(me.state.GAME_OVER, new game.GameOverScreen());
me.state.transition("fade", "#000", 100);
me.input.bindKey(me.input.KEY.SPACE, "fly", true);
me.input.bindTouch(me.input.KEY.SPACE);
me.state.change(me.state.MENU);
}
} ;
复制代码
onload 预加载的game.resources主要是图片如下的一些素材。
觉得可用,就经常来吧! 欢迎评论哦! html5教程,巧夺天工,精雕玉琢。小宝典献丑了!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: 闲扯游戏编程之html5篇--山寨版《flappy bird》
本文地址: https://pptw.com/jishu/586381.html