Labyrinthe en Javascript - Affichage personnage

Invité · 01/04/2015, 16h40

Bonsoir,

Pour un projet d'études, je dois mettre en place un labyrinthe en Javascript. Le labyrinthe est d'abord fait à la main puis retranscrit en Javascript donc pas de générateur. Ce labyrinthe comprend quatre propositions ('p') donc une est la bonne ('s'). Un 1 est une case chemin et un 0 représente un mur.

Le labyrinthe étant déjà affiché, mon problème est désormais lié au déplacement du personnage (une image fixe). Je souhaiterais, pour commencer, pouvoir l'afficher dans les positions données au début du programme js (x=9, y=1) mais aussi lors des déplacements qui feront appel à la fonction. Il s'agit juste d'afficher une image dans une case avec les positions x et y qu'on lui envoie en paramètres.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
        <title>Labyrinthe</title>
        <script type="text/javascript" src="Jeu.js"></script>
	    <link rel="stylesheet" href="Style.css">
    </head>
    <body>
        <h1>Labyrinthe</h1>
        <table>
            <tbody id="monLabyrinthe">
            </tbody>
        </table>
    </body>
</html>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
window.addEventListener("load", dessinerLabyrinthe);
function dessinerLabyrinthe(){
    var laby = [[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            [0, 1, 1, 1, 1, 1, 1, 1, 1, 'd', 1, 1, 1, 1, 1, 0, 1, 1, 1, 0],
            [0, 1, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0],
            [0, 1, 0, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 0, 1, 1, 1, 0],
            [0, 1, 0, 1, 0, 1, 0, 1, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 1, 0],
            [0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0],
            [0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1, 1, 1, 1, 0],
            [0, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 0, 1, 1, 1, 0, 1, 0, 1, 0],
            [0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0],
            [0, 1, 0, 1, 1, 1, 1, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0],
            [0, 1, 0, 0, 1, 0, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 0, 1, 0],
            [0, 1, 1, 1, 1, 0, 0, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0],
            [0, 1, 0, 0, 0, 0, 1, 1, 1, 0, 1, 0, 1, 0, 1, 0, 's', 0, 0, 0],
            [0, 1, 1, 1, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0, 0, 'p', 0],
            [0, 0, 0, 1, 0, 0, 1, 0, 1, 1, 1, 0, 0, 0, 1, 1, 1, 1, 1, 0],
            [0, 1, 1, 1, 1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0, 0],
            [0, 0, 0, 0, 0, 0, 1, 0, 1, 1, 1, 1, 1, 1, 1, 0, 1, 0, 1, 0],
            [0, 'p', 1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 1, 0],
            [0, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 'p', 0, 1, 1, 1, 1, 1, 1, 0],
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]];
    for (var i = 0; i < 20; i++){
        var ligne = '<tr>';
        for (var j = 0; j < 20; j++){
            if (laby[i][j] == 1){
                ligne += '<td></td>';
            }
            else if (laby[i][j] == 'p'){
                ligne += '<td bgcolor="orange" alt=""></td>';
            }
            else if (laby[i][j] == 'd'){
                ligne += '<td bgcolor="green" alt=""></td>';
            }
            else if (laby[i][j] == 's'){
                ligne += '<td bgcolor="red" alt=""></td>';
            }
            else{
                ligne += '<td bgcolor="black" alt=""></td>';
            }
        }
        ligne +='</tr>';
        document.getElementById("monLabyrinthe").insertAdjacentHTML("beforeEnd", ligne);
    }
}
//Position du Personnage au départ
    var xperso = 9;
    var yperso = 1;
afficherPerso(xperso,yperso);
	var labyLignes = document.getElementById("monLabyrinthe").rows;   //sélection du labyrinthe (tableau)
   	var labyColonnes = labyLignes[y].cells;   //sélection de la cellule dans la ligne y
   	labyColonnes[x]=document.write('<img src="images/pandaperso 30.png">');
	document.addEventListener('keyup', function(e) {
		if(e.keyCode == 40){ // Bas
            if(laby[xperso][yperso+1]==1){
			     effacerperso (xperso,yperso);
			     yperso=yperso+1;
			     afficherperso (xperso,yperso);
            }
			else if(laby[xperso][yperso+1]=='s'){
			     effacerperso (xperso,yperso);
			     yperso=yperso+1;
			     afficherperso (xperso,yperso);
			     alert("Tu as gagné!");
            }
        }
        if(e.keyCode == 38){ //Haut
            if(laby[xperso][yperso-1]==1){
			     effacerperso (xperso,yperso);
			     yperso=yperso-1;
			     afficherperso (xperso,yperso);
            }
			else if(laby[xperso][yperso-1]=='s'){
			     effacerperso (xperso,yperso);
			     yperso=yperso-1;
			     afficherperso (xperso,yperso);
			     alert("Tu as gagné!");
            }
        }
        if(e.keyCode == 37){ //Gauche
            if(laby[xperso-1][yperso]==1){
			     effacerperso (xperso,yperso);
                    xperso=xperso-1;
			     afficherperso (xperso,yperso);
            }
			else if(laby[xperso-1][yperso]=='s'){
			     effacerperso (xperso,yperso);
			     xperso=xperso-1;
			     afficherperso (xperso,yperso);
			     alert("Tu as gagné!");
            }
        }
        if(e.keyCode == 39){ // Droite
            if(laby[xperso+1][yperso]==1){
                effacerperso (xperso,yperso);
                xperso=xperso+1;
                afficherperso (xperso,yperso);
			} 
            else if(laby[xperso+1][yperso]=='s'){
                effacerperso (xperso,yperso);
                xperso=xperso+1;
                afficherperso (xperso,yperso);
                alert("Tu as gagné!");
			}
        }
	});

J'espère que vous pourrez m'aider.
Merci d'avance.

**TiranusKBX** · 02/04/2015, 17h30

je te suggérerait de mettre des id à tes cases
et en fonction de ta position injecter ton objet image dans la case correspondante
à chaque changement tu viderais toutes les cases puis tu ferait le remplissage de la case voulue
et ainsi cela devrait marcher

Labyrinthe en Javascript - Affichage personnage

JavaScript

Discussions similaires

Partager

Partager