Essai de jeu JavaScript

16 décembre 2010 à 20:51:23

Tout est dans le titre, j'aimerais juste que vous m'expliquiez comment déplacer une image(perso ou décor du jeu), sur la page web.
En gros c'est:

Si la touche z est pressée, alors déplacer le perso vers le haut; 
Si la touche s est pressée, alors déplacer le perso vers le bas; 
Si la touche q est pressée, alors déplacer le perso vers la gauche; 
Si la touche d est pressée, alors déplacer le perso vers la droite;

Donc je souhaiterais apprendre comment créer un évènement en pressent certaines touches du clavier.

J'aimerais pouvoir faire bouger ce petit démon sans qu'il ne sorte du <div> bleu.

J'essaye un début de code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
       <title>Mon premier jeu</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" media="screen" type="text/css" title="Design" href="jeu.css" />
</head>


<div id="ecran" onclick="confirm('Commencer à jouer?');"><center>Cliquer pour commencer à jouer</center>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<img src="perso1.gif">
</div>


<script type="text/javaScript">


function commencer() {
  // Ici je souhaite créer la fonction qui démarre le jeu

}


if (confirm('Commencer à jouer?')) {
  function commencer();
}


</script>

Avec ce CSS:

/*
Design du jeu de Bibi
Réalisé par Bibi
*/

body
{
   width: 950px;
   margin: auto;
   margin-top: 10px;
   margin-bottom: 10px;    

}




#ecran

{
   width: 950px;
   height: 550px;
   background-color: #E6E8FA;
   margin-bottom: 0px;

}

Merci d'avance.

skuti

16 décembre 2010 à 23:00:16

Fait des recherches sur google sur "comment deplacer un div JS" et "recuperer touches clavier JS".

$2b||!$2b

Bilel Bgr

19 décembre 2010 à 15:18:18

J'ai cherché, mais je n'y comprends franchement rien, si vous pouviez essayer de m'expliquer comment faire ce serait sympa merci!

skuti

20 décembre 2010 à 22:45:50

Voila un code qui fonctionne mais qui n'est pas très amélioré

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Document sans nom</title>
		<style>
		#move{
			width:250px;
			height:150px;
			position:absolute;
			top:50px;
			left:500px;
			background-color:gray;
			text-align:center;
		}
		</style>
		<script>
		// define
		KEY_D = 68;
		KEY_Q = 81;
		KEY_S = 83;
		KEY_Z = 90;
		
		function checkEventObj ( _event_ ){
			// --- IE explorer
			if ( window.event )
				return window.event;
			// --- Netscape and other explorers
			else
				return _event_;
		}

		function switchDirection(_event_){
			var winObj = checkEventObj(_event_);
	
			var intKeyCode = winObj.keyCode;
			
			switch(intKeyCode){
				case KEY_Z:
					moveBlock((-2),'top');
					winObj.keyCode = intKeyCode = REMAP_KEY_T;
					winObj.returnValue = false;
					return false;
				break;
				
				case KEY_S:
					moveBlock(2,'top');
					winObj.keyCode = intKeyCode = REMAP_KEY_T;
					winObj.returnValue = false;
					return false;
				break;
				
				case KEY_Q:
					moveBlock((-2),'left');
					winObj.keyCode = intKeyCode = REMAP_KEY_T;
					winObj.returnValue = false;
					return false;
				break;
				
				case KEY_D:
					moveBlock(2,'left');
					winObj.keyCode = intKeyCode = REMAP_KEY_T;
					winObj.returnValue = false;
					return false;
				break;
				
				default: 
					winObj.keyCode = intKeyCode = REMAP_KEY_T;
					winObj.returnValue = false;
					return false;
				break;
			}
		}
		
		function moveBlock(value,axe){
			var block = document.getElementById('move');
			var top = parseInt(block.offsetTop);
			var left = parseInt(block.offsetLeft);
			
			
			if(axe == 'top'){
				block.style.top = (top + value) + 'px';
			}else if(axe == 'left'){
				block.style.left = (left + value) + 'px';
			}
		}
		</script>
	</head>

	<body>
		<script>document.onkeydown = switchDirection;</script>
		<div id="move"><br/><br/><br/>
		Press Z for up, S for down, Q for left and D for right !
		</div>
	</body>
</html>

Si tu test tu verra que tu aura ce que tu veux, du moins je pense

$2b||!$2b

Bilel Bgr

31 décembre 2010 à 21:10:35

Je suis sur iPhone la donc je ne peux pas tester quand je serais sur ordi j'editerais ce message poutre tout te dire.

skuti

1 janvier 2011 à 9:18:51

Ok pas de problème

Bonne année au passage

$2b||!$2b

Bilel Bgr

2 janvier 2011 à 17:47:44

Merci a toi aussi... Mais ce que je voulais, c'était de déplacer une image, pas une div... Bon j'ai mis le perso dans la div et j'ai réduit la taille et mis en blanc la div... c'est correct mais pas super car lorsque le contour touche le texte... on aperçoit la div blanche.

Tillertan

2 janvier 2011 à 19:28:47

bibi-sama, quand on te tend la main, essaie pas d'avoir le bras.

Il a été bien aimable de te faire ce code, mais maintenant, tu prends sur toi, et tu vas lire les tutoriels JavaScript et tu vas apprendre les évènements, le DOM, etc.

skuti

3 janvier 2011 à 9:07:40

Merci de me soutenir Tiller

J'ai choisi un div car c'est plus "universel" si je puis dire ainsi et un div peut etre transparent si tu ne lui met pas de couleur

$2b||!$2b

Bilel Bgr

3 janvier 2011 à 20:44:50

Citation : Tiller

bibi-sama, quand on te tend la main, essaie pas d'avoir le bras.

Il a été bien aimable de te faire ce code, mais maintenant, tu prends sur toi, et tu vas lire les tutoriels JavaScript et tu vas apprendre les évènements, le DOM, etc.

Ok ! Mais c'est juste que ca correspondait pas à ma demande, maintenant je le remercie pour son aide.

MERCI BEAUCOUP, BONNE ANNÉE ET TOUS MES VŒUX DE BONHEUR !!!