JSFiddle - React, Tailwind, and code Playground

by Timatnet

HTML

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<!--<button id="rerun"></button>-->

<table>
    <tr>
        <th>
            Вероятность возврата: <div id="percent"></div>
        </th>
    </tr>
    <tr>
        <th>
            Среднее время пути: <div id="average-path"></div>
        </th>
    </tr>
    
    <tr>
        <th>
            Среднеквадратичное отклонение по x: <div id="deviationX"></div>
        </th>
    </tr>
    <tr>
        <th>
            Среднеквадратичное отклонение по y: <div id="deviationY"></div>
        </th>
    </tr>
    
    <tr>
        <th>
            Не более чем в двух: <div id="noMore2"></div>
        </th>
    </tr>
</table>

JavaScript

var width = 800, height = 480;
var building = {width: 5, height: 5, margin: 4};
var start = [(building.width+building.margin)*1 - building.margin*0.5, (building.height+building.margin)*1 - building.margin*0.5];
var p = [0.5, 0.25, 0.15];

var paper = Raphael(300, 0, width, height);

for(var i = 0; i < 10; ++i) {
    for(var j = 0; j < 10; ++j) {
        paper.rect(i*(building.width+building.margin), j*(building.height+building.margin), building.width, building.height).animate({fill: "#227fa3", stroke: "#000", "stroke-width": 1}, 2000);
    }
}

var runner = paper.circle(start[0], start[1], building.margin*0.4).animate({fill: "#223fa3", stroke: "#000", "stroke-width": 1}, 2000);
runner.paper = paper;

runner.position = start;

var stepCount = 50;
var step = 0;

function onLine(pos) {
    //alert(pos%building.height == building.margin/2);
    return pos%building.height == building.margin/2;
}

runner.move = function() {
    ++step;
    if(step>=stepCount) return;
    
    this.oldPos = [this.position[0], this.position[1]];
    
    var seed = Math.random();
    /*if(seed < p[0]) this.position[0] += building.width + building.margin
    else if(seed < p[0] + p[1]) this.position[0] -= building.width + building.margin
    else if(seed < p[0] + p[1] + p[2]) this.position[1] += building.height + building.margin
    else this.position[1] -= building.height + building.margin;*/
    if(seed < p[0] && onLine(this.position[1])) this.position[0]++
    else if(seed < p[0] + p[1]&& onLine(this.position[1])) this.position[0]--
    else if(seed < p[0] + p[1] + p[2] && onLine(this.position[0])) this.position[1]++
    /*else if(&& onLine(this.position[0])) === 0) this.position[1]--;*/
    
    this.paper.path("M"+this.oldPos[0]+" "+this.oldPos[1]+"L"+this.position[0]+" "+this.position[1]).attr({opacity: 0}).animate({opacity: 1}, 2000);
    
    this.animate({cx: this.position[0], cy: this.position[1]}, 500, "linear", this.move);
    //setTimeout(function(runner) {
    //   ...