// 由于线段都是同类型的元素,因此我们可以使用数组来做进一步优化
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 | 对战小游戏