HTML5技术教程:制作网页游戏

  (一)游戏规则:
 
  1、开始游戏时,手机出现在最上面一行的任意一格;
 
  2、开始游戏时,彩色石头随机从上往下落,填满所有的方框,相同的三个石头不能相邻的排在一列或者一行;
 
  3、手机从上移动到最下面一行的任意一格,就算胜利,或游戏时间结束,消除的石头数量超过30个也算胜利。
 
  (二)、游戏玩法
 
  只要三个相同的石头相邻的排在一列或者一行,他们就会消失,同时上面的石头往下落,落到消失的石头位置上。
 
  游戏动画演示:
 
  设计思路:
 
  游戏开始首先生成一个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的用法后再制作稍微复杂的游戏。

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h61776.shtml

张贴在2