Snakes & Ladders

Snakes and Ladders

Roll the dice, climb ladders and avoid the snakes. First to 100 wins.
Game over
Rules: roll a 6 to play again. You must roll the exact number to land on 100. Ladders take you up, snakes slide you down. On one phone, pass it to the next player.
(function(){var S=42,W=420,H=456,cv,cx,dc,dx,dd,players=[],cur=0,busy=false,over=false,snd=true,ac=null,gen=0;var SN={99:78,95:75,92:73,87:24,64:60,62:19,54:34,17:7},LD={1:38,4:14,9:31,21:42,28:84,36:44,51:67,71:91,80:100},COL=["#d90429","#1f1a1b","#1d4ed8","#15803d"];var PIP={1:[[1,1]],2:[[0,0],[2,2]],3:[[0,0],[1,1],[2,2]],4:[[0,0],[2,0],[0,2],[2,2]],5:[[0,0],[2,0],[1,1],[0,2],[2,2]],6:[[0,0],[2,0],[0,1],[2,1],[0,2],[2,2]]},OFF=[[-7,-6],[7,-6],[-7,6],[7,6]];function $(i){return document.getElementById(i)}function ge(a,c){return Math.max(a,c)===a}function msg(t){$("slM").textContent=t}function later(f,ms){var g=gen;setTimeout(function(){if(g===gen){f()}},ms)}function beep(f,d){if(!snd){return}try{ac=ac||new (window.AudioContext||window.webkitAudioContext)();var o=ac.createOscillator(),g=ac.createGain();o.frequency.value=f;g.gain.value=0.07;o.connect(g);g.connect(ac.destination);o.start();o.stop(ac.currentTime+d);}catch(e){}}function sq(n){var r=Math.floor((n-1)/10),c=(n-1)%10;if(r%2===1){c=9-c}return {x:c*S+S/2,y:(9-r)*S+S/2}}function pt(n,i){return n===0?{x:26+i*30,y:H-18}:sq(n)}function rr(c,x,y,w,h,r){c.beginPath();c.moveTo(x+r,y);c.arcTo(x+w,y,x+w,y+h,r);c.arcTo(x+w,y+h,x,y+h,r);c.arcTo(x,y+h,x,y,r);c.arcTo(x,y,x+w,y,r);c.closePath()}function face(v){var c=dx,k,p;c.setTransform(dd,0,0,dd,0,0);c.clearRect(0,0,84,84);c.fillStyle="#ffffff";c.strokeStyle="#d90429";c.lineWidth=4;rr(c,4,4,76,76,14);c.fill();c.stroke();c.fillStyle="#1f1a1b";for(k=0;k!==PIP[v].length;k++){p=PIP[v][k];c.beginPath();c.arc(20+p[0]*22,20+p[1]*22,6,0,Math.PI*2);c.fill()}}function ladder(a,b){var A=sq(a),B=sq(b),dx0=B.x-A.x,dy0=B.y-A.y,L=Math.sqrt(dx0*dx0+dy0*dy0),ux=dx0/L,uy=dy0/L,nx=0-uy*5,ny=ux*5,k;cx.strokeStyle="rgba(31,26,27,.85)";cx.lineWidth=3;cx.lineCap="round";cx.beginPath();cx.moveTo(A.x+nx,A.y+ny);cx.lineTo(B.x+nx,B.y+ny);cx.moveTo(A.x-nx,A.y-ny);cx.lineTo(B.x-nx,B.y-ny);cx.stroke();cx.lineWidth=2;cx.beginPath();for(k=10;ge(L-8,k);k+=14){cx.moveTo(A.x+ux*k+nx,A.y+uy*k+ny);cx.lineTo(A.x+ux*k-nx,A.y+uy*k-ny)}cx.stroke();}function snake(h,t){var A=sq(h),B=sq(t),dx0=B.x-A.x,dy0=B.y-A.y,L=Math.sqrt(dx0*dx0+dy0*dy0),nx=0-dy0/L,ny=dx0/L,k,u,o,pts=[],e;for(k=0;k!==31;k++){u=k/30;o=Math.sin(u*Math.PI*3)*7;pts.push({x:A.x+dx0*u+nx*o,y:A.y+dy0*u+ny*o})}cx.lineCap="round";cx.lineJoin="round";cx.strokeStyle="#d90429";cx.lineWidth=8;cx.beginPath();cx.moveTo(pts[0].x,pts[0].y);for(k=1;k!==31;k++){cx.lineTo(pts[k].x,pts[k].y)}cx.stroke();cx.strokeStyle="#ff8fa0";cx.lineWidth=2;cx.beginPath();cx.moveTo(pts[0].x,pts[0].y);for(k=1;k!==31;k++){cx.lineTo(pts[k].x,pts[k].y)}cx.stroke();cx.fillStyle="#9d0220";cx.beginPath();cx.arc(A.x,A.y,8,0,Math.PI*2);cx.fill();for(e=-1;e!==3;e+=2){cx.fillStyle="#fff";cx.beginPath();cx.arc(A.x+e*3,A.y-2,2.4,0,Math.PI*2);cx.fill();cx.fillStyle="#1f1a1b";cx.beginPath();cx.arc(A.x+e*3,A.y-2,1,0,Math.PI*2);cx.fill()}}function draw(){var n,r,c,x,y,k,j,same,o,p,q;cx.clearRect(0,0,W,H);for(n=1;n!==101;n++){r=Math.floor((n-1)/10);c=(n-1)%10;if(r%2===1){c=9-c}x=c*S;y=(9-r)*S;cx.fillStyle=(n===100)?"#ffe3e8":(((r+c)%2===0)?"#ffffff":"#fff3f5");cx.fillRect(x,y,S,S);cx.fillStyle=(n===100)?"#d90429":"#b58a92";cx.font=(n===100?"bold ":"")+"10px sans-serif";cx.textBaseline="alphabetic";cx.fillText(String(n),x+3,y+11);}cx.strokeStyle="#f0d4d9";cx.lineWidth=1;cx.strokeRect(0.5,0.5,W-1,W-1);cx.fillStyle="#fff1f3";cx.fillRect(0,W,W,H-W);cx.fillStyle="#9d0220";cx.font="bold 11px sans-serif";cx.fillText("START",W-52,H-12);for(k in LD){ladder(parseInt(k,10),LD[k])}for(k in SN){snake(parseInt(k,10),SN[k])}for(k=0;k!==players.length;k++){p=players[k];x=p.ax;y=p.ay;if(!p.mv){if(p.pos!==0){same=0;o=0;for(j=0;j!==players.length;j++){if(j!==k){if(players[j].pos===p.pos){same++;if(j!==k){if(ge(k,j+1)){o++}}}}}if(same!==0){q=OFF[o];x+=q[0];y+=q[1]}}}if(k===cur){if(!over){cx.fillStyle="rgba(217,4,41,.18)";cx.beginPath();cx.arc(x,y,14,0,Math.PI*2);cx.fill()}}cx.fillStyle=p.col;cx.strokeStyle="#ffffff";cx.lineWidth=3;cx.beginPath();cx.arc(x,y,9,0,Math.PI*2);cx.fill();cx.stroke();cx.strokeStyle="#1f1a1b";cx.lineWidth=1;cx.beginPath();cx.arc(x,y,10.5,0,Math.PI*2);cx.stroke();}}function upP(){var box=$("slP"),k,d,s,t;box.innerHTML="";for(k=0;k!==players.length;k++){d=document.createElement("div");d.className="sl-chip"+(k===cur?" cur":"");s=document.createElement("i");s.style.background=players[k].col;t=document.createElement("span");t.textContent=players[k].name+": "+(players[k].pos===0?"Start":String(players[k].pos));d.appendChild(s);d.appendChild(t);box.appendChild(d);}}function begin(keep){var p=players[cur];busy=false;upP();draw();$("slR").disabled=p.cpu;if(!keep){msg(p.cpu?p.name+" is thinking...":(p.name==="You"?"Your turn. Press Roll dice.":p.name+", your turn. Press Roll dice."))}if(p.cpu){later(doRoll,900)}}function start(){var n=parseInt($("slN").value,10),m=$("slMode").value,i,c;gen++;busy=false;over=false;cur=0;players=[];$("tsl").className="";for(i=0;i!==n;i++){c=pt(0,i);players.push({pos:0,name:(m==="cpu")?(i===0?"You":"Computer "+i):"Player "+(i+1),cpu:(m==="cpu")?(i!==0):false,mv:false,ax:c.x,ay:c.y,col:COL[i]});}face(1);begin(false);}function doRoll(){if(busy||over){return}busy=true;$("slR").disabled=true;var f=0,fin=1+Math.floor(Math.random()*6);(function spin(){if(f===10){face(fin);msg(players[cur].name+" rolled "+fin+".");later(function(){go(fin)},400);return}face(1+Math.floor(Math.random()*6));beep(300+f*25,.03);f++;later(spin,70);})();}function go(r){var p=players[cur],t=p.pos+r;if(ge(t,101)){msg(p.name+" needs the exact number to reach 100.");later(function(){endTurn(r)},1000);return}p.mv=true;(function step(){if(p.pos===t){p.mv=false;landed(r);return}p.pos++;var c=pt(p.pos,cur);p.ax=c.x;p.ay=c.y;draw();upP();beep(440,.04);later(step,150);})();}function slide(p,d,cb){var a={x:p.ax,y:p.ay},b=pt(d,cur),k=0;p.mv=true;later(function(){(function fr(){k++;var u=k/16;p.ax=a.x+(b.x-a.x)*u;p.ay=a.y+(b.y-a.y)*u;draw();if(k===16){p.pos=d;p.mv=false;draw();upP();cb();return}later(fr,35);})();},500);}function landed(r){var p=players[cur],d;if(SN[p.pos]!==undefined){d=SN[p.pos];msg("Snake! "+p.name+" slides down to "+d+".");beep(180,.4);slide(p,d,function(){fin(r)});return}if(LD[p.pos]!==undefined){d=LD[p.pos];msg("Ladder! "+p.name+" climbs up to "+d+".");beep(700,.15);slide(p,d,function(){fin(r)});return}fin(r);}function fin(r){var p=players[cur];if(p.pos===100){win();return}later(function(){endTurn(r)},600);}function endTurn(r){if(r===6){msg(players[cur].name+" rolled a 6 and plays again!");begin(true)}else{cur=(cur+1)%players.length;begin(false)}}function win(){over=true;busy=false;draw();upP();$("slT").textContent=players[cur].name+(players[cur].name==="You"?" win!":" wins!");$("slS").textContent="Reached square 100. Great game!";$("slB").textContent="Play again";$("tsl").className="won";beep(523,.12);later(function(){beep(659,.12)},140);later(function(){beep(784,.25)},280);}function sndT(){snd=!snd;$("slSnd").textContent="Sound: "+(snd?"On":"Off");if(snd){beep(600,.06)}}cv=$("slCv");dc=$("slDie");var dpr=Math.min(2,window.devicePixelRatio||1);cv.width=W*dpr;cv.height=H*dpr;cx=cv.getContext("2d");cx.setTransform(dpr,0,0,dpr,0,0);dd=dpr;dc.width=84*dpr;dc.height=84*dpr;dx=dc.getContext("2d");window.tgSl={roll:doRoll,start:start,snd:sndT};start();})();