JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
<h1>Robo Maze</h1>
<table>
<tr>
<td><div id="maze"></div></td>
<td>
<h2>Table of results:</h2>
<div id="competitors"></div>
<div id="logs"></div>
</td>
</tr>
</table>
CSS
span.box {
display: inline-block;
width: 15px;
height: 15px;
margin-right: 5px;
}
JavaScript
var algorithmHolder = function() {
var items = {};
return {
putInstance: function(name, instance) {
items[name] = instance;
},
getInstance: function(name) {
return items[name];
}
};
}();
// init your code here
algorithmHolder.putInstance(1, function () {
// sample implementation of algorithm
var afterScan = false,
firstScan = true,
isBegin = true,
moves = [];
var C = { //Constants
REC_FUNCTION_LENGTH : 30,
PW:"", PS:"", PK: "", PE:"",
MM:[], ML:[], MR:[], MU:[],
CM:"", CL:"", CR:"",
TIME: 'TimeOut', DEAD: 'DeadWay', EMPTY: 'EmptyCell', EXIT:'Exit',
corD: function (d) { // d - direction (0..3)
if (d>= 4) return d-4;
if (d<=-1) return d+4;
return d;
},
initConsts: function(api){
this.PW = api.PLACE_WALL;
this.PS = api.PLACE_SPACE;
this.PK = api.PLACE_KEY;
this.PE = api.PLACE_EXIT;
this.MM = [api.CMD_MOVE];
this.ML = [api.CMD_MOVE, api.CMD_LEFT];
this.MR = [api.CMD_MOVE, api.CMD_RIGHT];
this.MU = [api.CMD_MOVE, api.CMD_LEFT, api.CMD_LEFT];
this.CM = api.CMD_MOVE;
this.CR = api.CMD_RIGHT;
this.CL = api.CMD_LEFT;
}
};
var wally = {
x: 0,
y: 0,
isHasKey: false,
// 0 - TOP, 1 - RIGHT, 2 - BOTTOM, 3 - LEFT
direction: 0,
doCMD: function(cmd){
if (cmd === C.CM){
this.doMove();
} else this.doTurn(cmd);
},
doMove: function(){
if(this.direction === 0){
this.y++;
} else if(this.direction === 1){
this.x++;
} else if(this.direction === 2){
this.y--;
} else this.x--;
},
...