Deblock me - casse tête

Télécharger le projet
Commenter

Description

casse tête où il faut sortir une pièce du jeu en coulisant les autres pièces

dernière version sur mon site :
http://www.crew.free.fr/

amusez-vous bien !

Source / Exemple : 


<html>
<head>
<style>

.scoring {
	background:#f0f0f0;
	width:250px;
	height:50px;
	border:1px solid green;
	z-index:9999;
	text-align:center;
	color:green;
	opacity: .9; filter: alpha(opacity=90); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
	}
.tableback {
	border-top:1px #c0c0c0 dashed;
	border-left:1px #c0c0c0 dashed;
	}

.block0 {background-color:#a0a0a0;border:2px black solid;}
.block1 {background-color:#a0a0a0;border:2px black solid;}
.block2 {background-color:#a0a0a0;border:2px black solid;}
.block3 {background-color:#a0a0a0;border:2px black solid;}
.block4 {background-color:#FFa0a0;border:2px black solid;}

.leveltable td {
border :1px solid green;
width:20px; text-align:center; color:green;
}

.finished {
background:lightgreen;
}

</style>

<script language="javascript">
/*et oui ... mon programme est multilingue !*/
var fr ={"stage_clear" : "Niveau terminé","nb_move":"nombre de mouvement","score":"score","nvx_grille":"créer une nouvelle grille"}
var en ={"stage_clear" : "Level clear","nb_move":"number of movement","score":"score","nvx_grille":"new puzzle"}
var lang = fr; /*var lang = en ; //for english version*/
var diff = "debutant";
var nivo =  {
"nvx" : {12:4}
};

function save_cok(p,diff) {
htm=""; first = true;
for (e in nivo)
{
if (p[e])
{
htm+="c:"+e+",m:"+p[e].mvt+",s:"+p[e].score+" ";
}
}
      var expireDate = new Date();
      expireDate.setTime(expireDate.getTime() + 365*24*3600*1000);
      document.cookie = "sam_"+diff+"=" + escape(htm)
         + ";expires=" + expireDate.toGMTString();
      }

function load_cok(diff) {

      var deb,fin, nom= "sam_"+diff;
      deb = document.cookie.indexOf(nom + "=")
      if (deb >= 0) {
         deb += nom.length + 1
         fin = document.cookie.indexOf(";",deb)
         if (fin < 0) fin = document.cookie.length
         return unescape(document.cookie.substring(deb,fin))
         }
      return null;
      }

var modecreate = false; /*passer en mode creation*/
var scoretab = {}; /*liste des scores*/
var wx = 60,hx = 50,ss=null; /*piece selctionnée*/
var cart=[]; /*tableau d'element*/
var level_x = 0;
var nbmove=0; 
var bougeMe = false;
var piece_x = 0;
var dxx = 0 , dyy = 0;

function _(x) /*appel des objet + simple*/
	{return document.getElementById(x);}

function msg(txt)
	{return lang[txt] ? lang[txt] : txt;}

	

function difficulte(niv_x)
{
diff = niv_x;
switch (diff)
{
case "debutant" : nivo = debutant; break;
case "inter" : nivo = inter; break;
case "avance" : nivo = avance; break;
case "expert" : nivo = expert; break;
}
px_cok = load_cok(diff);
scoretab = {};
if ( px_cok != null)
{
px_cok.replace(/c:([0-9]+),m:([0-9]+),s:([0-9]+) /g,function($1,$2,$3,$4){ scoretab[$2]={'mvt':parseInt($3,10), 'score': parseInt($4,10)};});
}
viewLevel();
/*recupère le 1er niveau de la liste*/
for (level_x in nivo) {if (level_x!="nvx") break;}
afficheBloc(level_x );
}

function viewLevel()
{
htm="<div style='height:300px;overflow-y:scroll;padding-right:24px;overflow-x:hidden;'><table class='leveltable'><tr>";
w=0;
for (e in nivo)
{
if (e!="nvx")
{htm+="<td ";
if (scoretab[e])
{
htm+="class='finished' title='score : "+scoretab[e].score+", mvt : "+scoretab[e].mvt+"' ";
}
htm+=" onclick=changeLevel('"+e+"') "
htm+=" ><b>"+e+"</b></td>";

if ((w%10)==9) {htm+="</tr><tr>";w=0;} else w++;

}
}
if (w>0) for (k=w;k<9;k++)
htm+="<td>&nbsp;</td>";
htm+="</tr><table><div>";
_("level").innerHTML = htm;
}

function changeLevel(xx)
{
level_x = xx;
afficheBloc(xx);
}

function afficheBloc(level_x)
{

modecreate = (level_x=="nvx");
if (modecreate) 
{
htm="<table border='1' >";
htm+="<tr><td align='center' onclick='selpiece(0);'><div class='block0' style='width:"+(2*wx)+"px;height:"+(1*hx)+"px;' ></div></td></tr>"; /*onmousedown='choix(this,"+idx+","+type_+",event);return false;'*/
htm+="<tr><td align='center' onclick='selpiece(1);'><div class='block1' style='width:"+(1*wx)+"px;height:"+(2*hx)+"px;' ></div></td></tr>"; /*onmousedown='choix(this,"+idx+","+type_+",event);return false;'*/
htm+="<tr><td align='center' onclick='selpiece(2);'><div class='block2' style='width:"+(3*wx)+"px;height:"+(1*hx)+"px;' ></div></td></tr>"; /*onmousedown='choix(this,"+idx+","+type_+",event);return false;'*/
htm+="<tr><td align='center' onclick='selpiece(3);'><div class='block3' style='width:"+(1*wx)+"px;height:"+(3*hx)+"px;' ></div></td></tr>"; /*onmousedown='choix(this,"+idx+","+type_+",event);return false;'*/
htm+="</table>";
_("level").innerHTML = htm;
}
dispo2html(nivo[level_x],level_x);
}

function selpiece(piece)
{
if (modecreate)
{
piece_x = piece;
switch (piece)
{
case 0 : _("mv").style.width = (2*wx)+"px";_("mv").style.height = (1*hx)+"px"; break;
case 1 : _("mv").style.width = (1*wx)+"px";_("mv").style.height = (2*hx)+"px"; break;
case 2 : _("mv").style.width = (3*wx)+"px";_("mv").style.height = (1*hx)+"px"; break;
case 3 : _("mv").style.width = (1*wx)+"px";_("mv").style.height = (3*hx)+"px"; break;
}
}
}

function dispo2html(dd,level)
{
nbmove=0;
/*background du jeu*/
htmx="Niveau<select onchange='difficulte(this.value)'>";
niveau_jeu = {"debutant":"debutant","inter":"intermedaire","avance":"avancé","expert":"expert"};
for (e in niveau_jeu)
	htmx+="<option "+(e==diff ? "selected":"")+" value='"+e+"'>"+niveau_jeu[e]+"</option>";
htmx+="</select>&nbsp;&nbsp;&nbsp;puzzle N°<b>"+level+"</b><br/><br/>";
htmx+="<table id='tablo' cellspacing=0 cellpadding=0 class='tableback'>";
for (y=0;y<6;y++)
{
	htmx+="<tr>";
	for (x=0;x<6;x++)	
	{
		htmx+="<td style='width:"+(wx-1)+"px;height:"+(hx)+"px;border-right:1px #c0c0c0 dashed;border-bottom:1px #c0c0c0 dashed;'>&nbsp;</td>";
	}
	htmx+="</tr>";
}
htmx+="</table>";
htmx+="<b>"+msg('nb_move')+"</b><input type=text id='nbmve' value='0' style='text-align:right;border:none;width:40px;background:none;'>";
_("tableau").innerHTML =htmx;
/*recup position tableau -> passer en relative*/
posxy_=posxy(_("tablo"),dxx,dyy);

htmx="";
/*tableau de liaison de mouvement + piece*/
for (x=0;x<6*6;x++)
{
cart[x]={c:0,h:(x>=6)?x-6:-1,b:(x<5*6)?x+6:-1,g:(x%6==0)?-1:x-1,d:(x%6==5)?-1:x+1,m:x};
}

/*place les pièces*/
for (f in dd)
{
	if (/[0-9]+/.test(f))
	{
	p = parseInt(f,10);	idx=(p+1);
	type_=dd[p]; /*type de pièce*/
	cart[p].c=idx;
	 switch(type_)
	 {
		case 0: w=2; h=1;cart[p+1].c=idx; break;
		case 1: w=1; h=2;cart[p+6].c=idx; break;
		case 2: w=3; h=1;cart[p+1].c=idx;cart[p+2].c=idx; break;
		case 3: w=1; h=3;cart[p+6].c=idx;cart[p+12].c=idx; break;
		case 4: w=2; h=1;cart[p+1].c=idx; break;		
	 }
	 var corr = window.Event ? 2 : 1; /*corrige la taille du tableau pr IE & FF*/
	htmx+="<div id='"+"p_"+p+"' class='block"+type_+"' style='width:"+((w*wx)-corr)+"px;height:"+((h*hx)-corr)+"px;left:"+(posxy_.x+(p%6)*wx)+"px;top:"+(posxy_.y+(parseInt(p/6,10))*hx)+"px;position : absolute;' onmousedown='choix(this,"+idx+","+type_+",event);return false;'></div>"
    }
}
if (modecreate)
{
 htmx+="<div id='mv' class='block0' style='position:absolute;width:"+(2*wx)+"px;height:"+(hx)+"px;' onclick='posMe(event)'  ></div>";
}
/*affiche le tableau*/
_("tableau").innerHTML += htmx;

if (modecreate)
{
  htm="<br/>{";first=true;
 for (e in nivo["nvx"]) {htm+=(first?"":",")+e+":"+nivo["nvx"][e];first=false;}
 htm+="}";
_("deb_").innerHTML = htm;
}
/*************Info debug
htm="<table>"; for(y=0;y<6;y++){htm+="<tr>";for (x=0;x<6;x++){htm+="<td>"+cart[y*6+x].c+"</td>";}htm+="</tr>";}
htm+="</table>";_("deb_").innerHTML=htm;*/
selpiece(piece_x);
bougeMe = true;
}

/*selection d'une pièce (onclick)*/
function choix(src,p,type_,evt)
{
if (bougeMe)
{
  var x = document.all ? event.clientX : document.layers ? evt.x : evt.clientX;
  var y = document.all ? event.clientY : document.layers ? evt.y : evt.clientY;
ss={"src":src,"idx":p,"sens":(type_==1 || type_==3),"cx":type_,"ox":( parseInt(src.style.left,10)),"oy": (parseInt(src.style.top,10)),"dx":x,"dy": y};
}
}

function posMe(evt)
{
if (modecreate)
	{
	  var x = document.all ? event.clientX : document.layers ? evt.x : evt.clientX;
	  var y = document.all ? event.clientY : document.layers ? evt.y : evt.clientY;
	  var posxy_=posxy(_("tablo"),dxx,dyy);	
	  var fx = Math.round((x-posxy_.x)/wx),fy = Math.round((y-posxy_.y)/hx);
	  var mx = [5,6,4,6], my = [6,5,6,4];
	  if (fx>=0&&fx<mx[piece_x]&&fy>=0&&fy<my[piece_x]) 
	  { p = fy*6+fx; 
	    var test = cart[p].c == 0 ;
	    switch(piece_x)
		{
		case 0: test&=cart[p+1].c==0;  break;
		case 1: test&=cart[p+6].c==0; break;
		case 2: test&=(cart[p+1].c==0)&(cart[p+2].c==0); break;
		case 3: test&=(cart[p+6].c==0)&(cart[p+12].c==0); break;		
		}
		if (test) {nivo["nvx"][p]=piece_x; afficheBloc("nvx") }
	  }
	}
}
/*deplacement de la pièce (onmouve)*/
function bouge(mx,my)
{
/*_("deb_").innerHTML=mx+" - "+my; //debug sur les corrdonnées de la souris*/
if (ss!=null) /*bouge si pièce sélectionné*/
{
if (ss.sens) /*deplacement horizontal ou vertical ?*/
  {
  /*deplacement vertical*/
  delta = (my-ss.dy); /*différence entre la souris et la position de départ*/
  if (!ss.miny) /*initialisation de l'amplitude du mouvement si pas encore calculé*/
  {
  slc = parseInt(ss.idx,10);
  /*recup la pièce*/
  x=0; while ((x>6*6)|(cart[x].c!=slc)) {x++;}
  /*recherche des zone vide avant & après*/
  r=0;   f=parseInt(cart[x].h,10);  while  (f!=-1 && cart[f].c==0) {r++;  f=parseInt(cart[f].h,10);}
  ss.miny = -r*hx;
  r=0;  f=parseInt(cart[x].b,10);  while  (f!=-1 && ((cart[f].c==0) || (cart[f].c==slc)) ) {if (cart[f].c==0) {r++;}  f=parseInt(cart[f].b,10); }
  ss.maxy = r*hx;
  }
      
  test = (delta>ss.miny&&delta<ss.maxy) ;
  if (test)   /*souris en dehors du mouvement ?*/
	{
	ss.src.style.top = parseInt(my-ss.dy+ss.oy)+"px";
	fy = Math.round(delta / hx); /*coordonnée relative au tableau cart*/
	ss.fy = fy;

	} else
	{
	if (delta<ss.miny) delta = ss.miny ; /*limite de déplacement*/
	if (delta>ss.maxy) delta = ss.maxy ;
	
	fy = parseInt(delta / hx,10);
	ss.fy = fy;
	ss.src.style.top = parseInt(fy*hx + ss.oy)+"px";
	//release(null);
	}
  }
  else
  {
  /***************************/
  /*deplacement horizontal*/
  delta = (mx-ss.dx);
  if (!ss.minx) /*initialisation de l'amplitude du mouvement*/
  {
  /*pièce séctionnée*/
  slc = parseInt(ss.idx,10);
  x=0; while ((x>6*6)|(cart[x].c!=slc)) {x++;}
  /*recherche zone vide avant & aprés*/
  r=0;   f=parseInt(cart[x].g,10);  while  (f!=-1 && cart[f].c==0) {r++;  f=parseInt(cart[f].g,10);}
  ss.minx = -r*wx;
  r=0;  f=parseInt(cart[x].d,10);  
  while  (f!=-1 && ((cart[f].c==0) || (cart[f].c==slc)) ) {if (cart[f].c==0) {r++;}  f=parseInt(cart[f].d,10); }
  ss.maxx = r*wx;
  }
  /*test si souris en dehors de la zone*/
  test = (delta>ss.minx&&delta<ss.maxx) ;
  if (test)
	{
	ss.src.style.left = parseInt(mx-ss.dx+ss.ox)+"px";
	fx = Math.round(delta / wx);
	ss.fx = fx;
	} else
	{
	if (delta<ss.minx) delta = ss.minx;
	if (delta>ss.maxx) delta = ss.maxx;
	
	fx = parseInt(delta / wx,10);
	ss.fx = fx;
	ss.src.style.left = parseInt(fx*wx + ss.ox)+"px";
	//release(null);
	}
  }
}

visib = false;
if (modecreate && ss==null)
{
  var posxy_=posxy(_("tablo"),dxx,dyy);	
  var fx = Math.round((mx-posxy_.x)/wx),fy = Math.round((my-posxy_.y)/hx);
  var maxx = [5,6,4,6], maxy = [6,5,6,4];
  if (fx>=0&&fx<maxx[piece_x]&&fy>=0&&fy<maxy[piece_x]) 
  {
    p=fy*6+fx;
	visib = cart[p].c == 0 ;
	switch(piece_x)
	{
	case 0: visib&=cart[p+1].c==0;  break;
	case 1: visib&=cart[p+6].c==0; break;
	case 2: visib&=(cart[p+1].c==0)&(cart[p+2].c==0); break;
	case 3: visib&=(cart[p+6].c==0)&(cart[p+12].c==0); break;		
	}   
  }
}

if (visib)
{
_("mv").style.visibility="";
_("mv").style.left = (mx-2)+"px";
_("mv").style.top = (my-2)+"px";
} else
{
if (modecreate)
 {_("mv").style.visibility="hidden";}
}
}
/*relache la pièce (onmouseup)*/
function release(e)
{
if (ss!=null)
{
  /*récupère la pièce*/
  x=0; while ((x>6*6)|(cart[x].c!=ss.idx)) {x++;}
  /*vide le tableau de sa position*/
  for (k=0;k<6*6;k++) if (cart[k].c==ss.idx) cart[k].c=0;
  /*replace la pièce dans les nouvelles coordonnées*/
  fx=0 ; fy = 0;   if (ss.fx != null) fx = ss.fx;  if (ss.fy != null) fy = ss.fy;
  if (fx!=0||fy!=0) {nbmove++;_("nbmve").value=nbmove;}
  p=x+fx+fy*6;
  x=ss.idx;
  cart[p].c=x;
  type_ = nivo[level_x][x-1];
	 switch(type_)
	 {
		case 0: cart[p+1].c=x; break;
		case 1: cart[p+6].c=x; break;
		case 2: cart[p+1].c=x;cart[p+2].c=x; break;
		case 3: cart[p+6].c=x;cart[p+12].c=x; break;
		case 4: cart[p+1].c=x; break;		
	 }
posxy_=posxy(_("tablo"),dxx,dyy);	 
ss.src.style.left = (posxy_.x+(p%6)*wx)+"px";
ss.src.style.top = (posxy_.y+(parseInt(p/6,10))*hx)+"px";
/*si la pièce principale est positionnée sur la sortie*/
if (type_==4&&p==16&&!modecreate) {clearLevel();bougeMe=false;}
if (modecreate) { 
//alert(type_);
var rc = {} ; 
for (e in nivo['nvx']) 
{ if (e!=(x-1)) rc[e]=nivo['nvx'][e];}
rc[p] = ss.cx ; 
nivo['nvx']=rc;
}
}
	ss=null;
}
/*fin du niveau - affiche le score*/
function clearLevel()
{
posxy_=posxy(_("tablo"),dxx,dyy);	 
var score = 2500-nbmove*40;
score = (score<500) ? 500 : score;
htm = "<div class='scoring' style='position:absolute;left:"+(posxy_.x+50)+"px;top:"+(posxy_.y+50)+"px;' >";
htm+= "<b>"+msg('stage_clear')+"</b><br/>";
htm+= "<b>"+msg('score')+"</b> : "+score+"<br/>";
//htm+= "<b>"+msg('nb_move')+"</b> : "+nbmove+"<br/>";
htm+= "</div>";
_("tableau").innerHTML += htm;
_("nbmve").value=nbmove;
scoretab[level_x]={"score" : score , "mvt" : nbmove };
save_cok(scoretab,diff);
viewLevel();
}

/*déplacement de la souris (onmousemove)*/
function bougerSouris (evt) {
  var x = document.all ? event.clientX : document.layers ? evt.x : evt.clientX;
  var y = document.all ? event.clientY : document.layers ? evt.y : evt.clientY;
  bouge(x,y);
}

/*mouse move full compatible - capture des evenements*/
if (document.layers)  document.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP );
if (document.layers || document.all)  
	{
	document.onmousemove = bougerSouris;
	document.onmouseup = release;
	}
if (document.addEventListener)   
	{
	document.addEventListener('mousemove', bougerSouris, true);
	document.addEventListener('mouseup', release, true);
	}
  
 /*init le programme au lancement*/
//window.onload = function() {load();}

/*retourne la position en {x,y} d'un element */
function posxy(rst,xx,yy) 
 { return rst ? posxy(rst.offsetParent,xx+rst.offsetLeft,yy+rst.offsetTop): {"x":xx,"y":yy}; }
 
 
window.onload = function()
{
_("nvxGrille").value= msg('nvx_grille');
diff = "debutant";
difficulte(diff);
} 

</script>
</head>
<body>
<br/><br/>
<center><b>Deblock Me V0.8</b><br/><br/><input type="button" id="nvxGrille" value="new" onclick="afficheBloc('nvx');" disabled ><br/><br/>

<table><tr><td><div id="level" style='margin:0px;'></div></td><td><div id="tableau" style='margin:0px;'><i>Loading...</i></div></td></tr></table>
<div id="deb_" style='margin:0px;'></div><!--debug-->
<br/><br/><br/>
<div style="font-family:Tahoma;font-size:9px">dernière mise à jour sur mon site : <a href="http://www.crew.free.fr">http://www.crew.free.fr</a><br>powered by <b>AmRouNiX</b> / <b>MaSTeR-KiLLeR</b> (<i>A. Selim</i>) <br> Toutes copies autorisées !</div>
<script language="javascript" src="js/debutant.js"></script>
<script language="javascript" src="js/intermediaire.js"></script>
<script language="javascript" src="js/avance.js"></script>
<script language="javascript" src="js/expert.js"></script>
<script language="javascript" src="js/extra.js"></script>
</center>
</body>
</html>
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (amrounix)