华亮建设集团股份有限公司网站哪有培训seo
本发明涉及H5游戏技术领域，尤其涉及一种基于H5游戏的页面显示方法及系统。
背景技术：
H5是一系列制作网页互动效果的技术集合，即H5就是移动端的web页面。而H5游戏，可以看作是移动端的web游戏，无需下载软件即可体验，这就是H5在传播上的优势。
现在的计算，可以基于传统的移动网页制作动画，来实现交互类的复杂动作，这需要在页面上添加大量的元素，再通过局部的多元素拼合来完成动画制作，比如现有的捕鱼游戏，页面中有一海洋背景和多条游动的鱼，页面需要消耗大量的内存去渲染那些游动的鱼，所述游动的鱼为需要实时更新渲染的元素，而且在游戏进行中，CPU内存还需要运行逻辑代码。如果页面中游动的鱼的数目太多，则会大大的加大CPU的负荷。当需要渲染的鱼的数目超出CPU的运行能力时，线程会堵塞，游戏的页面就会卡顿，导致游戏画面播放不流畅，严重影响用户的操作体验。
技术实现要素：
为了解决上述技术问题，本发明的目的是提供一种控制游戏元素的数量的页面显示方法。
本发明的另一目的是提供一种控制游戏元素的数量的页面显示系统。
本发明所采用的技术方案是：
一种基于H5游戏的页面显示方法，包括以下步骤：
获取页面上需要实时更新渲染的元素的数量，根据第一阈值实时控制元素的数量。
进一步，还包括初始化步骤，具体为：
获取智能终端的性能参数，并根据性能参数设置第一阈值，以及建立一个实时映射元素的数量的变量。
进一步，所述根据第一阈值实时控制元素的数量的步骤，具体为：
根据元素的数量实时更新变量的变量值后，判断变量值是否小于第一阈值，若是，按照预设方式增加元素，并相应的增加变量值；反之，停止增加元素。
进一步，所述按照预设方式增加元素的步骤，具体为：
判断变量值是否小于第二阈值，若是，采用第一种方式增加元素；反之，采用第二种方式增加元素。
进一步，还包括以下步骤：
实时获取各元素在页面上的第一坐标值，以及用户输入的第二坐标值，判断第一坐标值是否等于第二坐标值，若是，删除对应的元素，并对应的减少变量值；反之，更新第一坐标值。
进一步，还包括以下步骤：
实时获取各元素在页面上的第一坐标值，以及页面的轮廓坐标值，判断第一坐标值是否等于轮廓坐标值，若是，删除对应的元素，并对应的减少变量值；反之，更新第一坐标值。
进一步，所述采用第一种方式增加元素的步骤，具体为：
在预设数值范围内随机获取一数值后，根据该数值增加元素。
所述采用第二种方式增加元素的步骤，具体为：
逐一增加页面上的元素。
本发明所采用的另一技术方案是：
一种基于H5游戏的页面显示系统，包括：
至少一个处理器；
至少一个存储器，用于存储至少一个程序；
当所述至少一个程序被所述至少一个处理器执行，使得所述至少一个处理器用于执行初始化步骤：
获取页面上需要实时更新渲染的元素的数量，根据第一阈值实时控制元素的数量。
进一步，处理器还用于执行以下步骤：
获取智能终端的性能参数，并根据性能参数设置第一阈值，以及建立一个实时映射元素的数量的变量。
本发明的有益效果是：本发明通过实时监控页面上元素的数量，并根据第一阈值控制元素的数量，避免页面上的元素过多，增大CPU的负荷，造成游戏的页面卡顿，解决了游戏卡顿的问题，极大提高了用户的操作体验。
附图说明
图1是本发明一种基于H5游戏的页面显示方法的步骤流程图。
具体实施方式
实施例一
如图1所示，一种基于H5游戏的页面显示方法，包括以下步骤：
S1、获取智能终端的性能参数，并根据性能参数设置第一阈值，以及建立一个实时映射元素的数量的变量。
S2、获取页面上需要实时更新渲染的元素的数量，根据第一阈值实时控制元素的数量。
其中，步骤S2具体包括S21～S23：
S21、实时获取各元素在页面上的第一坐标值，以及用户输入的第二坐标值，判断第一坐标值是否等于第二坐标值，若是，删除对应的元素，并对应的减少变量值；反之，更新第一坐标值。
S22、实时获取各元素在页面上的第一坐标值，以及页面的轮廓坐标值，判断第一坐标值是否等于轮廓坐标值，若是，删除对应的元素，并对应的减少变量值；反之，更新第一坐标值。
S23、根据元素的数量实时更新变量的变量值后，判断变量值是否小于第一阈值，若是，按照预设方式增加元素，并相应的增加变量值；反之，停止增加元素。
其中，S23中按照预设方式增加元素的步骤，具体为：判断变量值是否小于第二阈值，若是，采用第一种方式增加元素；反之，采用第二种方式增加元素。
所述采用第一种方式增加元素的步骤，具体为：在预设数值范围内随机获取一数值后，根据该数值增加元素。所述采用第二种方式增加元素，具体为：逐一增加元素的数量。
以下结合捕鱼游戏对上述方法的原理具体如下：
当用户在智能终端上打开捕鱼游戏时，智能终端加载游戏，并在智能终端的显示屏上渲染显示游戏页面，一开始页面上没有鱼，即元素的数量为0，此时变量值也为0。此时元素的数量小于第二阈值，所述第二阈值可根据实际情况进行调整，在本实施例中，第二阈值为5，当元素的数量小于5时，在预设数值范围内随机获取一数值后，根据该数值增加元素，所述预设数值范围可根据实际情况进行调整，在本实施例中，预设数值范围为[1,8]，在[1,8]内随机选择一个整数作为增加元素的数量值。当在游戏页面中渲染出鱼后，所述鱼随机的在页面上移动，用户可以通过触摸显示屏输入第二坐标值信息。实时获取各元素在页面上的第一坐标值，即实时获取页面上鱼的位置信息，判断第一坐标值是否等于第二坐标值，若是，那么就判定捕到鱼，则在页面上删除该被捕到的鱼，并对应的减少变量值，页面上少了一条鱼，则变量值减1；反之，更新鱼的坐标值。实时获取各元素在页面上的第一坐标值，和页面的轮廓坐标值，判断第一坐标值是否等于轮廓坐标值，若是，判定鱼游出了页面，并对应的减少变量值，页面上少了一条鱼，则变量值减1；反之，更新鱼的坐标值。判断页面上元素的数量是否小于第一阈值，即页面上鱼的数量是否小于第一阈值，该第一阈值根据智能终端的性能参数进行设置，所述性能参数包括智能终端的CPU内存量等参数，这是市场上的智能终端的性能参数较大，有些智能终端的性能差，则第一阈值设置小些，如果智能终端性能好，则第一阈值设置大些。如此，可使该游戏的兼容性更好。在本实施例中，第一阈值为10，当判断到变量值小于第一阈值时，继续判断变量值是否小于第二阈值，若是，采用第一种方式增加元素；反之，采用第二种方式增加元素。如果页面上的鱼数小于5条时，采用第一种方式增加鱼数，即在[1,8]内随机增加鱼数；当页面上的鱼数大于等于5，且小于10条时，则采用第二种方式增加鱼数，即逐一增加鱼数，变量值每次增加1。
通过上述方法，可时游戏页面上的鱼数保持合理的条数，避免页面中出现过多需要更新渲染的鱼，加大CPU的负荷，引起线程阻塞，造成了游戏页面的卡顿。有时候会因为游戏页面的卡顿，造成整个页面上的鱼都消失，这是因为线程阻塞，无法延续渲染，造成鱼元素消失。保持游戏页面舒畅的同时，合理的安排鱼的条数，极大地提高用户的操作体验。
实施例二
一种基于H5游戏的页面显示系统，包括：
至少一个处理器；
至少一个存储器，用于存储至少一个程序；
当所述至少一个程序被所述至少一个处理器执行，使得所述至少一个处理器用于执行以下步骤：
获取页面上需要实时更新渲染的元素的数量，根据第一阈值实时控制元素的数量。
进一步作为优选的实施方式，处理器还用于执行初始化步骤：
获取智能终端的性能参数，并根据性能参数设置第一阈值，以及建立一个实时映射元素的数量的变量。
进一步作为优选的实施方式，所述根据第一阈值实时控制元素的数量的步骤，具体为：
根据元素的数量实时更新变量的变量值后，判断变量值是否小于第一阈值，若是，按照预设方式增加元素，并相应的增加变量值；反之，停止增加元素。
进一步作为优选的实施方式，所述按照预设方式增加元素的步骤，具体为：
判断变量值是否小于第二阈值，若是，采用第一种方式增加元素；反之，采用第二种方式增加元素。
上述系统的工作原理为：实时监控页面中需要实时更新渲染的元素的数量，并根据第一阈值控制元素的数量，避免页面上的元素过多，增大CPU的负荷，造成游戏的页面卡顿，解决了游戏卡顿的问题，极大提高了用户的操作体验。
本实施例的一种基于H5游戏的页面显示系统，可执行本发明方法实施例所提供的一种基于H5游戏的页面显示方法，可执行方法实施例的任意组合实施步骤，具备该方法相应的功能和有益效果。
以上是对本发明的较佳实施进行了具体说明，但本发明创造并不限于所述实施例，熟悉本领域的技术人员在不违背本发明精神的前提下还可做出种种的等同变形或替换，这些等同的变形或替换均包含在本申请权利要求所限定的范围内。