本节我们将要做一个跨屏互动应用的案例分析,该应用时给一家商场做活动使用的,是一个跨屏爱消除游戏。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. 校门外的树 - Grids2808

    校门外的树 问题描述: 某校大门外长度为 L 的马路上有一排树,每两棵相邻的树之间的间隔都是1 米.我们 可以把马路看成一个数轴,马路的一端在数轴0 的位置,另一端在L 的位置:数轴上的每 个整数点, ...

  2. [python]百度语音rest api

    百度语音识别提供的api范例只有java, c, php. 如果使用Python, 需要注意: 语音文件长度是指bytes大小 可以通过len(file.read())获得 使用requests.po ...

  3. uC/OS 的任务调度解析 (转)

    uC/OS 的任务调度解析 1.任务调度器启动之后(初始化,主要是TCB的初始化),就可以创建任务,开始任务调度了,实际上第一个任务准确的说不是进行任务切换,而是进行启动当前最高优先级任务.uC/OS ...

  4. Rufus-Create bootable USB drives the easy way

    Rufus Create bootable USB drives the easy way Rufus is a utility that helps format and create bootab ...

  5. cf C. Dima and Containers

    http://codeforces.com/contest/358/problem/C 将最大的放在stack里面,第二大的放在queue中,第三大的放在deck里面.然后模拟就可以了. #inclu ...

  6. android中button点击频率控制

    public class Utils { private static long lastClickTime; public static boolean isFastDoubleClick() { ...

  7. BZOJ1430: 小猴打架

    1430: 小猴打架 Time Limit: 5 Sec  Memory Limit: 162 MBSubmit: 328  Solved: 234[Submit][Status] Descripti ...

  8. android使用BlueStacks作为模拟器

    android原生的模拟器启动比较慢,偶尔还会出现一些莫名的问题,我们除了可以使用我们的android手机来进行调试外,还可以使用第三方的android模拟器,例如BlueStacks模拟器: 相对原 ...

  9. Decorator学习笔记

    初学者,自己的理解,请各位前辈不吝指正! Decorator,装饰模式,设计模式之一,谈谈我的理解,装饰这个词在我概念中就是给某个事物加上一些美丽的外表,把它变得更加完美.但是装饰是可以随时改变的,可 ...

  10. 基于PCA的特征提取

    图像处理方面的知识也学了一段时间了,总是光看理论的话,感觉联系不上实际,第一次把理论综合的实现出来,对这些理论的印象才感觉的更深刻,也能够为后续的学习打下良好的基础. PCA是比较老的算法,但是可靠性 ...