Labyrinthe en Javascript - Affichage personnage

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:

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:

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.