闲扯游戏编程之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主要是图片如下的一些素材。