randomCodeIndex = M.randomFromInterval(0, (M.codes.length - 1));
randomCode = M.codes[randomCodeIndex];
randomCodeLen = randomCode.length;
randomCharIndex = M.randomFromInterval(2, (randomCodeLen - 1));
newRandomCharIndex = M.randomFromInterval(0, (M.letters.length - 1));
newRandomChar = M.letters[newRandomCharIndex];
randomCode[randomCharIndex] = newRandomChar;
}
M.swapCharacters();
},
createLines: function() {
M.linesC = document.createElement('canvas');
M.linesC.width = M.WIDTH;
M.linesC.height = M.HEIGHT;
M.linesC.style.position = 'absolute';
M.linesC.style.top = 0;
M.linesC.style.left = 0;
M.linesC.style.zIndex = 10;
document.body.appendChild(M.linesC);
var linesYBlack = 0;
var linesYWhite = 0;
M.ctx2 = M.linesC.getContext('2d');
M.ctx2.beginPath();
M.ctx2.lineWidth = 1;
M.ctx2.strokeStyle = 'rgba(0, 0, 0, 0.7)';
while (linesYBlack < M.HEIGHT) {
M.ctx2.moveTo(0, linesYBlack);
M.ctx2.lineTo(M.WIDTH, linesYBlack);
linesYBlack += 5;
}
M.ctx2.lineWidth = 0.15;
M.ctx2.strokeStyle = 'rgba(255, 255, 255, 0.7)';
while (linesYWhite < M.HEIGHT) {
M.ctx2.moveTo(0, linesYWhite + 1);
M.ctx2.lineTo(M.WIDTH, linesYWhite + 1);
linesYWhite += 5;
}
M.ctx2.stroke();
},
assignColumn: function() {
var randomColumn = M.randomFromInterval(0, (M.COLUMNS - 1));
if (M.codes[randomColumn][0].open) {
M.codes[randomColumn][0].open = false;
} else {
return false;
}
return randomColumn;
},
randomFromInterval: function(from, to) {
return Math.floor(Math.random() * (to - from + 1) + from);
},
snapshot: function() {
window.open(M.c.toDataURL());
}
};
function eventListenerz() {
var controlToggles = document.getElementsByClassName('toggle-info');
var controls = document.getElementById('info');
var snapshotBtn = document.getElementById('snapshot');
function toggleControls(e) {
e.preventDefault();
controls.className = controls.className === 'closed' ? '' : 'closed';
}
for (var j = 0; j < 2; j++) {
controlToggles[j].addEventListener('click', toggleControls, false);
}
snapshotBtn.addEventListener('click', M.snapshot, false);
}
window.onload = function() {
M.init();
eventListenerz();
};
css代码：
@import url("http://fonts.googleapis.com/css?family=Carrois+Gothic");
@font-face {
font-family: 'matrix-code';
src: url('http://neilcarpenter.com/demos/canvas/matrix/font/matrix-code.eot?#iefix') format('embedded-opentype'), url('http://neilcarpenter.com/demos/canvas/matrix/font/matrix-code.woff') format('woff'), url('http://neilcarpenter.com/demos/canvas/matrix/font/matrix-code.ttf') format('truetype'), url('http://neilcarpenter.com/demos/canvas/matrix/font/matrix-code.svg#svgFontName') format('svg');
}
