Bonjour à tous, je suis en train de créer un jeu 2048, je suis dans une école informatique et on débute en JS.

J'ai créer un grid de 4X4 cases donc 16 cases en tout et seulement le problème c'est que dans ce jeu les cases bouge en fonction des touches directionnelles du clavier.

Ce que j'aimerais arriver à faire c'est placer pour chaque cases de mon tableau une coordonnés donc une variable X et Y

donc par exemple ma premiere case correpondrais à grid[0,0], mais seulement en JS impossible de faire ca..

J'ai essayé grid [0][0] rien a faire JS ne veut pas..

Une idée pour créer des coordonnées ? En sachant que chaque coordonnées devra contenir, un chiffre en plus de contenir la case à laquelle elle correspond..

Hello,

Du mal à voir ton problème:

https://jsfiddle.net/492eg5ko/1/

Salut,

grid[i][j] est pourtant la solution.

grille[i][j] va chercher le j-ième élément dans grille[i] ; cela suppose que grille[i] est un tableau.

grille[i] va chercher le i-ième élément dans grille ; cela suppose que grille est un tableau.

grille doit être un tableau de tableaux :

const grille = Array(4).fill().map(() => Array(4).fill(0));

// ou 
const grille = [
 [0,0,0,0],
 [0,0,0,0],
 [0,0,0,0],
 [0,0,0,0]
];

Merci pour vos retours, sur mon code les 16 blocs ont une classe "square-container"

Donc j'obtient un tableau de 0 à 15 avec tout mes blocs dans l'ordre grace a jquery (block = getElementsByClassName("square-container")

et j'ai affecte chaque bloc a une case de mon tableau comme ceci :

var grid = [];

grid [0][0] = block[0];

...

grid [3][3] = block[15];

Mais lorsque je veut ecrire 2 dans le bloc qui est en [2][3] par exemple, ca ne marche pas..

je voudrais pouvoir faire grid[2][3].innerHTML = "2";

Si vous voulez que je mette le code dites moi.

Merci d'avance

-
Edité par NicolasManellio 6 décembre 2017 à 15:03:31

Tu initialises mal ton tableau. ça doit être un tableau de 4 tableau de 4 élément.

Si tu écrits grid = [], alors grid[0][0] va déclencher une erreur (regarde dans la console), car tu essaies t'accéder à l'indice 0 de grid[0], or grid[0] n'existe pas.

Autre chose, tu devrais séparer tes données et ton affichage. Ici, c'est ton affichage (innerHTML) qui contient l'état de ton jeu.

Si un jour tu decides de remplacer tes chiffres par des images, ou si tu veux sauvegarder une partie, ou donner la possibilité d'annuler un mouvement, etc... ce sera ingérable. Ca veut aussi dire que tu dois aller fouiller dans le DOM pour calculer tes mouvements : c'est beaucoup plus lent que de manipuler un array.

L'affichage doit être là uniquement pour présenter les données au joueur et lui donner la possibilité de controler ces données.

Je te conseille l'organisation suivante.

Cotés données :

• Les données qui représente la grille - ici un tableau de 4 tableaux de 4 objets. Les objets décrivent l'état d'une case.
• Une fonction pour manipuler ce tableau, c'est-à-dire décaler les données dans un sens (haut, bas, gauche, droite)
• Une fonction qui compte le score et vérifie si la partie est finie

À ce stade, tu à un script fonctionnel, avec lequel tu peux jouer dans la console de ton navigateur.

Côté affichage

• Il faut faire une liaison entre les objets de la grille et les éléments de la page : par exemple, une propriété de l'objet décrivatn une case peut être une référence vers l'élément HTML. Tu peux aussi utiliser un objet de type Map.
• Une fonction qui mets à jour l'affichage après chaque mouvement

Côté controle 

• Il faut simplement associer des événements ("keypress" par exemple) aux fonctions qui premettent de manipuler le tableau

-
Edité par LCaba 6 décembre 2017 à 16:50:57

Oui c'est vrai je devrais faire un tableau de données où le jeu se deroule et que la page ne soit que l'affichage de ce tableau de données. C'est une trés bonne idée.

J'ai deja réalisé la fonction qui vérifie si la partie est fini, il me manquais les mouvements, qui d'aileurs seront beaucoup plus facile a gêrer maintenant avec les tableaux.

Je vais me pencher alors sur les objets en JS pour mes cases, merci beaucoup.

-
Edité par NicolasManellio 7 décembre 2017 à 11:18:56