本节我们将要做一个跨屏互动应用的案例分析,该应用时给一家商场做活动使用的,是一个跨屏爱消除游戏。PC端页面显示在连接在PC的大屏幕上,参与活动的玩家可以用自己的手机扫描PC端页面上的二维码,连接成功后,操作手机上的游戏可以同步控制主屏幕的游戏画面和结果。游戏结果会记录到排行榜,商家定期会对排名前10的玩家进行奖励。

游戏规则和前面分析过的爱消除的案例类似,这个游戏本身就是在原来的单机游戏的基础上有进一步开发做了跨屏通讯的内容。

(一)游戏规则:

1、开始游戏时,德基的logo机出现在最上面一行的任意一格;

2、游戏时,方块随机从上往下落,填满所有的方框,相同的三个石头不能相邻的排在一列或者一行;

3、一次消除三个方块加200分,每多消除一块多加200分,比如一次消除四个加400分,一次消除5个加400分,以此类推。游戏结束时判断德基的logo位置,增加奖励分数,位置越往下奖励分数越高:依次为:0、200、400、600、1000、1400、2000。

(二)、游戏玩法

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

游戏过程中有可能遇到没有可消的情况,为此设计了重置一列的功能,当点击重置按钮后,会从中间的数列中随机选择一列重置,游戏中重置按钮可以使用三次。

游戏动画演示:是在PC上打开下面的链接后,刷PC页面上的二维码,而不是下图上的二维码,下图只是效果图,因为PC端的二维码是动态生成的

https://cn.mugeda.com/client/preview_css3.html?id=937df6e5

设计思路:

这个跨屏游戏是在前面分析过网页游戏的基础上改造改成,所有游戏逻辑还是原来的逻辑。跨屏通讯互动方面是这样设计的:PC端和手机端都是两个游戏动画,手机端有输入和游戏逻辑而PC端没有输入只有同手机端完全一样的游戏逻辑。当手机端有输入时(即交换相邻两个方块的位置),手机端会将要交换的两个方块的编号发送到PC端,两方通过自己的逻辑可以判断交换后的结果是否满足消除方块的条件,如果满足将相应方块消除,否则再将两个方块换回。设计增加了通讯的容错机制:每次通讯时手机端会在后面添加又所有方块位置生产的校验和,PC端收到后会用该校验和和自己的做比较,如果不一致,则证明出错,本次操作不做处理并且通知手机端将其所有方块位置的数组发过来,收到后安手机端方块位置数组重置PC端的所有方块。

关键点:

1. 手机端每次移动方块都向PC端发起通讯,并附带分数和校验和

for(var i = 0; i < hang * hang ; i++)

{

checksum += stoneArray[i].type;

}

socket.send('action', "" + clickNum + "," + clickTwoNum + "_" + totaltime+'_'+timeBonus+'_'+score+'_'+(moveSteps)+'_'+checksum);

同时PC端收到方块移动的事件后,解析出相应参数,并进行相应操作。

//先将事件的数据放入数组中,等候解析处理

if(msg.event == 'action') {

actionArray.push({data:msg.data, status:1});

}

//解析数据,并处理

var data = actionArray[actionIndex].data.split('_');

totaltime = data[1];

timeBonus = parseInt(data[2]);

var mobileScore = parseInt(data[3]);

var step = parseInt(data[4]);

var mobileChecksum = parseInt(data[5]);

var checksum = 0

for(var i = 0; i < hang * hang ; i++)

{

checksum += stoneArray[i].type;

}

if(checksum != mobileChecksum)

{

//如果校验和不一致,向手机端发起同步数据的请求,手机端收请求后把含有所有方块代号的数组发送过来,PC端在回调函数中更换所有不一致的方块。

}

else

{

//校验和一致,正常处理移动方块的动作

game.applyAction(data[0]);

actionIndex++;

}

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

[Mugeda HTML5技术教程之12]制作跨屏互动应用

总结,因为篇幅所限,案例分析中不可能详细讲解所有代码,着重讲解设计思路和一些关键点,通过本案例可以体会使用Mugeda 动画能够实现的跨屏应用。本案例是一对一的跨屏游戏,也就是同时只能有一个玩家在玩。通过Mugeda 动画还能实现多对一的跨屏游戏,也就是多个玩家同时玩,比如大鱼吃小鱼的游戏,可以多个玩家鱼同时显示在大屏幕中玩。

