html5 自动生成迷宫,html5 canvas随机迷宫生成动画 -ag凯发k8国际
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凯发k8国际为你收集整理的html5 自动生成迷宫,html5 canvas随机迷宫生成动画的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： html加减中间的值不能修改,在移动ht
- 下一篇：