[Mugeda HTML5技术教程之14]案例分析：制作网页游戏

本文档要分析的案例是一个爱消除的网页小游戏，从中可以体会一些Mugeda API的用法和使用Mugeda动画制作网页游戏的方法。

（一）游戏规则：

1、开始游戏时，手机出现在最上面一行的任意一格；

2、开始游戏时，彩色石头随机从上往下落，填满所有的方框，相同的三个石头不能相邻的排在一列或者一行；

3、手机从上移动到最下面一行的任意一格，就算胜利，或游戏时间结束，消除的石头数量超过30个也算胜利。

（二）、游戏玩法

只要三个相同的石头相邻的排在一列或者一行，他们就会消失，同时上面的石头往下落，落到消失的石头位置上。

游戏动画演示：

https://en.mugeda.com/client/preview_css3.html?id=5d873601

设计思路：

游戏开始首先生成一个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的用法后再制作稍微复杂的游戏。下一节我们将要做案例分析：制作移动课件。

[Mugeda HTML5技术教程之14]案例分析：制作网页游戏相关推荐

[Mugeda HTML5技术教程之16]案例分析：制作跨屏互动游戏
本节我们将要做一个跨屏互动应用的案例分析,该应用时给一家商场做活动使用的,是一个跨屏爱消除游戏.PC端页面显示在连接在PC的大屏幕上,参与活动的玩家可以用自己的手机扫描PC端页面上的二维码,连接成功后 ...
[Mugeda HTML5技术教程之2] Mugeda HTML5富媒体平台简介
[Mugeda HTML5技术教程之2] Mugeda HTML5动画平台简介摘要:Mugeda提供基于云的平台,供开发人员和设计人员快速的开发.发布和统计基于HTML5的,包含丰富动画和交互的移动 ...
[Mugeda HTML5技术教程之1] HTML5: 生存还是毁灭
[Mugeda HTML5技术教程] 开篇: HTML5 - 生存,还是毁灭摘要:HTML5并不试图解决所有问题.但是在很多适合的场合,HTML5是不二选择. To be, or not to be ...
[Mugeda HTML5技术教程之12]制作跨屏互动应用
mugeda动画平台还可以用来制作跨屏互动的动画应用,比如在PC端的大屏幕上显示动画的主界面,同时会显示出供手机扫描的二维码,手机扫描后会在手机上显示手机端动画界面.通过手机就可以和PC端的显示界面跨 ...
[Mugeda HTML5技术教程之11]Mugeda API简介
一.API 概述 Mugeda API 提供了一个简单的,结构化的方法来实时动态管理Mugeda内容.它提供了一下方法: •访问Mugeda内容中的对象. •获取和设置对象属性,如位置.旋转.比例.不 ...
[Mugeda HTML5技术教程之4] Studio 概述
Mugeda Studio 是基于云平台的制作HTML5动画的专业可视化集成开发环境,可以让你在不需要安装客户端程序的情况下,只通过浏览器就能轻松创作高质量的HTML5动画.HTML5动画相对于传统的 ...
[Mugeda HTML5技术教程之3] Hello World: 第一个Mugeda动画
今天我们开始我们的第一个Mugeda动画作品,并通过它来看看制作Mugeda动画的一些通用流程.在开始制作之前,请确保你已经拥有一个Mugeda网站的账号.如果还没有,你可以登录 www.mugeda ...
[Mugeda HTML5技术教程之10]发布内容
动画作品制作好后,就要拿来使用,怎么发布到想要的位置也是动画制作者比较关心的问题.这一节,我们讲述怎样将制作好的动画内容发布到想要的地方.对制作好的内容,可能的使用场景主要有以下三种:直接导出:发布到 ...
[Mugeda HTML5技术教程之17] 理解Mugeda访问统计结果
1. 功能简介 Mugeda提供动画统计功能,使得动画制作者可以直观的了解动画的浏览情况,包括浏览量,参与度,以及观看者的分布情况. 目前统计功能主要展示动画内容和广告工程的统计数据.在动画被发布或导 ...

[Mugeda HTML5技术教程之14]案例分析：制作网页游戏

[Mugeda HTML5技术教程之14]案例分析：制作网页游戏相关推荐

最新文章

热门文章