用create.js开发H5小游戏（三）

开发奔跑吧小游戏详解先说一下需求：点击开始游戏按钮，进入游戏界面，一个小人在跑道上奔跑，途中会有路障，沿途会有相关的景点介绍（共有6个），小人跑到一个路标旁边会弹出一个景点介绍，此时游戏暂停，点击我知道了按钮，介绍消失游戏继续，如果碰到路障则需要答题，游戏暂停，弹出题目开始答题，若题目答对则游戏继续，题目答错则游戏结束。奔跑途中会收集水蜜桃，若跑到终点之前的时候收集到了5个水蜜桃则进入抽奖页面开始抽奖，若跑到终点还没有收集到5个水蜜桃则游戏结束。游戏二维码如下，只可在微信端打开。

首先引入相关文件，如create.js文件。下面这张图是游戏界面：

从上图中我们总结出一些图形的分类，第一类是背景图（这次游戏有三张背景图）；第二类是左右两侧的带着景点名称的路标；第三类是路障。每一类图形都可以放在一个容器中。奔跑类的游戏大同小异，有时候可以写成构造函数的形式，方便创建实例共享属性和方法；也可以定义成公共对象，方便在别的文件中调用。下面说一下代码思路：首先先定义好舞台的宽高，并且创建一个舞台，这个舞台就是游戏动画的承载元素。

this.canvasHeight = $(window).height();
this.stage = new createjs.Stage("jsGameCanvas");

接下来创建存放背景跑道、路标和路障的容器，并将其添加到舞台中，因为背景跑道有四张图片，所以将这些图片存放在一个数组中，然后遍历该数组依次存放到背景跑道的容器中，其中用Bitmap类生成静态图：

// 创建背景跑道
this.containerBg = new createjs.Container();
this.stage.addChild(this.containerBg );//将背景图容器插入到舞台
this.containerBg.y = 0;
for (var i = 0; i < 4; i++) {
var bitmapDown = new createjs.Bitmap(this.gameBgImg[i]);//生成游戏中的背景图
bitmapDown.y = -this.bgHeight * i;//确定背景图的纵坐标
this.containerBg.addChild(bitmapDown);//将生成的背景图插入到容器中
}
// 创建路障容器，其他几个容器同理
this.containerEnemy = new createjs.Container();
this.stage.addChild(this.containerEnemy);//将路障容器插入到舞台

接下来我们用SpriteSheet类创建游戏主角：

// 创建主角
var spriteSheet = new createjs.SpriteSheet({
images: [INIT_DATA.gameManSprite], //数组格式,精灵图的地址
frames: {
    width: 140,
    height: 199
},
animations: {
    run: {
        frames: [0, 1, 2, 3], //动画的帧序列
        speed: 0.2
    }
},
framerate: 10 //目标的播放帧率
});
this.runMan = new createjs.Sprite(spriteSheet, "run"); //生成奔跑小人
this.runMan.x = 250; // 110,250,390 小人的横坐标
this.runMan.y = this.canvasHeight - 280;//小人的纵坐标，以左下角为坐标原点，向上（y）为负值，向右（x）为正值
    this.stage.addChild(this.runMan);//将小人添加到舞台中

小人要有向左移动和向右移动的行为：

// 绑定左右事件
var that = this;//因为下面要对$(".page-game")绑定事件，所以要先一步将this赋值给that，以便保留最外层对象的this对象
    $(".page-game").bind("touchmove", function() {
        return false;//不触发touchmove事件
    })[0].addEventListener("touchstart", function(event) {
        var pageX = event.touches[0].pageX;
        if (pageX < 320) {
            that.turnLeft();
        } else {
            that.turnRight();
        }
    });
return this;

上述内容是游戏一开始就要渲染的内容，所以放在init()函数中。最后一部分代码中使用了turnLeft()方法和turnRight()方法，所以要在最外层对象中定义这两个方法：

// 绑定左右事件
turnLeft: function() { //110,250,390这些事奔跑小人所在的横向坐标位置
    if (this.runMan.x === 390) {
        this.runMan.x = 250;
    } else if (this.runMan.x === 250) {
        this.runMan.x = 110;
    }
},
turnRight: function() {
    if (this.runMan.x === 110) {
        this.runMan.x = 250;
    } else if (this.runMan.x === 250) {
        this.runMan.x = 390;
    }
},

huandie2012 / blog

用create.js开发H5小游戏（三） #5