一种移动终端网页游戏自适应旋转的方法及装置制造方法及图纸

本发明专利技术涉及一种移动终端网页游戏自适应旋转的方法，包括将网页游戏设置在容器类的块元素中；判断所述网页游戏是横屏操作还是竖屏操作，通过监听事件，监听判断移动终端是否处于横屏状态，对于没有处于横屏状态的横屏操作网页游戏所在的块元素旋转90度；再根据移动终端屏幕的宽和高的比例设置块元素的高跟宽的比例。另外，本发明专利技术还提供了一种移动终端网页游戏自适应旋转的装置。相对于现有技术，本发明专利技术的方法及装置使得在移动终端在竖屏情况下，网页游戏能自动旋转到横屏状态，提高游戏体验度。

【技术实现步骤摘要】

本专利技术属于网页游戏设计领域，尤其是涉及一种移动终端网页游戏自适应旋转的方法及装置。
技术介绍
网页游戏是基于Web网页浏览器的网络游戏，无需下载客户端，对于移动终端，主要是指基于HTML5的网页游戏，游戏的实体是网页形式，其主要通过计算机或移动终端的网页浏览器、或者像微信这一类软件微信的内置浏览器来显示与进行游戏。网页游戏会设计成横屏或者坚屏的形式，如图1所示，所述的竖屏网页游戏A是指游戏页面的高大于宽，横屏网页游戏B是指游戏页面的高小于宽。目前我们大部分的移动终端为了手持方便，主要显示内容都是竖屏设置，也即高大于宽。如图2所示，对于横屏的网页游戏B按原始比例显示在竖直放置的移动终端C中，按原来比例显示的画面就会很小。如果移动终端开启了自动旋转设置，玩家只需旋转手机，如图3所示，网页游戏页面也会跟着旋转，这样就可以正常按网页游戏原来设计的比例全屏正常操作;但是，如果移动终端没有开启自动旋转设置，就算玩家旋转手机，网页游戏还是按原来的比例显示在浏览器中间，如图4所示，画面仍然会很小，不利比操作，也不利于观看，直接影响了游戏的体验。
技术实现思路
本专利技术的目的在于克服现有技术中的缺点与不足，提供一种移动终端网页游戏自适应旋转的方法。本专利技术是通过以下技术方案实现的:—种移动终端网页游戏自适应旋转的方法，包括步骤，S11:将网页游戏页面设置在容器类的块元素中；S12:判断所述网页游戏是横屏操作还是竖屏操作，若为竖屏操作则不作设置，若为横屏操作，转到步骤S13;S13:通过监听事件，监听判断移动终端是否处于横屏状态，如果是，则不作设置，让游戏网页自适应屏幕，如是否，则执行步骤S14;S14:将所述网页游戏页面所在的块元素旋转90度；S15:根据移动终端屏幕的宽和高的比例设置所述块元素的高跟宽的比例。相对于现有技术，本专利技术的移动终端网页游戏自适应旋转的方法，使得在移动终端在竖屏情况下，网页游戏能自动旋转到横屏状态，玩家能正常地操作横屏网页游戏，提高游戏体验。进一步，步骤S12通过判断网页游戏所在块元素的宽和高来确定该网页游戏是横屏操作还是竖屏操作。进一步，步骤S13通过监听移动终端的浏览器状态来判断移动终端是否处于横屏状态。进一步，根据权利要求3的移动终端网页游戏自适应旋转的方法，步骤S13对于Android系统，通过判断浏览器的宽高比例，来判断是否开启了横屏状态，浏览器的宽小于高则为竖屏状态，浏览器的宽大于高则为横屏状态。。进一步，根据权利要求3的移动终端网页游戏自适应旋转的方法，步骤S13对于1S系统，通过监听浏览器自带的onorientat1nchange事件和window.0rientat1n属性来判断是否开启了横屏状态。进一步，步骤S15，将网页游戏页面所在块元素的宽设置为移动终端屏幕的高，将网页游戏页面所在块元素的高设置为移动终端屏幕的宽。进一步，在步骤S15之后，包括步骤S16，将网页游戏页面所在的块元素调整到移动终端屏幕中间的位置。进一步，块元素中包含其他网页元素及显示内容。另外，本专利技术还提供了一种移动终端网页游戏自适应旋转的装置，包括块元素设置模块，用于将网页游戏页面设置在容器类的块元素中；游戏横竖屏判断模块，用于判断所述网页游戏是横屏操作还是竖屏操作，若为竖屏操作则不作设置，若为横屏操作，通知终端横屏判断模块；终端横屏判断模块，用于监听判断移动终端是否处于横屏状态，如果是，则不作设置，让游戏网页自适应屏幕，如是否，通知旋转模块；旋转模块，用于将所述网页游戏页面所在的块元素旋转90度；宽高调整模块，根据移动终端屏幕的宽和高的比例设置所述块元素的高跟宽的比例。相对于现有技术，本专利技术的移动终端网页游戏自适应旋转的装置，使得在移动终端在竖屏情况下，网页游戏能自动旋转到横屏状态，玩家能正常地操作横屏网页游戏，提高游戏体验。进一步，游戏横竖屏判断模块通过判断网页游戏所在块元素的宽和高来确定该网页游戏是横屏操作还是竖屏操作。进一步，终端横屏判断模块通过监听移动终端的浏览器状态来判断移动终端是否处于横屏状态。进一步，终端横屏判断模块对于Android系统，通过判断浏览器的宽高比例，来判断是否开启了横屏状态，浏览器的宽小于高则为竖屏状态，浏览器的宽大于高则为横屏状O O进一步，，终端横屏判断模块对于IO S系统，通过监听浏览器自带的onorientat1nchange事件和window, orientat1n属性来判断是否开启了横屏状态。进一步，宽高调整模块，将网页游戏页面所在块元素的宽设置为移动终端屏幕的高，将网页游戏页面所在块元素的高设置为移动终端屏幕的宽。进一步，包括位置调整模块，用于将网页游戏页面所在的块元素调整到移动终端屏幕中间的位置。进一步，块元素中包含其他网页元素及显示内容。为了能更清晰的理解本专利技术，以下将结合【附图说明】阐述本专利技术的【具体实施方式】。【附图说明】图1是竖屏和横屏网页游戏示意图。图2是横屏网页游戏在竖屏移动终端的显示示意图。图3是横屏网页游戏在横屏移动终端的显示示意图。图4是横屏网页游戏在没有开启屏幕自动旋转功能的移动终端的显示示意图。图5是本专利技术的移动终端网页游戏自适应旋转的方法的步骤流程图。图6是本专利技术的移动终端网页游戏自适应旋转的装置的结构示意图。【具体实施方式】请参阅图5，其为本专利技术的一种移动终端网页游戏自适应旋转的方法的步骤流程图，包括以下步骤:S11:将网页游戏页面设置在容器类的块元素中。将整个网页游戏页面设置在一个块元素中，块元素是html(超文本标记语言)规范中的概念，是指以块显示的元素，其高度宽度都是可以设置的，容器类的块元素在其中可以放置其他的网页元素，这里所述的容器类的块元素，可以是iframe、div等。本步骤就是将网页游戏设置在一个容器类的块元素中，所述块元素的宽和高比例与游戏设计时游戏背景的宽和高比例一致，以对整个块元素作进一步的设置。S12:判断所述网页游戏是横屏操作还是竖屏操作，若为竖屏操作则不作设置，若为横屏操作，转到步骤S13。通过判断网页游戏所在块元素的宽和高来确定该网页游戏是横屏操作还是竖屏操作，如果网页游戏所在块元素的宽小于高，则为竖屏操作;如果网页游戏所在块元素的宽大于高，则为横屏操作。S13:通过监听事件，监听判断移动终端是否处于横屏状态，如果是，则不作设置，让游戏网页自适应屏幕，如是否，则执行步骤S14。移动终端都带有屏幕自动旋转设置，一但开启了屏幕自动旋转功能，如果将移动终端旋转，屏幕显示内容也会跟着旋转，并且旋转之后，按原本来显示内容的长和宽的比例不变。对于横屏设计的网页游戏，如果开启了自动旋转功能，玩家旋转了移动终端，浏览器就会跟着旋转，横屏设计的网页游戏就能按原本的比例正常操作，不作设置;如果屏幕自动旋转功能没有开启，那么无论移动终端是否旋转，移动终端还是处于竖屏状态，或者虽然开启了自动旋转功能，但玩家没有将移动终端旋转，那么就得对横屏设计的网页游戏作进一步的设置，转到步骤S14。由于在前端游戏页面无法直接监听移动终端用户是否为横屏状态，因此必须通过监听浏览器状态来判断移动终端是否处于横屏状态，而且对于现在主流的AndroicK安卓操作系统)和10S(苹果操作系统)，监听的方法也有不同:对于Androi本文档来自技高网...

【技术保护点】
一种移动终端网页游戏自适应旋转的方法，其特征在于：包括步骤，S11：将网页游戏页面设置在容器类的块元素中；S12：判断所述网页游戏是横屏操作还是竖屏操作，若为竖屏操作则不作设置，若为横屏操作，转到步骤S13；S13：通过监听事件，监听判断移动终端是否处于横屏状态，如果是，则不作设置，让游戏网页自适应屏幕，如是否，则执行步骤S14；S14：将所述网页游戏页面所在的块元素旋转90度；S15：根据移动终端屏幕的宽和高的比例设置所述块元素的高跟宽的比例。

【技术特征摘要】

【专利技术属性】
技术研发人员：刘冠隆，梁立谨，黄兵周，
申请(专利权)人：广州乐霸网络科技有限公司，
类型：发明
国别省市：广东;44