Deblock me - casse tête

Soyez le premier à donner votre avis sur cette source.

Vue 5 992 fois - Téléchargée 587 fois

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>

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
78
Date d'inscription
lundi 10 mars 2003
Statut
Membre
Dernière intervention
12 juillet 2010

Bonjour,
Merci pour la note et commentaire, je suis content que ça plaise, pour la partie saisie de contrôle du déplacement de la souris, j'ai voulu la faire full compatible (même avec les anciens explorer) d'où le captureEvents .... ;)
Si vous avez des remarques d'amélioration n'hésiter pas !
La prochaine évolution sera une meilleur gestion du score (dans les fichier js, la variable m correspond aux nombres de coup minimum pour résoudre le casse tête) , et de peut être de proposer une solution pour sortir ... à voir !

Cordialement,
Selim A.
Messages postés
14
Date d'inscription
vendredi 27 avril 2007
Statut
Membre
Dernière intervention
16 décembre 2008

Bonjour,

Je n'ai pas encore jeté un oeil sur le code mais sur ton site et fais un test du script.
Je dois dire que je suis agréablement bluffé.
Je te donne donc un 8 pour la fluidité et la réalisation !

Merci et bonne continuation.
Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
7
Bonjour,

Je suis un peu occupé ces temps-ci et j'ai peu de temps pour évaluer ton script, mais voici la permière chose que j'ai remarqué :

"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);
}
"

document.captureEvents est extrêmement vieux et ne devrait plus être utilisé, on voit que tu as utilisé addEventListener , tu devrais utiliser aussi sa version pour IE : attachEvent ;)

Sinon, l'effet est bluffant ce petit jeu style RushHour ^^ Le Drag & Drop est particulièrement réussi ;)

Je continuerai mes commentaires plus tard, j'ai exams ^^

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.