【P5JS教学】对战游戏教程之背景7：如何让线段循环移动-数组

// 由于线段都是同类型的元素，因此我们可以使用数组来做进一步优化
var lineList = new Array();
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();
    // for循环的使用方式
    for(var i =1; i <= 10; i++) {
        // 往数组里新增元素
        lineList.push(new HorizontalLine(i*50));
    }
}
function draw(){
    // 每次循环的时候，需要刷新页面，否则上一次绘制的线段会保留在画布上
    background(200);
    // forEach循环的使用方式
    lineList.forEach(function(eachLine) {
        eachLine.update();
        eachLine.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 | 对战小游戏