[Mugeda HTML5技术教程之16]案例分析:制作跨屏互动游戏的更多相关文章

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

    本文档要分析的案例是一个爱消除的网页小游戏,从中可以体会一些Mugeda API的用法和使用Mugeda动画制作网页游戏的方法. (一)游戏规则: 1.开始游戏时,手机出现在最上面一行的任意一格: 2 ...

  2. [Mugeda HTML5技术教程之15]案例分析:制作移动教育课件

    本文档要分析的案例是一个一氧化碳还原氧化铜的教育小课件,从中可以体会一些Mugeda API的用法和使用Mugeda动画制作移动教育课件的方法.Mugeda为移动教育领域和移动数字出版领域提供理想的教 ...

  3. [Mugeda HTML5技术教程之2] Mugeda HTML5富媒体平台简介

    [Mugeda HTML5技术教程之2] Mugeda HTML5动画平台简介 摘要:Mugeda提供基于云的平台,供开发人员和设计人员快速的开发.发布和统计基于HTML5的,包含丰富动画和交互的移动 ...

  4. [Mugeda HTML5技术教程之12]制作跨屏互动应用

    mugeda动画平台还可以用来制作跨屏互动的动画应用,比如在PC端的大屏幕上显示动画的主界面,同时会显示出供手机扫描的二维码,手机扫描后会在手机上显示手机端动画界面.通过手机就可以和PC端的显示界面跨 ...

  5. [Mugeda HTML5技术教程之11]Mugeda API简介

    一.API 概述 Mugeda API 提供了一个简单的,结构化的方法来实时动态管理Mugeda内容.它提供了一下方法: •访问Mugeda内容中的对象. •获取和设置对象属性,如位置.旋转.比例.不 ...

  6. [Mugeda HTML5技术教程之1] HTML5: 生存还是毁灭

    [Mugeda HTML5技术教程] 开篇: HTML5 - 生存,还是毁灭 摘要:HTML5并不试图解决所有问题.但是在很多适合的场合,HTML5是不二选择. To be, or not to be ...

  7. [Mugeda HTML5技术教程之5] 创建新作品

    前一节,我们介绍了Mugeda Studio.这一节我们讲一下怎么通过Studio创建新作品.首先登陆网站,如果还没有登陆账号,你可以登录 www.mugeda.com 免费注册一个.登录网站后,点击 ...

  8. [Mugeda HTML5技术教程之4] Studio 概述

    Mugeda Studio 是基于云平台的制作HTML5动画的专业可视化集成开发环境,可以让你在不需要安装客户端程序的情况下,只通过浏览器就能轻松创作高质量的HTML5动画.HTML5动画相对于传统的 ...

  9. [Mugeda HTML5技术教程之18]如何在Android应用中使用Mugeda动画内容

    1.简介 本文主要介绍如何在Android应用程序中使用Mugeda动画.Mgeda动画是标准HTML5格式的动画,在Android应用程序中可以使用WebView来加载Mugeda动画.动画内容本身 ...

随机推荐

  1. 容器 SET part2

    (6) insert   STL中为什么提供这样的set的insert呢? 这个成员函数存在的目的是为了插入效率的问题.函数参数中的 __position 只是一个提示值,表示在这个位置附近(可前可后 ...

  2. Jasper_crosstab_display a value of field in crosstab total row

    1.create a measure <measure name="myField" class="java.lang.String"> <m ...

  3. Android-4

    显式Intent 隐式Intent Intent过滤器相关选项 通过浏览器链接启动本地Activity

  4. lua好久没有用了

    lua好久没有用了, 最近用python有点多,现在用web.py搞个简单的页面来作通讯录,没美工,很纯白的, 无聊啊,准备去睡了,刚刚百度完lua的一些资料呢, google用不了,真悲剧啊, TM ...

  5. NOI2012 美食节

    http://www.lydsy.com/JudgeOnline/problem.php?id=2879 费用流. 我们发现,每个厨师做的倒数第k道菜对总等待时间的贡献为k*做这道菜的时间. 将每个厨 ...

  6. bzoj1149

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=1149 水题..... 直接BFS. #include<cstdio> #inclu ...

  7. C#的隐式和显示类型转换

    原文地址:http://blog.csdn.net/yysyangyangyangshan/article/details/7494577 关于隐式转换和显示转换,每种语言都有的,C#中当然也不例外. ...

  8. Python partial函数

    以前都是摘录的其他网友的博客,很少是自己写的,学习阶段,多多学习.今天开始自己写了,首先写一下刚刚遇到的partial函数. 1.partial函数主要是对参数的改变,假如一个函数有两个参数,而其中一 ...

  9. iOS UILabel UITextView UIButton 等等显示文本行间距

    iOS UILabel  UITextView UIButton 等等显示文本行间距都用如下方法 NSMutableParagraphStyle *paragraphStyle = [[NSMutab ...

  10. PyCharm 4.0下载(附keygen)

    百度网盘:http://pan.baidu.com/s/1nvAdEM9  密码:xfz9