html5 svg动画示范,HTML5 SVG 经典链式反应动画演示

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

(function() {

var $chart, $main, $row, $score, Dot, Ping, Points, Stop, Tick, dot, dots, getDot, i, j, rand, svgNs, x, xlinkNs, y;

svgNs = "http://www.w3.org/2000/svg";

xlinkNs = "http://www.w3.org/1999/xlink";

$score = document.querySelector("#score");

$main = document.querySelector("main");

$chart = document.querySelector("#chart");

rand = function(min, max) {

return min + Math.floor(Math.random() * (max - min));

};

dots = [];

getDot = function(x, y) {

if (y < 0) {

return null;

}

if (y >= dots.length) {

return null;

}

if (x < 0) {

return null;

}

if (x >= dots[y].length) {

return null;

}

return dots[y][x];

};

Points = 0;

Dot = function($wrapper, x, y) {

var $column, $use, pingMaybe, refresh, self;

self = this;

$column = document.createElementNS(svgNs, "svg");

$column.setAttributeNS(svgNs, "viewBox", "0 0 20 20");

$column.setAttribute("data-x", x);

$column.style.top = (y * 22) + "px";

$column.style.left = (x * 22) + "px";

$use = document.createElementNS(svgNs, "use");

$use.setAttributeNS(xlinkNs, "xlink:href", "#dot");

$column.appendChild($use);

$wrapper.appendChild($column);

refresh = function(plus) {

if (plus == null) {

plus = 0;

}

self.rotation += plus;

return $column.style.transform = "rotate(" + (self.rotation * 90) + "deg)";

};

self.getRotation = function() {

return ((self.rotation % 4) + 4) % 4;

};

self.stop = function() {

self.pleaseRotate = false;

return self.pleasePing = false;

};

self.stop();

self.randomize = function() {

self.rotation = rand(0, 3);

return refresh();

};

self.randomize();

/*

pingDirection

↑ - 0

→ - 1

↓ - 2

← - 3

*/

pingMaybe = function(pingDirection) {

var canPing, pingX, pingY, victim;

pingX = x;

pingY = y;

if (pingDirection === 0) {

pingY -= 1;

}

if (pingDirection === 1) {

pingX += 1;

}

if (pingDirection === 2) {

pingY += 1;

}

if (pingDirection === 3) {

pingX -= 1;

}

victim = getDot(pingX, pingY);

if (victim !== null) {

canPing = false;

if ((pingDirection === 1) || (pingDirection === 2)) {

if (victim.getRotation() === 0) {

canPing = true;

}

}

if ((pingDirection === 2) || (pingDirection === 3)) {

if (victim.getRotation() === 1) {

canPing = true;

}

}

if ((pingDirection === 3) || (pingDirection === 0)) {

if (victim.getRotation() === 2) {

canPing = true;

}

}

if ((pingDirection === 0) || (pingDirection === 1)) {

if (victim.getRotation() === 3) {

canPing = true;

}

}

if (canPing) {

return victim.pleaseRotate = true;

}

}

};

/*

pingRotation

┛ - 0

┗ - 1

┏ - 2

┓ - 3

*/

self.ping = function() {

var pingRotation;

if (!self.pleasePing) {

return;

}

pingRotation = self.getRotation();

if (pingRotation === 0) {

pingMaybe(0);

pingMaybe(3);

}

if (pingRotation === 1) {

pingMaybe(0);

pingMaybe(1);

}

if (pingRotation === 2) {

pingMaybe(1);

pingMaybe(2);

}

if (pingRotation === 3) {

pingMaybe(2);

pingMaybe(3);

}

return self.pleasePing = false;

};

$column.addEventListener("click", function(event) {

Stop();

self.pleaseRotate = true;

return refresh();

});

self.update = function() {

if (self.pleaseRotate) {

refresh(1);

self.pleaseRotate = false;

self.pleasePing = true;

return 1;

}

return 0;

};

return self;

};

$main.style.width = (40 * 22) + "px";

$main.style.height = (20 * 22) + "px";

for (y = i = 0; i < 20; y = ++i) {

$row = document.createElement("div");

$row.setAttribute("data-y", y);

dots[y] = [];

for (x = j = 0; j < 40; x = ++j) {

dot = new Dot($row, x, y);

dots[y][x] = dot;

}

$main.appendChild($row);

}

Stop = function() {

var k, len, results, row;

Points = 0;

$score.textContent = Points;

$score.className = "";

$chart.innerHTML = "";

results = [];

for (k = 0, len = dots.length; k < len; k++) {

row = dots[k];

results.push((function() {

var l, len1, results1;

results1 = [];

for (l = 0, len1 = row.length; l < len1; l++) {

dot = row[l];

results1.push(dot.stop());

}

return results1;

})());

}

return results;

};

this.Randomize = function() {

var k, l, len, len1, row;

Stop();

for (k = 0, len = dots.length; k < len; k++) {

row = dots[k];

for (l = 0, len1 = row.length; l < len1; l++) {

dot = row[l];

dot.randomize();

}

}

return false;

};

Ping = function() {

var k, len, results, row;

results = [];

for (k = 0, len = dots.length; k < len; k++) {

row = dots[k];

results.push((function() {

var l, len1, results1;

results1 = [];

for (l = 0, len1 = row.length; l < len1; l++) {

dot = row[l];

results1.push(dot.ping());

}

return results1;

})());

}

return results;

};

Tick = function() {

var $bar, k, l, len, len1, row, tickPoints;

tickPoints = 0;

for (k = 0, len = dots.length; k < len; k++) {

row = dots[k];

for (l = 0, len1 = row.length; l < len1; l++) {

dot = row[l];

tickPoints += dot.update();

}

}

if (tickPoints > 0) {

$bar = document.createElement("b");

$bar.style.height = tickPoints + "px";

$chart.appendChild($bar);

}

if (tickPoints === 0) {

$score.className = "finished";

}

Points += tickPoints;

$score.textContent = Points;

return window.setTimeout(Ping, 0);

};

window.setInterval(Tick, 500);

}).call(this);