Parques

http://jsfiddle.net/z9b2m/44/show/ ?!?!?!??
http://jsfiddle.net/ztfv652d/3/

:D

Other jsfiddles:
http://jsfiddle.net/T7Srr/11/
http://jsfiddle.net/gvKtN/6/show
http://jsfiddle.net/HbhXY/6/show/
http://jsfiddle.net/upnMK/4/show/
http://jsfiddle.net/bLk2mpkp/1/

parques.js

//Started from http://jsfiddle.net/z9b2m/55/    
    function ParquesPlayer(color) {

    this.color = color;
}

function ParquesCell(type, color) {
    this.type = type;
    this.color = color, this.playerPieces = [];
}

function ThrowDice() {
    return [((Math.random() * 6) | 0) + 1, ((Math.random() * 6) | 0) + 1];
}
//parqués board
var ParquesColors = ["#00F", "#F00", "#FF0", "#0F0"].concat(function(){
var f=[]
    for(i=0;i<255;i++){
f.push("#"+Math.floor(Math.random()*0x1000000).toString(16));
}return f;
}()),
    distanceBetween = 4,
    HeavenDistance = 8,
    arcDistance = 6,
    parquesBoard = [],
    heavenStairs = {},MAX_BOARD_PLAYERS=4;
//filling parqués!
function parquesFill(){
for (var scolor = 0, colorl = (Math.ceil(MAX_BOARD_PLAYERS))||ParquesColors.length; scolor < colorl; scolor++) {
    var colorS = heavenStairs[ParquesColors[scolor]] = [];
    for (var i = 0; i < HeavenDistance; i++) colorS.push(new ParquesCell("HeavenStairs", ParquesColors[scolor]));
    parquesBoard.push(new ParquesCell("HeavenExit", ParquesColors[scolor]));
    for (var i = 0; i < distanceBetween; i++) parquesBoard.push(new ParquesCell("Normal", null));
    parquesBoard.push(new ParquesCell("Exit", ParquesColors[scolor]));
    for (var i = 0; i < arcDistance; i++) parquesBoard.push(new ParquesCell("ArcNormal", null));
    parquesBoard.push(new ParquesCell("SafeSpot", ParquesColors[scolor]));
    for (var i = 0; i < distanceBetween; i++) parquesBoard.push(new ParquesCell("Normal", null));
    parquesBoard[parquesBoard.length - 1].type = "NormalLast";
}};parquesFill();

//okay, so lets paint this shit.
var parques = document.getElementById("parques");

parques.width = parques.height = 2000;
var ctx = parques.getContext && parques.getContext("2d");
ctx.translate(0.5, 0.5);
function getIntersectionBetweenL1L2(P1,T1,P2,T2){//P is point, T is angle, that's how I define a line
var P3={},tan1,tan2,c1=P1.y-(tan1=Math.tan(T1))*P1.x,
c2=P2.y-(tan2=Math.tan(T2))*P2.x;
P3.x=(c1-c2)/(tan2-tan1)
P3.y=(c1*tan2-c2*tan1)/(tan2-tan1)
return P3;
}
function getDirectionOfP2RelativeToP1(P1,P2){
return Math.atan2(P2.y-P1.y,P2.x-P1.x);
}
function getPointAccordingToDistanceAndAngle(P1,T,distance){
return {x:P1.x+(Math.cos(T)*distance),y:P1.y+(Math.sin(T)*distance)}
}
function rotatePoint(Point1, Point2, angle) {
    //Get the Angle of a point to another (Arctangent), get the distance(radius), change angle, get new point.
    var Point0 = [Point1[0] - Point2[0], Point1[1] - Point2[1]],
        angle = Math.atan2(Point0[1], Point0[0]) + angle,
        distance = Math.sqrt(Math.pow(Point0[0], 2) + Math.pow(Point0[1], 2));
    //console.log(Math.atan2(Point0[1], Point0[0]))
    return [Point2[0] + Math.cos(angle) * distance, Point2[1] + Math.sin(angle) * distance];
}

