【P5JS教学】对战游戏教程之背景6：如何让线段循环移动-面向对象

// 面向过程和面向对象是两种编程方式，我们可以发现，当画面中出现多个同类型对象时，使用面向过程的方式编程，会重复定义类似的变量以及方法函数，本教程我们来看看面向对象的编程方式是如何实现的。
var line1, line2, line3, line4, line5, line6, line7, line8, line9, line10;    // 下一篇再使用数组教学，请按部就班学习。
function setup() {
        // 创建居中画布
        var centerDiv = createDiv();
        centerDiv.id('centerDiv');
        centerDiv.style('text-align', 'center');
        centerDiv.parent('app');
        // 画布大小定义为 500x500 px
        var app = createCanvas(500, 500);
        app.parent('centerDiv');
        // 设置画布背景颜色
        background(200);
        // draw函数需要循环
        // noLoop();
        line1 = new HorizontalLine(1*50);
        line2 = new HorizontalLine(2*50);
        line3 = new HorizontalLine(3*50);
        line4 = new HorizontalLine(4*50);
        line5 = new HorizontalLine(5*50);
        line6 = new HorizontalLine(6*50);
        line7 = new HorizontalLine(7*50);
        line8 = new HorizontalLine(8*50);
        line9 = new HorizontalLine(9*50);
        line10 = new HorizontalLine(10*50);
}
function draw(){
    // 每次循环的时候，需要刷新页面，否则上一次绘制的线段会保留在画布上
    background(200);
    // 将参数更新与图像绘制拆分成两个函数，是一种好习惯，未来你会有所体会。
    line1.update();
    line1.display();
    line2.update();
    line2.display();
    line3.update();
    line3.display();
    line4.update();
    line4.display();
    line5.update();
    line5.display();
    line6.update();
    line6.display();
    line7.update();
    line7.display();
    line8.update();
    line8.display();
    line9.update();
    line9.display();
    line10.update();
    line10.display();
}
// 定义对象
function HorizontalLine(init_yPosition) {
    this.yPosition = 0;
    this.yDir = 1;
    this.init_yPosition = init_yPosition;
}
// 更新位置
HorizontalLine.prototype.update = function() {
    if(this.init_yPosition+this.yPosition >= 500 || this.init_yPosition+this.yPosition <= 0) {
        this.yDir = -this.yDir;
    }
    this.yPosition = this.yPosition + this.yDir*1;
}
// 更新画面
HorizontalLine.prototype.display = function() {
    line(0, this.init_yPosition+this.yPosition, 500, this.init_yPosition+this.yPosition);
}
new p5();

 对战游戏教程实例

p5.js | 对战小游戏