indexer une référence

bonjour, je réalise en loisir, un jeu snake en javascript.

j'ai 3 images de nourriture différentes que je charge au chargement de ma page :
Code:

1 2 3 4 5 6 7 // chargement des images du jeu let aliment0 = document.createElement("img"); aliment0.src = "./images/image0.png"; let aliment1 = document.createElement("img"); aliment1.src = "./images/image1.png"; let aliment2 = document.createElement("img"); aliment2.src = "./images/image2.png";
Au moment où je dois placer un aliment sur mon canvas, je détermnine une image et une position au hasard. L'image choisie se détermine ainsi :
Code:

1 2 3 4 5 6 7 8 9 10 let n = Math.floor(Math.random()*3); if (n==0) { aliment.image = aliment0; } else if (n==1) { aliment.image = aliment1; } else if (n==2) { aliment.image = aliment2; }
je trouve dommage de faire une boucle pour choisir l'image selon la valeur de n, entre 0, 1 ou 2, pour après choisir l'image : image0 ou image1 ou image2.

J'ai donc essayé d'indexer ma référence directement avec la valeur de n, pour éviter une boucle, dans le genre :
aliment.image = "aliment" + n mais je n'arrive pas trouver la bonne syntaxe...

Si quelqu'un connait bien cela, merci à lui....

jour

comme ca

Code:

aliment.image = 'aliment'+n;

2 pièce(s) jointe(s)

le problème est toujours présent:
j'ai rajouté un affichage de la valeur stockée dans "aliment.image" :
Code:

1 2 3 let n = Math.floor(Math.random()*3); aliment.image = 'aliment' + n; alert ("mon image : " + aliment.image);
A l'affichage du contenu de "aliment.image", cela parait correct :
Pièce jointe 645527

Cependant l'interprétation reste incorrecte, dans la fonction "draw()" qui repeint l'écran :
Code:

1 2 // dessin de la nourriture g2.drawImage(aliment.image, aliment.x , aliment.y, box, box);
L'incompréhension apparait ainsi dans la console :
Pièce jointe 645528

Si cela tente quelqu'un....8O

Salut patdu26,

Si tu souhaites récupérer en aléatoire une balise IMG ou sa valeur SRC.

Code:

1
2
3
4
5
6
7
8
9
10
        var balises = [] //tableau
        for (var baliseImg of document.getElementsByTagName('img')) {
            balises.push(baliseImg) // on ajoute les balises img dans le tableau
        }
 
        let n = Math.floor(Math.random() * 3);
        aliment.image = balises[n].src
 
        console.log(balises[n]) // la balise img
        console.log(balises[n].src) // la valeur de son attribut src

Ou sans tableau

Code:

1
2
      let n = Math.floor(Math.random() * 3);
        aliment.image = document.getElementsByTagName('img')[n] // ou document.getElementsByTagName('img')[n].src

le problème est que l'on obtient une chaîne de caractère

essai ce code qui stocke une référence aux image dans un objet plutôt que des variables et pour les image j'utilise new image mais attention car normalement pour être utilisé les image doivent être charger et pour le savoir il faudrait utiliser un onload ou tester l'attribut complet c'est le cas si l'utilisation doit se faire au chargement de la page
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 <!doctype html> <html> <head> <meta charset="UTF-8"> <script> var ref_image={} window.addEventListener("load",function (){ ref_image.aliment0 = new Image(); ref_image.aliment0.src ="./images/image0.png";; ref_image.aliment1 = new Image(); ref_image.aliment1.src = "./images/image1.png";; ref_image.aliment2 = new Image(); ref_image.aliment2.src = "./images/image2.png";; }, false); function ptn(){ var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, canvas.width, canvas.height); let n = Math.floor(Math.random()*3); n= 'aliment'+n; let ima=ref_image[n] console.log(ima) ctx.drawImage(ima,0,0); } </script> </head> <body> <button id="main" onclick="ptn()">bbttnn</button> <canvas id="canvas" height="300" width="300"></canvas> </body> </html>

merci pour vos pistes.

j'ai trouvé la fonction "eval" qui permet d'évaluer une chaine comme du comme js, et l'exécuter si c'est interprétable.

Ca fonctionne, mais apparemment c'est à éviter pour des question de sécurité et de lenteur d'exécution....

je suis plutôt parti sur l'idée d'un stockage des référence dans un tableau :
Code:

1 2 3 4 5 6 7 // chargement des images du jeu let aliments = []; for (let i = 0; i<3; i++) { aliments[i] = document.createElement("img"); aliments[i].src = "./images/image" + i + ".png"; console.log("i = " + i + " aliments[i] = " + aliments[i]); }
Dans ma fonction "draw", je dessine simplement l'aliment sélectionner par le "n" qui est sorti :
Code:

1 2 // dessin de la nourriture g2.drawImage(aliments[n], aliment.x , aliment.y, box, box);
Ca fonctionne plutôt bien et le code me semble plus efficace. Merci pour vos idées.

Je vais essayer d'aller compter le nombre d'aliments dans mon dossier, pour initialiser mon tableau d'aliments de manière automatique au démarrage, en fonction du contenu du dossier que je pourrais modifier et varier à ma guise, sans retoucher le code.

Encore merci pour ceux qui ont répondu si rapidement.:applo: