bcom/allein/pieces.php

<span id="out"></span><br/>
<canvas id="pieces" width="1000" height="500"></canvas>

<script type="text/javascript">
	var pieceColor = "#33E722";
	var backColor = "#212121";
	var canvas = document.getElementById('pieces');
	var drawWidth = document.body.clientWidth - 50
	canvas.width = drawWidth;
	var ctx = canvas.getContext('2d');
	ctx.fillStyle = backColor;
	ctx.fillRect(0,0,drawWidth,500);
	roundRect(ctx,10,10,100,70,5,true,false);
	var tas=[[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19],[],[]];
	//var tas=[[0,1,2],[],[]];
	var X = [drawWidth/4,drawWidth/2,3*drawWidth/4];
	var Y = 450;
	var Yhigh = 30;
	var moves = [];
	var pieceHeigth = 7;
	var pieceLevitation = 1;
	var speed = 5;
	var pieceDelta = 1;
	var getWidthFromSize = function(x){return 7*x+10;}
	var entreDeux = 200;
	document.getElementById('out').innerHTML="Géneration des déplacements";
	bouge(0,2,1,19);
	document.getElementById('out').innerHTML="Placement des pieces";
	redraw();
	
	function bouge(a,b,c,z){
		if(z===1){moves.push([a,b]);return;}
		bouge(a,c,b,z-1);
		bouge(a,b,c,1);
		bouge(c,b,a,z-1);
	}
	da = moves[moves.length-1][0];
	db = moves[moves.length-1][1];
	deplacer(da,db);
	
	function pieceDeplacing(){
		var signe = (da>db)?-1:1;
		ctx.fillStyle = backColor;
		ctx.fillRect(oldX,oldY,L,pieceHeigth);
		oldX = oldX + (signe * pieceDelta);
		if((signe===1)?oldX>=endX:oldX<=endX){
			setTimeout(pieceDescending,speed);
			oldX = endX;
		}else
			setTimeout(pieceAscending,speed);
			
		ctx.fillStyle = pieceColor;
		ctx.fillRect(oldX,oldY,L,pieceHeigth);
	}
	
	function pieceAscending(){
		ctx.fillStyle = backColor;
		ctx.fillRect(oldX,oldY,L,pieceHeigth);
		oldY = oldY-pieceDelta;
		if(oldY<=topY){
			oldY = topY
			setTimeout(pieceDeplacing,speed);
		}else
			setTimeout(pieceAscending,speed);
		ctx.fillStyle = pieceColor;
		ctx.fillRect(oldX,oldY,L,pieceHeigth);
	}
				
	function pieceDescending(){
		ctx.fillStyle = backColor;
		ctx.fillRect(oldX,oldY,L,pieceHeigth);
		oldY = oldY + pieceDelta;
		if(oldY>=endY){
			oldY = endY;
			setTimeout(finishDeplacing,speed);
		}else
			setTimeout(pieceDescending,speed);
		ctx.fillStyle = pieceColor;
		ctx.fillRect(oldX,oldY,L,pieceHeigth);
		
	}
	function redraw(){
		ctx.fillStyle = backColor;
		ctx.fillRect(0,0,drawWidth,500);
		ctx.fillStyle = pieceColor;
		for(var t = 0;t<tas.length;t++){//Pour chaque tas (t)
			for(var i = 0;i<tas[t].length;i++){//Pour chaque piece du tas  (i du tas t)
				L = getWidthFromSize(tas[t][i]);
				oldX = Math.round(X[t]- (L/2));
				oldY = Math.round(Y-(pieceHeigth+pieceLevitation)*(tas[t].length-i));
				ctx.fillRect(oldX,oldY,L,pieceHeigth);
			}
		}
	}
	
	function deplacer(a,b){
		document.getElementById('out').innerHTML=a+'->'+b;
		da=a;
		db=b;
		L = getWidthFromSize(tas[da][0]);
		topY = Math.round(Yhigh-pieceHeigth/2);
		endX = X[db] - L/2;
		endY = Math.round(Y-(pieceHeigth+pieceLevitation)*(tas[db].length + 1));
		oldX = Math.round(X[da]- (L/2));
		oldY = Math.round(Y-(pieceHeigth+pieceLevitation)*(tas[da].length));
		ctx.fillStyle = backColor;
		ctx.fillRect(oldX,oldY,L,pieceHeigth);
		setTimeout(pieceAscending,entreDeux);//TODO timeout variatisation
	}

	function finishDeplacing(){
		tas[db].unshift(tas[da][0]);
		tas[da].shift();
		moves.shift();
		if(moves.length>0){
			console.log(moves[0][0]+'->'+moves[0][1]);
			setTimeout(function(){deplacer(moves[0][0],moves[0][1]);},entreDeux);
			//redraw();
		}else{
			//redraw();
			console.log("Done !!!");
		}
			
	}
	function roundRect(ctx,x,y,width,height,radius,fill,stroke){
		//console.log('roundRect('+x+','+y+','+width+','+height+')');
		if(typeof stroke === 'undefined')
			stroke = true;
		if(typeof radius === 'undefined')
			radius = 5;
		if(typeof radius === 'number')
			radius = {tl:radius,tr:radius,br:radius,bl:radius};
		else{
			var defaultRadius = {tl:0,tr:0,br:0,bl:0};
			for(var side in defaultRadius)
				radius[side] = radius[side] || defaultRadius[side];
		}
		ctx.beginPath();
		ctx.moveTo(x+radius.tl, y);
		ctx.lineTo(x+width-radius.tr, y);
		ctx.quadraticCurveTo(x+width,y,x+width,y+radius.tr);
		ctx.lineTo(x+width, y+height-radius.br);
		ctx.quadraticCurveTo(x+width,y+height,x+width-radius.br,y+height);
		ctx.lineTo(x+radius.bl, y+height);
		ctx.quadraticCurveTo(x,y+height,x,y+height-radius.br);
		ctx.lineTo(x, y+radius.tl);
		ctx.quadraticCurveTo(x,y,x+radius.tl,y);
		ctx.closePath();
		if(fill)
			ctx.fill();
		if(stroke)
			ctx.stroke();
		
		
	}
</script>