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,由于我们的速度理论上来讲不应该丢给"背景类"去控制,所以这里暂时不管

背景这一对象就弄好了

出处：https://www.cnblogs.com/FatTiger4399/p/16597060.html

栏目列表

首页 > 网站开发 > HTML >

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

2.代码如下:

3.实例对象

4.加载图片