html5实现canvas迷宫游戏,HTML5/Canvas/JS 迷宫生成动画

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

/**

* JS for Hartcore

* Alexandre Andrieux @2015

*/

var hc = {};

hc.worlds = [];

hc.startTime;

hc.anim;

hc.summon = function() {

for (key in arguments) {

this.worlds.push(arguments[key]);

}

}

hc.ignite = function() {

this.startTime = new Date().getTime();

this.igniteWorlds();

this.frame();

}

hc.frame = function() {

hc.paint(new Date().getTime());

hc.anim = window.requestAnimationFrame(hc.frame);

}

hc.paint = function(t) {

for (key in hc.worlds) {

hc.worlds[key].world.update(t - hc.startTime);

}

}

hc.igniteWorlds = function() {

for (key in this.worlds) {

this.worlds[key].world.ignite(this.worlds[key].args);

}

}

/**

* JS for Hartcore hc_black

* Alexandre Andrieux @2015

* Black canvas

*/

var hc_black = {

name: "black",

ignite: function() {

var canvas = document.createElement('canvas');

canvas.class = "hart";

canvas.id = this.name;

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

document.body.appendChild(canvas);

this.canvas = document.getElementById(canvas.id);

this.ctx = this.canvas.getContext('2d');

/* Background */

this.background();

},

background: function() {

this.ctx.rect(0, 0, this.canvas.width, this.canvas.height);

this.ctx.fillStyle = "black";

this.ctx.fill();

},

update: function(t) {

//this.evolve(t);

//this.move();

//this.draw();

},

evolve: function(t) {

},

move: function() {

},

draw: function() {

},

};

/**

* JS for Hartcore hc_maya

* Alexandre Andrieux @2015

* Maya world

*/

var hc_maya = {

name: "maya",

ignite: function() {

var canvas = document.createElement('canvas');

canvas.class = "hart";

canvas.id = this.name;

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

document.body.appendChild(canvas);

this.canvas = document.getElementById(canvas.id);

this.ctx = this.canvas.getContext('2d');

this.activeRGBank = 0; // Change to explore other color sets

/* Delayers */

this.delay1 = 2;

this.delay1count = 0;

/* Variable 1 */

this.var1 = 0;

this.var1count = 0;

this.var1var = 1000;

/* Variable 2 */

this.var2 = 0;

this.var2count = 0;

this.var2var = 211;

/* Maya center */

this.xC = this.canvas.width / 2;

this.yC = this.canvas.height / 2;

/* Particle */

this.kuzco = {

rLast: 0,

r: 0,

theta: Math.PI / 2,

thetaLast: Math.PI / 2,

};

},

update: function(t) {

this.evolve(t);

if (++this.delay1count >= this.delay1) {

this.move();

this.draw();

this.delay1count = 0;

} else {

}

},

evolve: function(t) {

// Laws (increasing a variable)

this.simulateVar1();

this.simulateVar2();

// Effects (when this variable reaches a threshold, do sth)

},

simulateVar1: function() {

this.var1count++;

// Range from 0 to 1

this.var1 = 0.5 + 0.5 * Math.sin(this.var1count / this.var1var * 2 * Math.PI);

},

simulateVar2: function() {

this.var2count++;

// Range from 0 to 1

this.var2 = 0.5 + 0.5 * Math.cos(this.var2count / this.var2var * 2 * Math.PI);

},

move: function() {

this.kuzco.rLast = this.kuzco.r;

this.kuzco.r += 5;

this.kuzco.thetaLast = this.kuzco.theta;

this.kuzco.theta += 0.3 * (2 * (Math.random() - 0.5));

//this.kuzco.theta += this.kuzco.r * 2*(Math.random() - 0.5);

},

draw: function() {

// Draw several lines out of one single kuzco

var lines = 20;

for (var i = 0; i < lines; i++) {

var angleExtra = 2 * Math.PI * i / lines;

var sS0 = this.spaceShift(this.kuzco.rLast, this.kuzco.thetaLast + angleExtra);

var sS1 = this.spaceShift(this.kuzco.r, this.kuzco.thetaLast + angleExtra);

var way = (this.kuzco.thetaLast > this.kuzco.theta ? true : false);

this.ctx.strokeStyle = "hsl(" + 160 * this.var1 + ", 50%, 40%)";

this.ctx.lineWidth = 2;

this.ctx.beginPath();

this.ctx.moveTo(sS0.x, sS0.y);

this.ctx.lineTo(sS1.x, sS1.y);

this.ctx.stroke();

this.ctx.beginPath();

//this.ctx.moveTo(sS1.x, sS1.y);

this.ctx.arc(this.xC, this.yC, this.kuzco.r, this.kuzco.thetaLast + angleExtra, this.kuzco.theta + angleExtra, way);

this.ctx.stroke();

}

},

spaceShift: function(r, theta) {

var x = this.xC + r * Math.cos(theta);

var y = this.yC - r * Math.sin(-theta);

return {

x: x,

y: y

};

}

};

hc.summon({

world: hc_black,

args: []

}, {

world: hc_maya,

args: []

});

hc.ignite();