[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技术教程之15]案例分析:制作移动教育课件
本文档要分析的案例是一个一氧化碳还原氧化铜的教育小课件,从中可以体会一些Mugeda API的用法和使用Mugeda动画制作移动教育课件的方法.Mugeda为移动教育领域和移动数字出版领域提供理想的教 ...
- [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技术教程之5] 创建新作品
前一节,我们介绍了Mugeda Studio.这一节我们讲一下怎么通过Studio创建新作品.首先登陆网站,如果还没有登陆账号,你可以登录 www.mugeda.com 免费注册一个.登录网站后,点击 ...
- [Mugeda HTML5技术教程之4] Studio 概述
Mugeda Studio 是基于云平台的制作HTML5动画的专业可视化集成开发环境,可以让你在不需要安装客户端程序的情况下,只通过浏览器就能轻松创作高质量的HTML5动画.HTML5动画相对于传统的 ...
- [Mugeda HTML5技术教程之18]如何在Android应用中使用Mugeda动画内容
1.简介 本文主要介绍如何在Android应用程序中使用Mugeda动画.Mgeda动画是标准HTML5格式的动画,在Android应用程序中可以使用WebView来加载Mugeda动画.动画内容本身 ...
随机推荐
- C 产生随机码 (输入数字来产生)
#include <stdio.h> #include <stdlib.h> main() { unsigned int seed; /*申明初始化器的种子,注意是unsign ...
- 一品楼论坛www.ep6.info一品楼论坛
一品楼论坛最新地址www.ep6.info>访问一品楼网站. 一品楼是现在比较大的信息分享平台,一品楼上网必进. 一品楼江苏版块,一品楼北京版块,一品楼怡红院,一品楼怡春院. 一品楼山东信息. ...
- GO的数组及切片
感觉在向PYTHON学一些数组方面的功能. package main import "fmt" func main() { ]], , , , , , , , , } ] fmt. ...
- 只允许指定的ip访问本机的指定端口22:
只允许指定的ip访问本机的指定端口22: 允许的的ip:192.168.1.123, 192.168.1.124, 192.168.1.100,其他ip都禁止访问. 切换到root用户 1.在tcp协 ...
- linux/unix 段错误捕获【续】
本文为“在C/C++中捕获段错误,打印出错的具体位置”的续篇,进一步解决涉及动态链接库的情况. 背景知识: ·linux/unix下动态链接库的基本原理 ·/proc/pid/maps文件的基本格 ...
- Oracle优化笔记
2016-11-22 子查询:标量子查询 内联视图(in-line view) 半连接/反连接 标量子查询 select 后跟子查询 类似自定义函数 可用开窗函数之类的改写 内联视图(in ...
- Jtree (节点的渲染+资源管理器)
我们的还是自定义的Jtree的类: package jtree.customNode; import java.io.File; import javax.swing.JTree; import ja ...
- hdu1540-Tunnel Warfare (线段树区间合并)
题意:n个村庄,有三种操作,D x 破坏位置为x的村庄,R 修复上一次被破坏的村庄,Q x 输出含有x村庄的连续村庄的最大个数.线段树搞之,区间合并. ls[maxn]为当前节点左面的连续区间,rs[ ...
- 写在学习linux内核协议栈之前
一直很喜欢内核,但是新手,非常的痛苦啊.现在看一本linux内核协议栈源码解析一书,将自己学习的经历以及 理解记录下来,以备将来回头查漏补缺,同时校正自己的理解错误,自勉
- 给那些因为Firebug而舍不得FireFox的朋友
Google Chrome浏览器调试 作为Web开发人员,我为什么喜欢Google Chrome浏览器 [原文地址:http://www.cnblogs.com/QLeelulu/archive/20 ...