JSFiddle - React, Tailwind, and code Playground
HTML
<textarea id="t1" readonly></textarea>
CSS
#t1{
overflow:hidden;
width:600px;
height:600px;
}
JavaScript
var points = [],
temp, j = 1,
colCount = 15,
rowCount = 7,
current = [rowCount - 1, colCount - 1],
len = String(rowCount * colCount).length;
for(var row = rowCount; row--;){
var lines = [];
points.push(lines);
for(var col = colCount; col--;){
lines.push((new Array(len).join(0) + j++).slice(-len));
}
}
points[current[0]][current[1]] = new Array(len + 1).join('_');
var success = points.join('\n');
function move(direction){
if (!(/^[0-3]$/.test(direction))) return;
var offset = [[-1, 0], [0, -1], [+1, 0], [0, +1]][direction],
next = [current[0] + offset[0], current[1] + offset[1]];
if (!points[next[0]] || !points[next[0]][next[1]]) return;
points[current[0]][current[1]] = points[next[0]][next[1]];
points[next[0]][next[1]] = new Array(len + 1).join('_');
current = next;
return true;
}
for(var i = rowCount * colCount * 4; i--;){
move(0 | (Math.random() * 4));
}
var t1 = document.getElementById("t1");
t1.value = points.join('\n');
t1.onkeyup = function(e){
if (move(40 - (e || event).keyCode) && success == (t1.value = temp = points.join('\n'))){
t1.onkeyup = alert('YOU WIN !');
}
};
t1.focus();