Remplir un tableau d'image pour un jeu de memoire

jean_chase Messages postés 8 Date d'inscription Statut Membre Dernière intervention -
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention - 24 sept. 2019 à 22:35

bonjours à tous, j'ai besoin d'aide et de conseille pour un projet assez ambitieux, j'aimerai faire une sorte de jeux de mémoire en javascript cependant je suis un gros débutant en js.
donc premièrement je voudrais créer un tableau qui va afficher un certains nombre d'image aléatoirement en fonction du niveau de difficulté avant d'aller plus loin.
Merci de bien vouloirs me guider.
voici ce que j'ai fait

// creation d'un tableau 
var tabimage = new Array();
var nbrimage= 8;

function generation() {
    
     var level =0;

     switch (level) {
        case 0:
            tabimage.length = 4;
            break;

        case 1:
        tabimage.length = 9;
            break;

        default:
            tabimage.length = 12;
    }
    // remplissage dynamique
for(i=0;i<nbrimage;i++) {
    tabimage[i]= image +1

        document.getElementById("grille").style.backgroundImage = ("Images/mini(1).jpg");

    }


}

ce que j'ai voulu faire c'Est que avec la switch je pourrai avoir mon niv de difficulté ainsi avoir un tab grand ou petit, pas encore trouvé comment rendre le choix du niveau automatique.
le plus gros problème c'Est mettre les images dans mon tableau , (elle sont dans un dossier images) je ne sais pas comment le faire.
de plus mon vs code ne me permet plus de tester mon script dans le navigateur.

Afficher la suite

A voir également:

Tableau d'image javascript
Tableau word - Guide
Tableau ascii - Guide
Trier un tableau excel - Guide
Tableau croisé dynamique - Guide
Supprimez les composantes rouge et verte de cette image. quel mot apparaît ? - Forum Word

3 réponses

Réponse 1 / 3

Mhacks79 Messages postés 213 Date d'inscription Statut Membre Dernière intervention 41

Alors j'ai pas un gros niveau dans ce langage mais pour afficher des images dans un zone donnée ça tu devrais trouver facilement mais pour la question de l'aléatoire tu dois faire en sorte que chaque image corresponde à une variable pour ensuite lancé la fonction "aléatoire" entre l'image 0 et l'image 38 (par exemple) vu que chaque image aura une ID correspondante à la variable qui tu lui aura donné. Tu peut aussi trouver la fonction aléatoire facilement j'avais fais un générateur de map en 2d aléatoire comme ça ou le code allait choisir aléatoirement une image 'sol' ou une image 'mur' pour chacune des cases du tableau mais ça remonte à loin
EDIT : je l'ai retrouvé finalement mon vieux tableau mais c'est un mélange de HTML de CSS et de Jquerry

jean_chase Messages postés 8 Date d'inscription Statut Membre Dernière intervention

merci pour les idées, je vais essayer de faire la génération aléatoire comme tu me l'as présenté, pour le reste je vais continuer a chercher

Réponse 2 / 3

Octopot

Salut,

pour l'aléatoire c'est avec la fonction random() de l'objet Math comme ceci par exemple:
en utilisant un tableau c'est plus souple qu'avec un switch

var tabImages=['images/image1.jpg', 'images/image2.jpg','images/image3.jpg'];
//-- et ainsi de suite juste qu'à 8 si on veut
//-- mais ça permet de modifier le nombre d'images sans avoir à changer le code
function nombreAleatoire(maximum){
  return Math.floor(Math.random()*maximum);//-- pour plus de détails faire une recherche sur random()
}
function imageAleatoire(){
  var indexTable=nombreAleatoire(tabImages.length);
//--  'indexTable' va stocker un nombre entre 0(images[0] et le nombre d'images-1
console.log('l\'image est '+tabImages[indexTable]);
return tabImages[indexTable];
}

//-- UTILISATION DES FONCTIONS
/* pas obligé mais je crée une image, elle peut être déjà existante dans le HTML même si vide ou masquée*/
var imageAfficher= document.createElement('img');
//-- imageAfficher est une variable qui contient la balise HTML "img" (c'est un objet JavaScript aussi)
imageAfficher.src=imageAleatoire();
imageAfficher.setAttribute('alt', 'description image');

