HTML5技术教程:跨屏互动游戏
本节我们将要做一个跨屏互动应用的案例分析,该应用时给一家商场做活动使用的,是一个跨屏爱消除游戏。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 动画能够实现的跨屏应用。本案例是一对一的跨屏游戏,也就是同时只能有一个玩家在玩。
通过Mugeda 动画还能实现多对一的跨屏游戏,也就是多个玩家同时玩,比如大鱼吃小鱼的游戏,可以多个玩家鱼同时显示在大屏幕中玩。
转载于:https://www.cnblogs.com/XIAO-2017/p/6140971.html
HTML5技术教程:跨屏互动游戏相关推荐
- [Mugeda HTML5技术教程之16]案例分析:制作跨屏互动游戏
本节我们将要做一个跨屏互动应用的案例分析,该应用时给一家商场做活动使用的,是一个跨屏爱消除游戏.PC端页面显示在连接在PC的大屏幕上,参与活动的玩家可以用自己的手机扫描PC端页面上的二维码,连接成功后 ...
- [Mugeda HTML5技术教程之12]制作跨屏互动应用
mugeda动画平台还可以用来制作跨屏互动的动画应用,比如在PC端的大屏幕上显示动画的主界面,同时会显示出供手机扫描的二维码,手机扫描后会在手机上显示手机端动画界面.通过手机就可以和PC端的显示界面跨 ...
- websocket实现多屏互动_“京东11.11直播超级夜”正式官宣,跨屏互动新玩法燃爆11.11...
10月27日,京东直播正式宣布将于11月10日晚8点在北京五棵松凯迪拉克中心举办"京东11.11直播超级夜".该晚会将由亚洲顶级制作团队操刀,超30位重磅明星倾情奉献,通过京东直播 ...
- html5如何新建定义站点,HTML5技术教程:创建新作品_HTML5教程_创建作品_添加元素_课课家...
我们所熟知的HTM5软件是一款非常强大功能的软件,据我了解HTM5软件的特色也是非常有优势的.我们先来介绍一下它的优势: HTML5可以提供: ①:提高可用性和改进用户的友好体验; ②:有几个新的标签 ...
- js 年会大屏_年会H5大屏互动游戏案例分享
原标题:年会H5大屏互动游戏案例分享 利用h5制作年会互动小游戏越来越火爆了,今天小编就给大家推荐两个年会h5案例,希望能给大家的设计带来灵感,参考网站:hui.cdlchd.com. 案例一:201 ...
- html5多屏互动游戏,多屏互动与游戏功能_高清技术应用-中关村在线
多屏互动让你生活大不同 多屏互动是一个非常有趣的有趣的功能,把手持终端(智能手机.平板电脑等)的视音频.图片等内容,通过机顶盒和WiFi传送到大屏幕电视上面,大屏幕播放手持终端上面的多媒体内容.比如, ...
- html5多屏互动游戏,2017TFC深度盘点:未来H5游戏的发展趋势 重度化强社交多屏互动...
由上方汇.上方网举办的2017第十四届TFC全球泛游戏大会暨智能娱乐展已于2月24日圆满落幕.本次大会议题涉及泛娱乐.IP.直播.H5.VR/AR.海外移动游戏.投融资等多个领域,众多行业干货内容聚集 ...
- html5多屏互动游戏,多屏互动 —— 手机端与PC端 网页互动的现有尝试及设想
不可否认,多屏时代已经到来. 手机/平板/笔记本/PC/TV等,多个显示平台的逐步构建,为信息传播及交互提供了多重平台及体验选择. 素材:多屏自适应网页设计/多屏延生设计 在此篇文章,取手机端与PC端 ...
- 目前html邮件都支持手机屏幕,跨屏互动随心玩:手机、智能电视竞选年度最佳CP...
OFweek智能家居网讯:随着智能电视的普及,对于大屏价值的利用已经越来越成熟.除了作为电视机屏幕之外,开辟了更多的用处,常见的就是作为电脑的显示器来看电影或者成为游戏主机的显示设备.而在如今几乎人人 ...
最新文章
- 深度学习在工业推荐如何work?Netflix这篇论文「深度学习推荐系统Netflix案例分析」阐述DL在RS的优劣与经验教训...
- 织梦dedecms dede plus文件作用介绍及安全设置
- qt creator 信号与槽 代码实现 (二)
- python学习-代码调试(通过print调试、通过pdb调试、通过编译器调试(断点调试))
- ssl2293-暗黑游戏【dp练习题】
- ionic4 组件的使用(二)
- 语音识别HCLG解码
- 得到jar包运行时所在的目录
- PSCAD X4.6.2 免费下载
- mysql varchar 长度设置_Mysql中varchar长度设置方法
- C 通过四个点计算两条直线的交点
- P1357 食物链(一)
- 纯干货:手把手地教你搭建Oracle Sharding数据库分片技术
- 数据挖掘学习笔记3-贝叶斯与决策树
- How to set the Default Page in ASP.NET?
- H.323 and Associated Protocols
- 厦门考计算机竞赛保送北大清华名单,厦门这所学校130人获清华北大等名校保送资格...
- SAP中物料历史标准成本清单
- 爬虫 动态加载数据获取——曲线救国
- 夏令营,预推免经验分享(计科方向,天大+北理+上交+国防科大+北邮+清华深圳)
热门文章
- 「唯一ID生成器」的 6 种生成方案
- ..\OBJ\GPIO.axf: Error: L6915E: Library reports error: __use_no_semihosting was requested, but _sys_
- 人脸检测之Improved Faster R-CNN
- Java 8 新特性之默认方法
- MacOS上创建/data/webapps/appenv的方法
- wave读取wav文件_什么是WAV和WAVE文件(以及如何打开它们)?
- 天池_龙珠_机器学习训练营 学习笔记1
- Springboot中的context-path (url前缀)
- 银行软件测试年终总结,银行科技部年终工作总结
- jdk路径及配置安装步骤(非常详细,图解说明!)