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

var yPosition = 0;
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();
}
function draw(){
    // 每次循环的时候，需要刷新页面，否则上一次绘制的线段会保留在画布上
    background(200);
    yPosition += 1;
    if(9*50+yPosition >= 500) {
        yPosition = 0;
    }
    line(0, 1*50+yPosition, 500, 1*50+yPosition);
    line(0, 2*50+yPosition, 500, 2*50+yPosition);
    line(0, 3*50+yPosition, 500, 3*50+yPosition);
    line(0, 4*50+yPosition, 500, 4*50+yPosition);
    line(0, 5*50+yPosition, 500, 5*50+yPosition);
    line(0, 6*50+yPosition, 500, 6*50+yPosition);
    line(0, 7*50+yPosition, 500, 7*50+yPosition);
    line(0, 8*50+yPosition, 500, 8*50+yPosition);
    line(0, 9*50+yPosition, 500, 9*50+yPosition);
    line(0, 10*50+yPosition, 500, 10*50+yPosition);
}
new p5();

对战游戏教程实例

p5.js | 对战小游戏