document.getElementById("grille").appendChild(imageAfficher);
//-- appendChild() permet de rajouter l'image dans la page(ici dans l'élément nommé grille)

Si c'est un jeu de mémoire style trouver les images qui vont par paires sur une grille on peut très bien utiliser la même fonction, il suffit de supprimer celle tirée à chaque fois du tableau.

Mhacks79 Messages postés 213 Date d'inscription Statut Membre Dernière intervention 41

Je vois pas ce que tu veux dire par "La même fonction" mais si par exemple tu veux retirer les paires déjà découverte je te conseille plutôt d'utiliser la même fonction pour afficher une image sauf que tu les laisse en face découverte sans pour autant les retirée. et si l'utilisateur veux recommencer tu peut faire un bouton rejouer qui va simplement actualisé le code une nouvelle fois en le relisant depuis le début ou seulement la fonction qui permet de randomizé le placement des images.
EDIT: mais si tu relance juste la fonction oublis pas "clear" avant sinon ça va les rajoutés par dessus les autres ^^

jean_chase Messages postés 8 Date d'inscription Statut Membre Dernière intervention

merci pour les conseilles.
Et non je ne veux pas retirer les images, ce que je veux faire c'est que après chaque paire trouvé. il y aura un score qui va incrémenter et le tableau je mélange de nouveau . Je fais essayer tout sa ce soir et si je réussi quelque chose je vais faire signe.
encore merci pour l'aide.
PS : pour mon vs code qui marchait pas il n'y avait tout simplement pas de path pour browser, j'ai ajouté l'extension requise.

Mhacks79 Messages postés 213 Date d'inscription Statut Membre Dernière intervention 41

