脚本宝典收集整理的这篇文章主要介绍了html5教程-闲扯游戏编程之html5篇--山寨版《flappy bird》，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 　新年新气象，最近事情不多，继续闲暇学习记点随笔，欢迎拍砖。之前的〈简单游戏学编程语言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教程，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的html5教程-闲扯游戏编程之html5篇--山寨版《flappy bird》全部内容，希望文章能够帮你解决html5教程-闲扯游戏编程之html5篇--山寨版《flappy bird》所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。