JSFiddle - React, Tailwind, and code Playground
HTML
<div id="gameContainer">
</div>
JavaScript
$(document).ready(function(){
new HabrTask().init();
});
function HabrTask() {
var that = this;
var gameContainer = $('#gameContainer');
var initialArray = [];
var sizeX = 25;
var sizeY = 25;
var colorSet = ['red','green','blue','yellow','grey','pink'];
var table = null;
var currentDirectionsArray = [];
this.init = function()
{
that._fillMatrix();
that._appendTable();
that._setupEvents();
that._runTimer();
}
this._fillMatrix = function(){
for(var x=0;x<sizeX;x++){
var xArray = [];
for(var y=0;y<sizeY;y++){
xArray.push({x:x,y:y,color:'white'});
}
initialArray.push(xArray);
};
}
this._appendTable = function(){
table = $('<table />').attr("cellspacing",0).css('border','1px solid black');
for(var y=0;y<initialArray.length;y++){
var xArray = initialArray[y];
var tr = $('<tr />');
for(var x=0;x<xArray.length;x++){
var td = $('<td/>').css({'width':'10px','height':'10px','background-color':'white','border':'1px solid black'}).attr('x',x).attr('y',y).attr('id','td'+x+'_'+y);
$(tr).append(td);
}
$(table).append(tr);
};
$(gameContainer).append(table);
}
this._registerNewAction = function(startFromY){
var newActionInfo = {
color : that._getRandomColor(),
priority : new Date().getTime(),
upY : startFromY,
downY : startFromY
};
currentDirectionsArray.push(newActionInfo);
}
this._runTimer = function(){
setInterval(function(){
//console.log('run');
that._handle();
...