De l'aide je sais pas sachant que je t'ai pas donné une seule ligne mais du coup pour incrémenté un score c'est facile il te faut :
-Une condition de victoire (contre la montre, ou limite d'erreur)
-Relancer le mélange en prenant soin de clear le tableau avant et d'ajouter une condition (si il gagne score++) si il perd score = score) ou un truc dans le genre

Octopot

complet pour tester le script à part

<html>
<div id='grille'>

</div>
<script>

var tabImages=['images/image1.jpg', 'images/image2.jpg','images/image3.jpg'];
function nombreAleatoire(maximum){
  return Math.floor(Math.random()*maximum);
}
function imageAleatoire(){
  var indexTable=nombreAleatoire(tabImages.length);
console.log('l\'image est '+tabImages[indexTable]);
return tabImages[indexTable];
}

//-- UTILISATION DES FONCTIONS

var imageAfficher= document.createElement('img');
imageAfficher.src=imageAleatoire();
imageAfficher.setAttribute('alt','description');

document.getElementById("grille").appendChild(imageAfficher);
</script>
</html>

Mhacks79 Messages postés 213 Date d'inscription Statut Membre Dernière intervention 41

Hmm ça affiche juste "description" et le mieux serait de spécifier l'encodage en haut de page pour une meilleure compatibilité d'affichage des caractères, ça peut poser problème sur certains navigateurs

Réponse 3 / 3

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Bonjour

Jette un oeil à ceci

https://forums.commentcamarche.net/forum/affich-35837482-jeu-du-memory#12

jean_chase Messages postés 8 Date d'inscription Statut Membre Dernière intervention

desole de répondre tardivement la fin de cette semaine jetait allé a une graduation hors de ma ville
sinon j'ai regarder le lien et j'ai fait le code suivant qui affiche mon images. il va me rester a faire une fonction qui va indiquer les images a cliquer dessus. cependant j'ai vraiment pas d'idéé pour le faire.

<code java>

<!DOCTYPE html>
<html>
<head>
<title>TP1 - Emilie Aubin et Jean Semde - Easy</title>
<link rel="stylesheet" type="text/css" href="CSS/mef.css">
<style>
</style>
</head>
<body>

<h1>Jeu pour le tp1</h1>
<h2 id="Niveau">Facile</h2>

<div id="grille"></div>

<div id="divDifficulte" >
<button type="button" class="bouton" onclick="generation(0)">Facile</button>
</div>

<div id="divDifficulte" >
<button type="button" class="bouton" onclick="generation(1)">Moyen</button></a>
</div>

<div id="divDifficulte">
<button type="button" class="bouton" onclick="generation(2)">Difficile</button></a>
</div>

<script type="text/javascript">
var cible = document.getElementById('affichage');

var nbPerLvl = [
[2,3,3],
[2,2,3]
];

/*var nbCol = 7;
var nbLignes = 2;*/

var nbGagne = 0;
var nbChances = 0;
var nbCards = 0;
var previouscard = null;
var defaultImg = '/images/bleu.png';

var imgs = '/images/bleu.png',
'/images/gris.png',
'/images/jaune.png',
'/images/noir.png',
'/images/orange.png',
'/images/rose.png',
'/images/rouge.png',
'/images/vert.png',*/
'https://i.pinimg.com/originals/66/63/ce/6663ce83937f7a242cee4dac2e85eb8e.jpg'

function InitCards(level){
var cards = [];

nbCards = nbPerLvl[0][level]*nbPerLvl[1][level];
for (var i = 0; i < nbCards; i++)
{
cards.push(imgs[Math.floor(Math.random() * Math.floor(imgs.length))]);
}

return cards;
}

/**

Shuffles array in place.
@param {Array} a items An array containing the items.
/

jean_chase Messages postés 8 Date d'inscription Statut Membre Dernière intervention

avant de partir en cours,
pour mon animation je voulais faire une chose simple en faisant un visible et l'annuler avec un set timer pour indiquer les images a cliquer, mais comment le faire? mercis de vos commentaire

jean_chase Messages postés 8 Date d'inscription Statut Membre Dernière intervention

j'ai put faire un autre code qui affiche mes images je pense que se sera plus facile pour l'animation
c'est un .js

var img_array = ['CSS/images/bleu.png', 'CSS/images/gris.png', 'CSS/images/jaune.png', 'CSS/images/orange.png']
var img_values = [];
var img_title_ids = [];
var img_flipped = 0;

//mélanger le tableau
Array.prototype.img_tile_shuffle = function(){
var i = this.length, j, temp;
while (--i >0){
j = Math.floor(Math.random() * (i+1));
temp = this[j];
this[j] = this[i];
this[i] = temp;
}
}
//Nouveau tableau
function generation2(){
img_flipped = 0;
var output = ' ';
img_array.img_tile_shuffle();
for(var i = 0; i < img_array.length; i++){
output += '<div id ="title_'+i+'" onclick="imgFlipTile(this, \'' +img_array[i] + '\')" style= "background-image : url(' + img_array[i] + ')"></div>';
}
document.getElementById('grille').innerHTML = output;
}

et voici le HTML
<!DOCTYPE html>
<html>
<head>
<title>TP1 - Emilie Aubin et Jean Semde - Easy</title>
<link rel="stylesheet" type="text/css" href="CSS/mef.css">
<script src="SCRIPT/JavaScriptTP1.js"></script>
<style>
</style>
</head>
<body>

<h1>Jeu pour le tp1 - Equipe 2</h1>
<h2 id="Niveau">Facile</h2>

<div id="grille">
<div id="divGrille">
<script>generation2();</script>
</div>
</div>

<div>
//Div pour le score
</div>

<div id="divDifficulte" >
<button type="button" class="bouton">Facile</button></a>
</div>

<div id="divDifficulte" >
<a href="tp1Page2.html"><button type="button" class="bouton">Moyen</button></a>
</div>

<div id="divDifficulte">
<a href="tp1Page3.html"><button type="button" class="bouton">Difficile</button></a>
</div>

</body>
</html>

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Merci de poster ton code correctement
https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

Discussions similaires

Calculer somme valeur tableau javascript

tableaux imbriqués en javascript

affichage d'un tableau en javascript

[Javascript] array à 2 dimensions

javascript et tableau html

[JavaScript] Somme de Array

Votre réponse

Discussions similaires