indexer une référence

**patdu26** · 21/10/2023, 16h59

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 :

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

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 :

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

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....

**melka one** · 21/10/2023, 17h37

jour

comme ca

Code :

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

aliment.image = 'aliment'+n;

**patdu26** · 21/10/2023, 18h19

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

Code :

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

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 :
Nom : aliment1.png
Affichages : 58
Taille : 2,0 Ko

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

Code :

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

1
2
  // dessin de la nourriture
               g2.drawImage(aliment.image, aliment.x , aliment.y, box, box);

L'incompréhension apparait ainsi dans la console :
Nom : erreurAliment.png
Affichages : 59
Taille : 3,7 Ko

Si cela tente quelqu'un....

**ASCIIDEFOND** · 21/10/2023, 19h05

Salut patdu26,

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

Code JavaScript :

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

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 JavaScript :

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

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

**melka one** · 21/10/2023, 21h44

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 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
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>

**patdu26** · 22/10/2023, 16h46

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 :

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

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 :

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

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.

indexer une référence

JavaScript

Discussions similaires

Partager

Partager