JSFiddle - React, Tailwind, and code Playground

by Arsen

HTML

<canvas height='1000' width='1000' id='example'>Обновите браузер</canvas>

JavaScript

var example = document.getElementById("example"),
    ctx = example.getContext('2d'),
    colorMap = [
        "",
        "#FF00FF",
        "#FFFF00",
        "#00FF00",
        "#00FFFF"
    ],
    i,
    counter = 0,
    D = 200,
    d = 5,
    direction = [0,1,2,3,0],
    x =[ D/4, D*3/4, D*3/4,D/4,D/2],
    y =[ D/4, D*3/4, D/4, D*3/4,D/2],
    array = Array.apply(null,new Array(D)).map(Number.prototype.valueOf,0),

    mur = function (num) {
        if ((++array[x[num]][y[num]]) == 1) {
            direction[num]--;
            ctx.fillStyle=colorMap[num];
            ctx.fillRect(x[num] * d, y[num] * d, d, d);
        } else {
            direction[num]++;
            array[x[num]][y[num]] = 0;
            ctx.clearRect(x[num] * d, y[num] * d, d, d);
        }
        
        if (direction[num]==-1) {
            direction[num]=3;
        }
        
        if (direction[num]==4) {
            direction[num]=0;
        }
        
        if (direction[num] == 0) {
            x[num]++;
        } else if (direction[num] == 1) {
            y[num]++;
        } else if (direction[num] == 2) {
            x[num]--;
        } else if (direction[num] == 3) {
            y[num]--;
        }
        
        if (x[num]==-1) {
            direction[num]=3;
            x[num]=0;
        } else if(y[num]==-1) {
            direction[num]=0;
            y[num]=0;
        }else if(x[num]==D) {
            x[num]=D-1;
            direction[num]=1;
        } else if(y[num]==D) {
            y[num]=D-1;
            direction[num]=2;
        }            
    };


for (i = 0; i < D; i++){
	array[i] = Array.apply(null,new Array(D)).map(Number.prototype.valueOf,0);
}
for (i=1; i <= 4; i++) {
    setInterval(mur, 10, i);
}

ctx.fillRect(0, 0, 10, 10);
ctx.fillRect(990, 990, 10, 10);
ctx.fillRect(0, 990, 10, 10);
ctx.fillRect(990, 0, 10, 10);