// 点击画面,增加画面振动效果
var backgroundObject;
// 刷新率:每秒画面更新的帧数
var WIN_IFRAME_RATE = 60;
// 由于draw函数是一直在循环,因此为画面振动提供一个前置条件
var screenShakeValue = 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');
// 虽然默认刷新率就是60,不过既然已经定义了刷新率参数,那就配置一下吧!
frameRate(WIN_IFRAME_RATE);
// 设置画布背景颜色
background(200);
// draw函数需要循环
// noLoop();
backgroundObject = new BackgroundObject();
}
function draw(){
// 每次循环的时候,需要刷新页面,否则上一次绘制的线段会保留在画布上
background(200);
// translate函数可以平移窗口内物件,注意通过算法减小screenShakeValue的值
push();
if(screenShakeValue > 0.0) {
translate(random(-screenShakeValue, screenShakeValue), random(-screenShakeValue, screenShakeValue));
screenShakeValue = screenShakeValue - (50.0 / WIN_IFRAME_RATE);
}
backgroundObject.update();
backgroundObject.display();
pop();
}
function mousePressed() {
screenShakeValue = 50;
}
// 抽象:背景
function BackgroundObject() {
// 线段数组,不再需要定义为全局变量了,而是作为BackgroundObject对象的一个属性值
this.lineList = new Array();
// 创建线段
for(var i =1; i <= 10; i++) {
// 横线
this.lineList.push(new HorizontalLine(i*50));
// 竖线
this.lineList.push(new VerticalLine(i*50));
}
}
BackgroundObject.prototype.update = function() {
this.lineList.forEach(function(eachLine) {
eachLine.update();
});
}
BackgroundObject.prototype.display = function() {
this.lineList.forEach(function(eachLine) {
eachLine.display();
});
}
// 抽象:会移动的线段
function BackgroundLine(initPosition) {
this.position = 0;
this.dir = 1; // 线段移动方向
this.initPosition = initPosition; // 初始位置
// 前面的案例中,线段的移动速度是1点,此次我们让这个速度在线段被创建的时候,随机取值
// 请各位同学们回顾一下之前线段的实现方法,如果不采用面向对象的编程方式,如果不抽象BackgroundLine,你需要如何修改这一需求?
this.speed = random(0.5, 2);
}
BackgroundLine.prototype.update = function() {
if(this.initPosition+this.position >= 500 || this.initPosition+this.position <= 0) {
this.dir = -this.dir;
}
this.position = this.position + this.dir*this.speed;
}
BackgroundLine.prototype.display = function() {
// 由于不同的线段在画布中显示的方式不一样(横/竖),因此没必要在此处写实现
}
// 定义横线
function HorizontalLine(init_yPosition) {
// 继承父类属性和方法
BackgroundLine.call(this, init_yPosition);
}
// 继承自BackgroundLine
HorizontalLine.prototype = Object.create(BackgroundLine.prototype);
HorizontalLine.prototype.display = function() {
line(0, this.initPosition+this.position, 500, this.initPosition+this.position);
}
// 定义竖线
function VerticalLine(init_xPosition) {
// 继承父类属性和方法
BackgroundLine.call(this, init_xPosition);
}
// 继承自BackgroundLine
VerticalLine.prototype = Object.create(BackgroundLine.prototype);
// BackgroundLine 父类中定义了display这个方法,只是没有写实现过程,因此,即使VerticalLine并没有提供display这一函数,在程序中调用display方法也不会报错,只不过程序没有任何反应而已!
VerticalLine.prototype.display = function() {
line(this.initPosition+this.position, 0, this.initPosition+this.position, 500);
}
new p5();
【P5JS教学】对战游戏教程之背景12:叠加振动效果
最新推荐文章于 2024-09-10 18:30:31 发布