Вот
твой код для сравнения
<!DOCTYPE HTML>
<html>
<head> </head>
<body style="width:100%;height:400px;">
<div id="matrix" style="width:100%;height:100%;" > </div>
<script>
function Column (maxlength) {
this.maxlength = maxlength;
this.speed = this.pause = getRandomInt(1, 4);
this.length = getRandomInt(Math.floor(maxlength/2), Math.floor(maxlength/4 + maxlength/2));
this.free_space = getRandomInt(0, Math.floor(maxlength/4));
this.iterator = 0;
this.text = new Array(this.length + this.free_space);
for (var i=0; i < this.text.length; i++) {
if (i < this.length) {
this.text[i] = String.fromCharCode(getRandomInt(97,122));
} else {
this.text[i] = '.';
}
}
this.length += this.free_space;
}
Column.prototype.inPause = function () {
var result = true;
this.pause--;
if (this.pause == 0) {
this.pause = this.speed;
result = false;
}
return result;
}
Column.prototype.needNew = function() {
result = false;
if (this.iterator == this.text.length + this.maxlength) {
result = true;
}
return result;
}
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function show(columns, array) {
var result = '';
for (var i=0; i < columns.length; i++) {
if (!columns[i].inPause()) {
columns[i].iterator++;
for (var j=0; j < columns[i].iterator; j++){
if (columns[i].iterator - (j + 1) < array.length) {
if (columns[i].length - (j + 1) >= 0) {
array[columns[i].iterator - (j + 1)][i] = columns[i].text[columns[i].length - (j + 1)];
} else {
array[columns[i].iterator - (j + 1)][i] = '.';
}
}
}
if (columns[i].needNew()) {
columns[i] = new Column(array.length);
};
}
}
for (var i=0; i < heigth_length; i++) {
for (var j=0; j < width_length; j++) {
if (array[i][j]=='.') {
result += '<font color="#000000">' + array[i][j] + '</font>';
} else if (i < heigth_length-1) {
if (array[i+1][j]=='.') {
result += '<font color="#00FF00">' + array[i][j] + '</font>';
} else {
result += '<font color="#00CC00">' + array[i][j] + '</font>';
}
}
}
result += '</br>';
}
elem.innerHTML = result;
}
{
var elem = document.getElementById('matrix');
elem.style.backgroundColor = "#000";
elem.style.fontFamily = "Courier New";
elem.style.fontSize = "16px";
var width_length = Math.floor(elem.offsetWidth/10);
var heigth_length = Math.floor(elem.offsetHeight/10);
var columns = new Array(width_length);
for (var i=0; i < width_length; i++) {
columns[i] = new Column(heigth_length);
}
var array = new Array(heigth_length);
for (var i=0; i < heigth_length; i++) {
array[i] = new Array();
for(var j=0; j < width_length; j++) {
array[i][j] = '.';
}
}
console.log(array);
var timer = setInterval(function() { show(columns,array) }, 1);
}
</script>
</body>
</html>