Web小游戏对象自动生成器的算法的研究

• 作 者: 吴强
• 出 处: 安防科技
• 发表日期: 2021年1期

　　摘要：弹弹球小游戏深受大众所喜爱，本文详细的介绍在网络平台下，使用JavaScript脚本语言实现“连连看”游戏中核心算法——对象自动生成器。
　　关键词：web 小游戏;弹弹球;JavaScript;对象自动生成器
　　随着游戏的飞速发展，基于移动端的网络游戏成为了人们娱乐的一种重要方式，弹弹球类的小游戏出现了很多，深受大众的喜爱。
　　一、关键问题
　　“弹弹球”是一个平面游戏，小球在地图中自动移动，小球超出地图自动删除，碰到障碍物反弹，用户水平控制挡板阻止小球飞出，当小球碰到不同类型的砖块有不同类型的奖励，其中一种奖励是生成新的小球，以不同的方向飞行，这时就有多个小球同时在地图中飞行。自动生成小球中一个重要的问题，面向对象的编程方是解决些问题的方法之一
　　二、小球类
　　在建立小球类时，首先要要考虑设置小球对象的属性和方法。
　　1、对象的属性，小球对象的主要属性有x，y轴的坐标、运动速度与运动角度。
　　function Ball（x，y，speed，angle）{
　　this.x=x;//設置x坐标
　　this.y=y;//设置y坐标
　　this.speed=speed;//设置速度
　　this.angle=angle;//设置运动方向
　　}
　　2、在地图中建立小球对象，首先将地图对象给到变量“map”中，在map中增加小球对象，并，在这里重要的是由类建立的小球对象和地图中显示的小球不是一个对象，因此要建立两个对象的互相联系，可以在小球对象中增加一个属性“obj”指向地图中的小球，地图中的小球增加一个属性“src”属性指向小球对象。在类中增加代码事下：
　　this.obj=document.createElement（"div"）;//建立对象
　　this.obj.className=”ball”;//设置CSS
　　map.appendChild（this.obj）;//增加对象至地图中
　　this.obj.src=this;//设置标签对象src属性为球对象
　　3、地图中的小球的位置，可以根据小球的x和y属性来改变小球的位置，并调用函数。
　　this.xy=function（）{//设置对象的位置
　　this.obj.style.left=parseInt（this.x）+”px”;
　　this.obj.style.top=parseInt（this.y）+”px”;
　　}
　　this.xy（）;
　　4、创建在地图中移动小球对象的方法，在JavaScript做动画的常用方法之一是使用定时事件来完成移动的效果，在小球类中时用考虑一次移动，可以通过对象的运动速度和角度的属性来计算出小球每次的位移量，并判断其超出地图片下面的边界删除对象，方法如下：
　　this.move=function（）{//移动对象
　　this.x+=this.speed*Math.cos（this.angle/180*Math.PI）;
　　this.y+=this.speed*Math.sin（this.angle/180*Math.PI）;
　　this.xy（）;
　　if （this.y>map.offsetHeight） this.remove（）;//超界删除对象
　　}
　　5、删除对象方法，删除地图中的对象同时，删除小球对象与之的链接。
　　this.remove=function（）{map.removeChild（this.obj）;this.obj=””;}
　　6、在主时钟设置小球运动，地图中小球数量不是固定的，它会随时发生变化，因此在每次运动时都要重新对地图中的小球进行遍历，每个球都要做相应的运动。
　　window.setInterval（“masterClock（）”，1000/30）;
　　var masterClock=function（）{
　　var ballAll=document.querySelectorAll（“.map .ball”）;
　　console.log（ballAll.length）;
　　for （var k=0;k<=ballAll.length-1;k++）{
　　ballAll.item（k）.src.move（）;
　　}
　　}
　　三、建立对象
　　建立小球对象时，根据不同的情况输入相应的属性，代码如下：
　　new Ball（300，100，5，198）;
　　四、结束语
　　以上是本文解决了游戏中关键问题对象自动生成器，要完成此游戏还要制作球与砖块的碰撞反弹效果，相关图片的排版布局、倒计时、得分、地图、音效等增加游戏的可玩性。