function rectAngle(x, y, width, height, angle,p) {
    var rotate;
    ctx.moveTo(x, y);
if(p)p.push([x,y]);
ctx.lineTo.apply(ctx,rotate=rotatePoint([x+width, y], [x, y], angle));
if(p)p.push(rotate);
ctx.lineTo.apply(ctx, rotate=rotatePoint([x+width,y+height], [x, y], angle));
if(p)p.push(rotate);
ctx.lineTo.apply(ctx, rotate=rotatePoint([x,y+height], [x, y], angle));
if(p)p.push(rotate);
    ctx.lineTo(x, y)
}
var o = {
    x: 200,
    y: 400,
    w: 20,
    h: 50,
    RadiusPercentage: 1.3
}

    function paint() {
        var house=[],houseCo=[],houseEdgeCo=[]

        var state = Math.PI,
            Step = (Math.PI) * 2/MAX_BOARD_PLAYERS,
            SquareAngles=0,
            arc = false,
            l = 0,coord;
        for (var i = 0, p; i < parquesBoard.length; i++) {
            p = parquesBoard[i];
            //console.log(p)
            if (p.type != "ArcNormal") {
                ctx.beginPath();
                if (p.color) {
                    ctx.strokeStyle = p.color
                } else {
                    ctx.strokeStyle = "black"
                }
                coord=[];
                rectAngle(o.x, o.y, o.w, o.h, SquareAngles,coord);
                ctx.closePath();
                ctx.stroke();
                if (p.type == "HeavenExit") {
                    
o.x=coord[1][0],o.y=coord[1][1];                    
ctx.beginPath();
ctx.fillStyle="red" 
ctx.arc(coord[3][0],coord[3][1],5,0,2*Math.PI,false);
ctx.closePath();
ctx.fill();
ctx.beginPath();
                    ctx.strokeStyle="red"
ctx.moveTo(coord[3][0],coord[3][1])
ctx.lineTo(coord[3][0]+90*Math.cos(state),coord[3][1]+90*Math.sin(state))
houseCo.push([{x:coord[3][0],y:coord[3][1]},state+(Math.PI*1/2)])
ctx.stroke();
ctx.strokeStyle=p.color
ctx.beginPath();
var coord2;
                    for(var ii=0;ii<HeavenDistance;ii++){
coord2=[];
                rectAngle(o.x, o.y, o.w, o.h, SquareAngles,coord2);
o.x=coord2[1][0],o.y=coord2[1][1];                    
}
ctx.closePath();
ctx.stroke();                    
                    o.x = coord[3][0],
                    o.y = coord[3][1];
                    
                } else if (p.type == "Normal" || p.type == "SafeSpot" || p.type == "Exit") {
                    arc = false;
                    o.x = coord[1][0];
                    o.y = coord[1][1];
                    state=SquareAngles;
                } else if (p.type == "NormalLast") {
                    o.x = coord[1][0];
                    o.y = coord[1][1];
                    SquareAngles+=Math.PI;

                }
            } else {
                if (!arc) {
SquareAngles+=Math.PI-Step;
                    arc = true;
                    state += Math.PI / 2;
                    ctx.beginPath();

                    if (p.color) {
                        ctx.strokeStyle = p.color;
                    } else {
                        ctx.strokeStyle = "black";
                    }
                    var le = o.w * o.RadiusPercentage / Math.sqrt((Math.pow(1 - Math.cos((Math.PI-Step)/arcDistance), 2) + Math.pow(Math.sin((Math.PI-Step)/arcDistance), 2))),
                        center = [(o.x) + (Math.cos(state) * le), (o.y) + (Math.sin(state) * le)];
                    l++;

                    ctx.arc(center[0], center[1], le, state + Math.PI, state-Step, false);
                    for (var angl = state - Math.PI,ed=[]; angl <=  state-Step ; angl += (Math.PI-Step) /arcDistance) {
                        ctx.moveTo(center[0] + Math.cos(angl) * le, center[1] + Math.sin(angl) * le);
ed.push([center[0] + Math.cos(angl) * (le - o.h), center[1] + Math.sin(angl) * (le - o.h)])
                        ctx.lineTo(center[0] + Math.cos(angl) * (le - o.h), center[1] + Math.sin(angl) * (le - o.h));
                    }houseEdgeCo.push(ed)
                    ctx.moveTo(center[0] + ((le - o.h) * Math.cos(state +Math.PI)), center[1] + ((le - o.h) * Math.sin(state +Math.PI)));

                    ctx.arc(center[0], center[1], le - o.h, state - Math.PI, state -Step, false);
                    ctx.closePath
                    ctx.stroke();
                    o.x = (center[0] + (le * Math.cos(state - Step))), o.y = (center[1] + (le * Math.sin(state -Step)));



                }
            }

        }
//console.log(houseEdgeCo);
        ctx.beginPath();
        ctx.fillStyle="purple"
for(var i=0,l=houseCo.length,P3,P4;i<l;i++){
P3=getIntersectionBetweenL1L2(houseCo[i][0],houseCo[i][1],houseCo[(i+1)%l][0],houseCo[(i+1)%l][1])
ctx.moveTo(P3.x,P3.y)
ctx.arc(P3.x,P3.y,5,0,2*Math.PI,false)
P4=getPointAccordingToDistanceAndAngle(houseCo[i][0],getDirectionOfP2RelativeToP1(P3,houseCo[i][0]),o.h)
ctx.moveTo(P4.x,P4.y)
ctx.arc(P4.x,P4.y,5,0,2*Math.PI,false)
P4=getPointAccordingToDistanceAndAngle(houseCo[(i+1)%l][0],getDirectionOfP2RelativeToP1(P3,houseCo[(i+1)%l][0]),o.h)
ctx.moveTo(P4.x,P4.y)
ctx.arc(P4.x,P4.y,5,0,2*Math.PI,false)
}
for(var i=0,l=houseEdgeCo.length;i<l;i++){
houseEdgeCo[i].forEach(function(a){ctx.moveTo(a[0],a[1]);ctx.arc(a[0],a[1],5,0,2*Math.PI,false)})

}
ctx.fill();
    }
paint();