Html飞机大战(二):面向对象绘制背景

好家伙，

 

我们为了后续工作的顺利进行，我试着把每一个模块封装为对象

 

但冻手之前还是要构思一下

 

我们把天空封装成一个类:

1.来搞一手简单的对象分析:

 

 属性方面的都好理解

 

来说明一下方法:

(1) paint方法:

我们把图片的渲染封装成一个独立的方法

然后我们知道图片的移动是通过y1,y2++来实现的

 

(2) judge方法:

我们我们把对y1,y2的控制交给judge

 

思路清晰,开干:

 

2.代码如下:

弄一个config来放参数:

const config ={
            bg: bg,
            width:480,
            height:650,
            speed: 10,
            /* 速度 */    
            }

然后是Sky类的代码:

class Sky{
            constructor(config){
                //图片资源
                this.bg=config.bg;
                this.width = config.width;
                this.height = config.height;
                this.x1 = 0;
                this.y1 = 0;
                this.x2 = 0;
                this.y2 = -this.height;
                this.speed =config.speed;
                //最后更新时间
                this.lasttime = new Date().getTime();
            
            }
            //判断方法
            judge(){
                let currentTime = new Date().getTime();
                //在此处增加一个判断
                if(currentTime -this.lasttime > this.speed){
                    this.y1++;
                    this.y2++;
                    this.lasttime =currentTime;

                }
                //渲染完毕,重置y1,y2
                if(this.y2===0){
                    this.y1=0;
                    this.y2=-this.height;
                }
            }
            //绘图方法
            paint(context){
                context.drawImage(this.bg,this.x1,this.y1++,this.width,this.height);
                context.drawImage(this.bg,this.x2,this.y2++,this.width,this.height);
                if(this.y2===0){
                    this.y1=0;
                    this.y2=-650;
                }
            }
            
        }

(呜呜呜,已经是Java形状了,像,太像了,要我说这就是Java)

 

整体思路上与上一篇没什么变化,只是多了封装这一步

3.实例对象

const sky = new Sky(config);

 

 

4.加载图片

bg.addEventListener("load",()=>{
            /* 
               callback: Function 表示回调函数
               timeout: Number 表示每次调用函数所间隔的时间段    
            */ 
            setInterval(()=>{
                sky.paint(context);
            },10);
        })

这里的速度10,由于我们的速度理论上来讲不应该丢给"背景类"去控制,所以这里暂时不管

 

背景这一对象就弄好了