html5 自动生成迷宫,html5 canvas随机迷宫生成动画 -凯发ag旗舰厅登录网址下载

javascript

语言：

javescriptbabelcoffeescript

确定

class line {

constructor(x, y, a, c) {

this.x1 = x;

this.y1 = y;

this.x2 = x;

this.y2 = y;

this.angle = a;

this.cos = math.cos(a);

this.sin = math.sin(a);

this.draw();

this.x2 = this.cos;

this.y2 = this.sin;

this.color = c * 1;

this.collisionlines = new set();

for (let line of lines) {

if (this.raytoline(line) && line.raytoline(this)) {

this.collisionlines.add(line);

}

}

}

anim() {

if (math.random() > 0.96) {

const a = this.angle (math.random() > 0.5 ? math.pi / 2 : -math.pi / 2);

const line = new line(

this.x2 math.cos(a),

this.y2 math.sin(a),

a,

math.max(10, this.color - 10)

);

lines.add(line);

activelines.add(line);

}

for (let line of this.collisionlines) {

if (this !== line) {

const collision = this.intersect(line);

if (collision) {

const x = collision.x;

const y = collision.y;

if (

math.abs(x - this.x2) < math.abs(x - line.x2) &&

math.abs(y - this.y2) < math.abs(y - line.y2)

) activelines.delete(this);

else activelines.delete(line);

}

}

}

this.x2 = this.cos;

this.y2 = this.sin;

if (this.x2 < 0 || this.x2 > width || this.y2 < 0 || this.y2 > height) {

activelines.delete(this);

}

}

draw() {

ctx.beginpath();

ctx.fillstyle = `hsla(42, 60%, ${this.color}%, 1)`;

ctx.arc(this.x2, this.y2, 0.5 math.random() * 0.5, 0, 2 * math.pi);

ctx.fill();

}

raytoline(line) {

if (

(this.y2 - this.y1) / (this.x2 - this.x1) !== (line.y2 - line.y1) / (line.x2 - line.x1)

) {

const d = (((this.x2 - this.x1) * (line.y2 - line.y1)) - (this.y2 - this.y1) * (line.x2 - line.x1));

if (d !== 0) {

const r = (((this.y1 - line.y1) * (line.x2 - line.x1)) - (this.x1 - line.x1) * (line.y2 - line.y1)) / d;

if (r >= 0) return true;

}

}

return false;

}

intersect(line) {

const td = this.x1 * this.y2 - this.y1 * this.x2;

const ld = line.x1 * line.y2 - line.y1 * line.x2;

const x = (td * (line.x1 - line.x2) - (this.x1 - this.x2) * ld) / ((this.x1 - this.x2) * (line.y1 - line.y2) - (this.y1 - this.y2) * (line.x1 - line.x2));

if (isnan(x)) return false;

const y = (td * (line.y1 - line.y2) - (this.y1 - this.y2) * ld) / ((this.x1 - this.x2) * (line.y1 - line.y2) - (this.y1 - this.y2) * (line.x1 - line.x2));

if (isnan(y)) return false;

if (this.x1 >= this.x2) {

if (!(this.x2 - 0.01 <= x && x <= this.x1 0.01)) return false;

} else {

if (!(this.x1 - 0.01 <= x && x <= this.x2 0.01)) return false;

}

if (this.y1 >= this.y2) {

if (!(this.y2 - 0.01 <= y && y <= this.y1 0.01)) return false;

} else {

if (!(this.y1 - 0.01 <= y && y <= this.y2 0.01)) return false;

}

if (line.x1 >= line.x2) {

if (!(line.x2 - 0.01 <= x && x <= line.x1 0.01)) return false;

} else {

if (!(line.x1 - 0.01 <= x && x <= line.x2 0.01)) return false;

}

if (line.y1 >= line.y2) {

if (!(line.y2 - 0.01 <= y && y <= line.y1 0.01)) return false;

} else {

if (!(line.y1 - 0.01 <= y && y <= line.y2 0.01)) return false;

}

return {

x: x,

y: y

};

}

}

const canvas = document.getelementbyid('c');

const ctx = canvas.getcontext('2d');

const width = canvas.width = canvas.offsetwidth * 1;

const height = canvas.height = canvas.offsetheight * 1;

const size = math.max(width, height);

const lines = new set();

const activelines = new set();

function init() {

ctx.clearrect(0, 0, width, height);

lines.clear();

activelines.clear();

for (let j = 0; j < 3; j ) {

const sx = width * 0.1 math.random() * width * 0.8;

const sy = height * 0.1 math.random() * height * 0.8;

for (let i = 0; i < 40; i ) {

const a = math.random() * 2 * math.pi;

const x = sx (math.random() - 0.5) * size * 0.05;

const y = sy (math.random() - 0.5) * size * 0.05;

let line = new line(x, y, a, 90);

lines.add(line);

activelines.add(line);

line = new line(x, y, a math.pi, 90);

lines.add(line);

activelines.add(line);

}

}

}

function run() {

requestanimationframe(run);

for (let line of activelines) {

line.draw();

line.anim();

}

}

canvas.addeventlistener('click', init, false);

init();

run();

总结

以上是凯发ag旗舰厅登录网址下载为你收集整理的html5 自动生成迷宫,html5 canvas随机迷宫生成动画的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发ag旗舰厅登录网址下载网站内容还不错，欢迎将凯发ag旗舰厅登录网址下载推荐给好友。