Discussion :

[Macmachi]

Je suis un peu perdu. Connaissant les bases du javascript j'aimerai créer un petit jeu dans ce langage mais le problème est que je ne sais pas comment m'y prendre.

Je m'y prends peut-être mal mais j'aimerai créer chaque case de mon jeu (une sorte de jeu de plateau) en HTML, ensuite définir action et un algo en fonction des cases qu'on cliquent.

[SpaceFrog]

tes images etant dans des cellules, il te suffit de tester que la difference de .rowIndex + . colIndex n'est pas supérieure à 2

[Macmachi]

Merci pour ta réponse et ta rapidité!

Je ne connais pas du tout cette méthode, il faut que j'aie chercher des informations dessus. Donc Il y a même pas besoin d'utiliser les ID pour les images?

[SpaceFrog]

tout dépend de comment tu dois "naviguer" d'une image à l'autre ?
au click ? par saisie ?

[Macmachi]

En cliquant, c'est des images boutons (input) dans mon code HTML.
L'image sur la quel on va cliqué va faire changer l'image et remettre image de base sur l'ancienne. Pour simuler le déplacement d'un pion.

Par contre pour mon jeu il est important de savoir sur quelle cellule se trouve mon pion car des pions avanceront aléatoirement sur mon plateau et si ces pions touchent mon pion ce sera Game over.

J'ai trouvé un semblant de code ici pour ce que vous m'avez conseillé: http://stackoverflow.com/questions/1...d-how-can-i-do mais le problème est que je n'ai jamais fait d'ajax et comment mettre cela dans notre code javascript?

[SpaceFrog]

a partir du click sur l'image tu peux remonter au td avec .parentNode()ensuite je ne sais pas si ajax est nécessaire dans ton cas de figure ...
as tu vraiment besoin de retourner sur le serveur ?

[Macmachi]

Non, pour l'instant mon jeu est vraiment très basique et solo. Pas besoin de communiquer avec un serveur.
Je vais regarder parentNode ce que je peux en tirer, ça m'a l'air plus simple à utiliser.

Je vous tiens au courant. Merci déjà pour votre aide en tout cas.

[SylvainPV]

Tu n'as pas besoin des ID pour identifier les cases. Il faut générer le HTML de ton plateau en Javascript, comme ça tu peux directement binder tes évènements.

Je t'ai fait un exemple rapide, clique sur les cases pour voir: http://codepen.io/anon/pen/qwflv

Code html :

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

<div id="board"></div>

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  .cell.ocean { background: navy; }
.cell.sand { background: sandybrown; }
.cell.grass { background: forestgreen; }
 
#board {
  margin: 1em;
  border: 2px solid black;
  display: inline-block;
}
 
#board td {
  width: 20px;
  height:20px;
}

Code js :

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
  var cellTypes = ["ocean","sand","grass"];
var map = [ 
  [0,0,0,1,1,1,0,0,0,0,0,0,0],
  [0,0,1,1,2,1,1,0,0,0,0,0,0],
  [0,1,1,2,2,2,1,1,1,0,1,0,0],
  [0,1,2,2,2,2,2,2,2,1,1,1,0],
  [0,1,1,2,2,2,2,2,2,2,2,2,1],
  [0,0,1,1,2,2,2,2,2,2,2,1,1],
  [0,0,0,1,1,1,2,2,1,1,1,0,0],
  [0,0,0,0,0,1,1,1,1,0,0,0,0] ];
 
function drawMap(){
  var table = document.createElement("table");
  for(var row=0; row<map.length; row++){
    var tr = document.createElement("tr");
    for(var col=0; col<map[row].length; col++){
      var type = cellTypes[map[row][col]];
      var td = document.createElement("td");
      td.className = "cell "+type;
      td.onclick = onCellClick.bind(type);
      tr.appendChild(td);
    }
    table.appendChild(tr);
  }
  document.getElementById("board").appendChild(table);
}
 
function onCellClick(){
  alert(this);
}
 
drawMap();

Et comme je le répète à tous ceux qui veulent se lancer dans un jeu en Javascript : il existe un tas de super librairies pour ça, qui vous simplifient considérablement la vie pour vous permettre de vous concentrer sur l'essentiel. C'est important pour apporter qualité et efficacité, et ça peut éviter d'abandonner trop vite.