本文档要分析的案例是一个爱消除的网页小游戏，从中可以体会一些Mugeda API的用法和使用Mugeda动画制作网页游戏的方法。
（一）游戏规则：
1、开始游戏时，手机出现在最上面一行的任意一格；
2、开始游戏时，彩色石头随机从上往下落，填满所有的方框，相同的三个石头不能相邻的排在一列或者一行；
3、手机从上移动到最下面一行的任意一格，就算胜利，或游戏时间结束，消除的石头数量超过30个也算胜利。
（二）、游戏玩法
只要三个相同的石头相邻的排在一列或者一行，他们就会消失，同时上面的石头往下落，落到消失的石头位置上。
游戏动画演示：
https://en.mugeda.com/client/preview_css3.html?id=c9e21a03
设计思路：
游戏开始首先生成一个8*8 = 64的石头阵列，会从上到下一次落下。阵列的石头会存放到一个数组中。每个石头都有相应的类型。
对石头对象添加inputstart 、inputend事件监听。实现点击输入和拖动输入。当有有效输入时，交换对应的两个相邻的石头。等待检测时发现是否会形成消掉石头的条件，如果没有则再交换回来。
游戏开始后，会在每帧都调用一次runcheck()函数来检测是否有生成消掉石头的条件。检测的方式是：先按行遍历一遍数组，看有没有连续超过三个相邻石头的类型是相同的。然后再按列遍历一遍数组，看有没有连续超过三个相邻石头的类型是相同的。如果有，则将相同的石头消除，并生成新的石头，并从上到下依次落下。
关键点：
1.生成新的石头对象：
Game.createStone = function (type,index,posY)
{
var j = Math.floor(index / hang);
var i = num - hang * j;
var instance = mugeda.createInstanceOfSymbol('stone' + type);
scene.appendChild(instance, null);
instance.left = (kuan * i);
instance.top = posY;
instance.addEventListener("inputstart", onStart);//监听inputstart事件
instance.addEventListener("inputend", onClick);//监听inputend事件
instance.scene.setSegment("static", 0,0,false);//静态segment
instance.scene.setSegment("run", 1,10,true);//消失特效的动态segment
instance.scene.playSegment("static");
return instance;
};
函数参数:
type Number 要生成的石头对象的类型，一共有7种不同的石头。
index Number 要生成的石头在数组中的下标。
posY Number 生成石头的Y轴坐标，因为要实现新生成的石头依次落下。
生成的石头添加到数组中
var instance = Game.createStone(type,(j* hang + i),posY);
stoneArray.push({obj:instance, type:type,v:v0});
2.消除石头
从舞台场景中移除石头对象
scene.removeChild(stoneArray[xiaoArray[x].num].obj);
stoneArray[xiaoArray[x].num].obj = null;
stoneArray[xiaoArray[x].num].type = 0;
3.生成新的石头对象
var type = Math.floor(Math.random() * 100) % 6;
var instance = game.createStone(type,(i - x * hang),posY);
stoneArray[i - x * hang].type = type;
stoneArray[i - x * hang].obj = instance;
总结，通过设计一个简单的小游戏可以更深刻的理解Mugeda API的用法。具体用到的API接口请参考[Mugeda HTML5技术教程之11]Mugeda API简介。有关游戏的逻辑则因人而异，这里不做具体讨论，建议是做的过程先易后难，先做最简单的游戏充分熟悉了Mugeda API的用法后再制作稍微复杂的游戏。下一节我们将要做案例分析：制作移动教育课件。
