[Mugeda HTML5技术教程之16]案例分析:制作跨屏互动游戏
本节我们将要做一个跨屏互动应用的案例分析,该应用时给一家商场做活动使用的,是一个跨屏爱消除游戏。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 动画还能实现多对一的跨屏游戏,也就是多个玩家同时玩,比如大鱼吃小鱼的游戏,可以多个玩家鱼同时显示在大屏幕中玩。
转载于:https://www.cnblogs.com/mugeda/p/3546129.html
[Mugeda HTML5技术教程之16]案例分析:制作跨屏互动游戏相关推荐
- [Mugeda HTML5技术教程之14]案例分析:制作网页游戏
本文档要分析的案例是一个爱消除的网页小游戏,从中可以体会一些Mugeda API的用法和使用Mugeda动画制作网页游戏的方法. (一)游戏规则: 1.开始游戏时,手机出现在最上面一行的任意一格: 2 ...
- [Mugeda HTML5技术教程之2] Mugeda HTML5富媒体平台简介
[Mugeda HTML5技术教程之2] Mugeda HTML5动画平台简介 摘要:Mugeda提供基于云的平台,供开发人员和设计人员快速的开发.发布和统计基于HTML5的,包含丰富动画和交互的移动 ...
- [Mugeda HTML5技术教程之12]制作跨屏互动应用
mugeda动画平台还可以用来制作跨屏互动的动画应用,比如在PC端的大屏幕上显示动画的主界面,同时会显示出供手机扫描的二维码,手机扫描后会在手机上显示手机端动画界面.通过手机就可以和PC端的显示界面跨 ...
- [Mugeda HTML5技术教程之11]Mugeda API简介
一.API 概述 Mugeda API 提供了一个简单的,结构化的方法来实时动态管理Mugeda内容.它提供了一下方法: •访问Mugeda内容中的对象. •获取和设置对象属性,如位置.旋转.比例.不 ...
- [Mugeda HTML5技术教程之1] HTML5: 生存还是毁灭
[Mugeda HTML5技术教程] 开篇: HTML5 - 生存,还是毁灭 摘要:HTML5并不试图解决所有问题.但是在很多适合的场合,HTML5是不二选择. To be, or not to be ...
- [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提供动画统计功能,使得动画制作者可以直观的了解动画的浏览情况,包括浏览量,参与度,以及观看者的分布情况. 目前统计功能主要展示动画内容和广告工程的统计数据.在动画被发布或导 ...
最新文章
- 物料分类账业务配置及操作手册
- MySQL如何查询两个日期之间的记录
- 如果在系统里面无法格式化磁盘可以尝试以下方法
- ALGO-22 数的划分(DFS,经典剪枝)
- 信号与系统 chapter11 LTI系统的响应
- 小程序开发(11)-之支付封装
- python整数逆位运算_Python这些位运算的妙用,绝对让你大开眼界
- vb还是python强大-vb和python哪个速度快
- 每周收获(11-13)
- android 定时重启手机,有必要定时重启手机吗? 重启后手机会更流畅吗?
- 电动执行器平时应该怎么去维护和保养?
- setTimeout()方法实现延时执行其他功能
- 关于“PS中用魔棒选取之后拖到另一个图层中怎么没颜色了”的解决方法
- 前端页面复制粘贴插件Clipboard的使用
- 伯通过计算机网络,用于互联的计算机网络的安全系统
- 使用ADO创建Excel数据表
- 新巴巴运动网 项目第三天
- 德州INA139NA/3K 电流监控器IC 丝印N139
- Runtime 的用法
- 《算法图解》学习笔记(二):选择排序(附代码)