一种移动终端网页游戏自适应旋转的方法及装置的制造方法
【技术领域】
[0001 ]本发明属于网页游戏设计领域，尤其是涉及一种移动终端网页游戏自适应旋转的方法及装置。
【背景技术】
[0002]网页游戏是基于Web网页浏览器的网络游戏，无需下载客户端，对于移动终端，主要是指基于HTML5的网页游戏，游戏的实体是网页形式，其主要通过计算机或移动终端的网页浏览器、或者像微信这一类软件微信的内置浏览器来显示与进行游戏。
[0003]网页游戏会设计成横屏或者坚屏的形式，如图1所示，所述的竖屏网页游戏A是指游戏页面的高大于宽，横屏网页游戏B是指游戏页面的高小于宽。目前我们大部分的移动终端为了手持方便，主要显示内容都是竖屏设置，也即高大于宽。如图2所示，对于横屏的网页游戏B按原始比例显示在竖直放置的移动终端C中，按原来比例显示的画面就会很小。如果移动终端开启了自动旋转设置，玩家只需旋转手机，如图3所示，网页游戏页面也会跟着旋转，这样就可以正常按网页游戏原来设计的比例全屏正常操作;但是，如果移动终端没有开启自动旋转设置，就算玩家旋转手机，网页游戏还是按原来的比例显示在浏览器中间，如图4所示，画面仍然会很小，不利比操作，也不利于观看，直接影响了游戏的体验。
【发明内容】
[0004]本发明的目的在于克服现有技术中的缺点与不足，提供一种移动终端网页游戏自适应旋转的方法。
[0005]本发明是通过以下技术方案实现的:
[0006]—种移动终端网页游戏自适应旋转的方法，包括步骤，
[0007]S11:将网页游戏页面设置在容器类的块元素中；
[0008]S12:判断所述网页游戏是横屏操作还是竖屏操作，若为竖屏操作则不作设置，若为横屏操作，转到步骤S13;
[0009]S13:通过监听事件，监听判断移动终端是否处于横屏状态，如果是，则不作设置，让游戏网页自适应屏幕，如是否，则执行步骤S14;
[0010]S14:将所述网页游戏页面所在的块元素旋转90度；
[0011]S15:根据移动终端屏幕的宽和高的比例设置所述块元素的高跟宽的比例。
[0012]相对于现有技术，本发明的移动终端网页游戏自适应旋转的方法，使得在移动终端在竖屏情况下，网页游戏能自动旋转到横屏状态，玩家能正常地操作横屏网页游戏，提高游戏体验。
[0013]进一步，步骤S12通过判断网页游戏所在块元素的宽和高来确定该网页游戏是横屏操作还是竖屏操作。
[0014]进一步，步骤S13通过监听移动终端的浏览器状态来判断移动终端是否处于横屏状态。
[0015]进一步，根据权利要求3的移动终端网页游戏自适应旋转的方法，步骤S13对于Android系统，通过判断浏览器的宽高比例，来判断是否开启了横屏状态，浏览器的宽小于高则为竖屏状态，浏览器的宽大于高则为横屏状态。。
[0016]进一步，根据权利要求3的移动终端网页游戏自适应旋转的方法，步骤S13对于1S系统，通过监听浏览器自带的onorientat1nchange事件和window.0rientat1n属性来判断是否开启了横屏状态。
[0017]进一步，步骤S15，将网页游戏页面所在块元素的宽设置为移动终端屏幕的高，将网页游戏页面所在块元素的高设置为移动终端屏幕的宽。
[0018]进一步，在步骤S15之后，包括步骤S16，将网页游戏页面所在的块元素调整到移动终端屏幕中间的位置。
[0019]进一步，块元素中包含其他网页元素及显示内容。
[0020]另外，本发明还提供了一种移动终端网页游戏自适应旋转的装置，包括
[0021]块元素设置模块，用于将网页游戏页面设置在容器类的块元素中；
[0022]游戏横竖屏判断模块，用于判断所述网页游戏是横屏操作还是竖屏操作，若为竖屏操作则不作设置，若为横屏操作，通知终端横屏判断模块；
[0023]终端横屏判断模块，用于监听判断移动终端是否处于横屏状态，如果是，则不作设置，让游戏网页自适应屏幕，如是否，通知旋转模块；
[0024]旋转模块，用于将所述网页游戏页面所在的块元素旋转90度；
[0025]宽高调整模块，根据移动终端屏幕的宽和高的比例设置所述块元素的高跟宽的比例。
[0026]相对于现有技术，本发明的移动终端网页游戏自适应旋转的装置，使得在移动终端在竖屏情况下，网页游戏能自动旋转到横屏状态，玩家能正常地操作横屏网页游戏，提高游戏体验。
[0027]进一步，游戏横竖屏判断模块通过判断网页游戏所在块元素的宽和高来确定该网页游戏是横屏操作还是竖屏操作。
[0028]进一步，终端横屏判断模块通过监听移动终端的浏览器状态来判断移动终端是否处于横屏状态。
[0029]进一步，终端横屏判断模块对于Android系统，通过判断浏览器的宽高比例，来判断是否开启了横屏状态，浏览器的宽小于高则为竖屏状态，浏览器的宽大于高则为横屏状
O O
[0030]进一步，，终端横屏判断模块对于IO S系统，通过监听浏览器自带的onorientat1nchange事件和window, orientat1n属性来判断是否开启了横屏状态。
[0031]进一步，宽高调整模块，将网页游戏页面所在块元素的宽设置为移动终端屏幕的高，将网页游戏页面所在块元素的高设置为移动终端屏幕的宽。
[0032]进一步，包括位置调整模块，用于将网页游戏页面所在的块元素调整到移动终端屏幕中间的位置。
[0033]进一步，块元素中包含其他网页元素及显示内容。
[0034]为了能更清晰的理解本发明，以下将结合【附图说明】阐述本发明的【具体实施方式】。
【附图说明】
[0035]图1是竖屏和横屏网页游戏示意图。
[0036]图2是横屏网页游戏在竖屏移动终端的显示示意图。
[0037]图3是横屏网页游戏在横屏移动终端的显示示意图。
[0038]图4是横屏网页游戏在没有开启屏幕自动旋转功能的移动终端的显示示意图。
[0039]图5是本发明的移动终端网页游戏自适应旋转的方法的步骤流程图。
[0040]图6是本发明的移动终端网页游戏自适应旋转的装置的结构示意图。
【具体实施方式】
[0041]请参阅图5，其为本发明的一种移动终端网页游戏自适应旋转的方法的步骤流程图，包括以下步骤:
[0042]S11:将网页游戏页面设置在容器类的块元素中。
[0043]将整个网页游戏页面设置在一个块元素中，块元素是html(超文本标记语言)规范中的概念，是指以块显示的元素，其高度宽度都是可以设置的，容器类的块元素在其中可以放置其他的网页元素，这里所述的容器类的块元素，可以是iframe、div等。本步骤就是将网页游戏设置在一个容器类的块元素中，所述块元素的宽和高比例与游戏设计时游戏背景的宽和高比例一致，以对整个块元素作进一步的设置。
[0044]S12:判断所述网页游戏是横屏操作还是竖屏操作，若为竖屏操作则不作设置，若为横屏操作，转到步骤S13。
[0045]通过判断网页游戏所在块元素的宽和高来确定该网页游戏是横屏操作还是竖屏操作，如果网页游戏所在块元素的宽小于高，则为竖屏操作;如果网页游戏所在块元素的宽大于高，则为横屏操作。
[0046]S13:通过监听事件，监听判断移动终端是否处于横屏状态，如果是，则不作设置，让游戏网页自适应屏幕，如是否，则执行步骤S14。
[0047]移动终端都带有屏幕自动旋转设置，一但开启了屏幕自动旋转功能，如果将移动终端旋转，屏幕显示内容也会跟着旋转，并且旋转之后，按原本来显示内容的长和宽的比例不变。
[0048]对于横屏设计的网页游戏，如果开启了自动旋转功能，玩家旋转了移动终端，浏览器就会跟着旋转，横屏设计的网页游戏就能按原本的比例正常操作，不作设置;如果屏幕自动旋转功能没有开启，那么无论移动终端是否旋转，移动终端还是处于竖屏状态，或者虽然开启了自动旋转功能，但玩家没有将移动终端旋转，那么就得对横屏设计的网页游戏作进一步的设置，转到步骤S14。
[0049]由于在前端游戏页面无法直接监听移动终端用户是否为横屏状态，因此必须通过监听浏览器状态来判断移动终端是否处于横屏状态，而且对于现在主流的AndroicK安卓操作系统)和10S(苹果操作系统)，监听的方法也有不同:
[0050]对于Android系统，通过判断浏览器的宽高比例，来判断是否开启了横屏状态，浏览器的宽小于高则为竖屏状态，浏览器的宽大于高则为横屏状态。
[0051 ] 对于1S系统，通过监听浏览器自带的onorientat1nchange(方向改变)事件和window.0rientat1n(窗口方向)属性来判断是否开启了横屏状态。所述orientat1nchange事件是在用户水平或者垂直翻转设备，S卩移动终端屏幕方向发生变化时触发的事件，所述window.0rientat1n为一浏览器参数，表示浏览器处于横屏还是竖屏状态。
[0052]该步骤的监听事件是在游戏过程中一直持续进行，一旦浏览器发生了旋转，都会触发监听事件。
[0053]S14:将所述网页游戏页面所在的块元素旋转90度。
[0054]为了横屏设置的网页游戏能够适应屏幕，将网页游戏所在的块元素旋转90度，这样网页游戏所在的块元素的宽就与移动终端屏幕的高平行，网页游戏所在的块元素的高与移动终端屏幕的宽平行。
[0055]具体地旋转设置，利用CSS(层叠样式表)中transform(变换)的rotate(旋转)属性将块元素旋转90度。
[0056]S15:按移动终端屏幕的宽和高的比例设置所述块元素的高跟宽的比例。
[0057]设置游戏页面所在块元素的宽跟高，为了与旋转之后的移动终端屏幕比例对应，设置该块元素的高跟宽的比例等于移动终端屏幕的宽和高的比例。最优地，是将网页游戏页面所在块元素的宽设置为移动终端屏幕的高，将网页游戏页面所在块元素的高设置为移动终端屏幕的宽，这样，游戏页面就能充满整个屏幕，玩家能够最大化地操作游戏。
[0058]S16:将所述网页游戏页面所在的块元素调整到移动终端屏幕中间的位置。
[0059]将网页游戏页面所在的块元素，调整到屏幕的正中间，以保证整个块元素显示的内容不超出移动终端的屏幕显示范围，让游戏显示最大化，给用户最佳的游戏显示与体验。
[0060]具体地，可以用translate(移动)属性将旋转后的块元素调整到页面中间位置。