Snacky

Commenter

Contenu du snippet

jeux du serpent version javascript COMPLET ultra-light, ultra-efficace, ultra-rapide
-gestion des directions avec le clavier
-fonctionne sous Firefox

Source / Exemple : 


<html>
<head>

<style>
input	{border:1px blue dashed;width:50px;text-align:right;}
button	{border:1px blue solid;width:80px;text-align:center;}
body	{font-family:Tahoma;font-size:12px}
td		{font-family:Tahoma;font-size:12px}
select	{font-family:Tahoma;font-size:12px}
</style>

<script language="javascript">

var xmax=12; //largeur element
var ymax=14; //hauteur element

var xxmax=xmax*30; //air de jeu
var yymax=ymax*15; //

var serpent=new Array({"x":xmax*10,"y":ymax*10}); //pt de départ

//init des directions
var GAUCHE={"x":-xmax,"y":0};
var DROITE={"x":+xmax,"y":0};
var HAUT={"x":0,"y":-ymax};
var BAS={"x":0,"y":+ymax};

//var de départ
var mort=false;
var pause=false;
var bougeable=true;
var direction=DROITE;
var longueur=5;
var vitesse=50;
var score=0;
var gloums={};

//initialisation des variables
function init()
{
mort=false;
pause=false;
bougeable=true;
direction=DROITE;
longueur=5;
vitesse=50;
score=0;
serpent=new Array({"x":xmax*10,"y":ymax*10});
infoScore.value="0";
gloubi(); 	//place la nourriture 
affiche(); 	//affiche l'air
bouge();	//déplacement
}

//place la nourriture en dehors du serpent
function gloubi()
{
test=false;
while(!test)
{
test=true;
gloums={"x":parseInt(Math.random()*30)*xmax,"y":parseInt(Math.random()*15)*ymax};
for (p=0;p<serpent.length;p++)
	if (gloums.x==serpent[p].x&&gloums.y==serpent[p].y)
		test=false;
}
}

//déplace et grandi le serpent 
function grandi(tableau,dir,maxiL)
{
//récupère la nouvelle position
xx=tableau[tableau.length-1].x+dir.x;
yy=tableau[tableau.length-1].y+dir.y;
//si en dehors du plateau le repositionne à l'opposé
xx=(xx>xxmax)?0:((xx<0)?xxmax:xx);
yy=(yy>yymax)?0:((yy<0)?yymax:yy);
//grandi le serpent avec les nouvelle donnée
tableau.push({"x":xx,"y":yy});
//agrandi ou déplace (suppression du 1er element)
if (tableau.length>maxiL) tableau.splice(0,1);
test=false;
//esce que la nouvelle position chevauche le serpent ?
for (p=0;p<tableau.length-1;p++)
	if (xx==tableau[p].x&&yy==tableau[p].y)
		test=true;
return test;
}

//boucle de déplacement
function bouge()
{
mort=grandi(serpent,direction,longueur);
bougeable=true;
//quand le serpent se nourrit
if ((Math.abs(xx-gloums.x)<xmax)&&(Math.abs(yy-gloums.y)<ymax)) 
  {longueur+=5;score+=100;gloubi();infoScore.value=score;}
//affiche le plateau
affiche();
//boucle en fonction de l'état du jeu (pause/ mort ?)
 if (!pause)
{
if (!mort) {timer=setTimeout("bouge()",101-vitesse);}
else {alert('perdu !');}
}
}

//affiche le plateau
function affiche()
{
htm="";
for (i=0;i<serpent.length;i++)
htm+="<IMG style='position:absolute;left:"+serpent[i].x+"px;top:"+serpent[i].y+"px;background:#000000;width:"+xmax+"px;height:"+ymax+"px;color:#FFFFFF' >";
/*htm+="<div style='position:absolute;left:"+serpent[i].x+"px;top:"+serpent[i].y+"px;background:#000000;width:"+xmax+"px;height:"+ymax+"px;color:#FFFFFF' >&nbsp;</div>";*/
htm+="<IMG style='position:absolute;left:"+gloums.x+"px;top:"+gloums.y+"px;background:#FFE0FF;width:"+xmax+"px;height:"+ymax+"px;'>";
plateau.innerHTML=htm;
}

//récupère le code du clavier pour les déplacement
function toucher(e)
{
var key = window.event ? e.keyCode : e.which;

if (bougeable&&!pause)
switch(key)
{
case 37: if (direction!=DROITE) {bougeable=false;direction=GAUCHE;} break;
case 38: if (direction!=BAS) {bougeable=false;direction=HAUT;}break;
case 39: if (direction!=GAUCHE) {bougeable=false;direction=DROITE;}break;
case 40: if (direction!=HAUT) {bougeable=false;direction=BAS;}break;
}
}
</script>
</head>
<body onload="init();" onkeydown="toucher(event)" style="margin:0px">
<center>
<br><br><b>SnAckY  V1.0<br><i>par AmRouNiX(A. Selim)</i><b><br><br>
<table cellpadding="0" cellspacing="0" style="width:372px">
<tr><td style="text-align:center">score&nbsp;<input type="text" value="0" id="infoScore"><br><br>
<button onclick="if (!mort) {pause=!pause;if (!pause) bouge();this.innerHTML=(pause)?'*reprise*':'pause'}">pause</button>&nbsp;
<button onclick="pause=true;if (mort||confirm('recommencez ?')) {clearTimeout(timer);init();} else {pause=false;bouge();}">Start</button>&nbsp;
vitesse&nbsp;<select onchange="vitesse=this.value;this.blur();"><option value="100">la + rapide</option><option value="75">rapide</option><option value="50" selected>normale</option><option value="25">lente</option><option value="0">la + lente</option></select><br><br>
</td></tr>
<tr><td>
<div id="plateau" style="position:absolute;width:372px;height:225px;background:#C0C0C0"></div>
</td></tr>
</table>
<center>
</body>
</html>
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)