效果

--_072

代码

let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
// 图片
let img = new Image();
img.src = "http://bpic.588ku.com/original_pic/18/12/19/c973272ee67a75002b71584247f4d694.jpg";
// 飞机类
class Plane{
    x = 200;
    y = 330;
    xSize = 50;
    ySize = 50;
    constructor(){};
    draw(){
        context.drawImage(img, this.x, this.y, this.xSize, this.ySize);
    }
}
// 子弹类
class Bullet{
    plane;
    x = plane.x + plane.xSize / 2;
    y = plane.y ;
    xSize = 4;
    ySize = 4;
    xSpeed = 0;
    ySpeed = -20;
    constructor(plane){
        this.plane = plane;
    }
    // 子弹类
    draw(){
        context.fillRect(this.x - this.xSize / 2, this.y + Math.random() * 10, this.xSize, this.ySize );
    }
    move(){
        this.x = this.x + this.xSpeed;
        this.y = this.y + this.ySpeed;
    }
}
// 子弹长条类
class BulletLong{
    // 保存子弹长条
    body = [];
    plane;
    constructor(plane){
        this.plane = plane;
    };
    // 添加子弹
    add(){
        this.body.push(new Bullet(this.plane));
    }
    // 移动
    move(){
        for(let i = 0; i < this.body.length; i++){
            this.body[i].draw();
            this.body[i].move();
        }
    }
}
// 创建飞机对象
let plane = new Plane();
// 创建子弹长条对象
let bulletLong = new BulletLong(plane);
// 实现飞机的动
setInterval(() => {
    context.clearRect(0, 0, 400, 400);
    plane.draw();
    bulletLong.add();
    bulletLong.move();
    context.strokeRect(0, 0, 400, 400);
}, 100);
<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>飞行射击游戏</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<canvas id="canvas" width="500" height="500">
</canvas>
<script src="./js/main.js"></script>
</body>
</html>