关于#javascript#的问题：这个第一个把第二个图片覆盖了吗？代码没报错原本是想第二个图片显示在第一个图片上面实现一个点击

img

img





```html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>飞机大战</title>
    <link rel="stylesheet" href="./style.css">
    <!-- <link rel="stylesheet" href="./style.less"> -->
</head>
<body>
    <div id="stage">
        <canvas id="canvas" width="960" height="600"></canvas>
    </div>
    <script src="./index.js"></script>
</body>
</html>

// 1.让画布能够绘制图片
// 1.1找到这个画布
// 初始化画布对象
const canvas = document.querySelector("#canvas")
// 1.2利用这个画布初始化一个2D的画笔
const context = canvas.getContext('2d')
// 定义游戏状态
// 开始
const START = 0
// 开始时
const STARTING = 1
// 运行时
const RUNNING = 2
// 暂停时
const PAUSE = 3
// 结束时
const END = 4
// 初始化背景图
// 2.加载这张图片 图片加载/初始化 这个过程是异步的
const bg = new Image()
bg.src = './img/Background image.jpeg'

// 初始化一个图片LOGO
let bg1 = new Image()
bg1.src = './img/1.png'


/// 初始化一个天空类
// 实际上和es5的构造函数没有本质区别
// function Sky() {}
// 静态属性 & 动态方法 两个部分
// 静态属性 提供到一个叫constructor函数中 构造器函数 每当你 new xxx() 总会先调用这个constructor()函数
class Sky {
    constructor(config) {
        // 静态属性
        // 静态图片
        this.bg = config.bg
        this.width = config.width
        this.height = config.height
        this.x1 = 0
        this.x2 = 0
        this.y1 = 0
        this.y2 = -this.height
        // 10=>10ms
        this.speed = config.speed
        // 最后更新时间
        this.lastTime = new Date().getTime()
    }
        // 动态方法
        // 判断方法
        // 判断这个时间段天空是否需要移动 y1,y2++
        // 拿到当前的时间节点 有一个速度节点 拿到一个历史时间
        // 当前时间 - 速度时间 如果大于 历史时间的话 那么就需要移动
        // 否则就不需要移动
        judge() {
            let currentTime = new Date().getTime()
            // currentTime10015 // lastTime 10000 -10
            if (currentTime - this.lastTime > this.speed){
                this.y1++
                this.y2++
                // 时间的更新
                this.lastTime = currentTime
            }
        }
        // 绘图方法
    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 = -this.height
        }
    }
    fn2() {

    }
}
// 天空类的配置项
const config = {
    bg: bg,
    width:960,
    height:600,
    speed:10,
    // 10ms 变化一次 数字越大 速度越慢 数字越小 速度越快
}
// 初始化/实例化一个sky类型的sky变量
const sky = new Sky(config)
// state表示游戏的状态，取值必须是以上的五种状态
let state = START 
// console.log(sky)
// 当图片加载完毕的时候，在去绘制背景
// 当图片加载完毕宏的时候，再去绘制背景
/* eventName 事件的名称
    callback 该事件执行完毕之后的回调函数
*/
bg.addEventListener('load', () => {
    /*image 加载的图片对象
    *dx 图片开始绘制的左上角的横坐标
    dy图片开哦按时绘制左上角的那个纵坐标
    dwidth 图片在canvas 的宽度（缺省值表示的就是绘制到整张canvas对象中）
    dheigt 图片在canvas 的高度（缺省值表示的就是绘制到整张canvas对象中）
    callback: Function 表示回调函数
    timeout: Number 每隔多长时间会调用该回调函数
    */
    // 会实时渲染整个canvas对象，当游戏进入到不同状态的时候会渲染不同的内容
    setInterval(() => {
        // 保证页面的一个刷新率 一直在刷新 但是实际移动位置的判断 交给 每个实例
        switch(state) {
            case START:
                console.log("开始")
                // 渲染移动天空
                sky.judge()
                sky.paint(context)
                // 渲染飞机大战LOGO
                bg1.onload = function () {
                    console.log('图片加载成功');
                    console.log(this);
                    context.drawImage(bg1, 0, 0);
                }
                    // context.drawImage(bg1, 960 / 2, 600 / 2)
                
                break;
            case STARTING:
                console.log("开始时")
                 // 渲染移动天空
                sky.judge()
                sky.paint(context)
                // 飞机加载类 Loading
                break;
            case RUNNING:
                console.log("运行时")
                 // 渲染移动天空
                sky.judge()
                sky.paint(context)
                // 渲染我方飞机和敌方飞机
                break;
            case PAUSE:
                console.log("暂停时")
                // 渲染一个暂停图标
                break;
            case END:
                console.log("结束时")
                // 渲染一个你已经死亡图标
                break;
        }
        sky.judge()
        sky.paint(context)
    }, 10)
})
```javascript