Discussion :

[nadfri2019]

Bonjour,

Je suis entrain de programmer le jeu du "plus/moins" en JS pour apprendre ce langage.

J'aimerai bien que les propositions fausses s'affiche dans un carré barré.

Le problème, c'est comment afficher un texte centré dans ce petit carré qui correspondra à la valeur saisie par le joueur?

En sachant, qu'à l'origine, j'ai cinq images de carré identique vierge, représentant les 5 essais

[eleydet]

Bonsoir,
Le problème, c'est qu'on ne sais pas comment sont construites les images: Avec SVG, canvas...?

[nadfri2019]

Je ne connais ni SVG ni Canvas

Voici le code que j'ai utilisé pour générer mes images (cœur et case en dessous):

Code JavaScript :

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
let imgCoeur;
let imgCase;
 
	for (let i=0;i<count;i++) //affiche les coeurs
	{
		imgCoeur= document.createElement("img");
		imgCoeur.setAttribute("src", "img/coeur.png");
		imgCoeur.setAttribute("class", "coeur");
		document.getElementById("vie").appendChild(imgCoeur);
	}
 
 
	for (let k=0;k<count;k++) //affiche les cases
	{
		imgCase= document.createElement("img");
		imgCase.setAttribute("src", "img/case.png");
		imgCase.setAttribute("class", "case");
		document.getElementById("vie").appendChild(imgCase);
	}

le tout dans cette div HTML:

Code HTML :

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

1
2
<div id="vie">
</div>

[eleydet]

Bonjour,
Une solution est de remplacer les images par des conteneurs de type div avec des identifiants et des images de fond (background-image : ...). Ainsi, il est facile d'écrire ce que l'on veut dans les conteneurs.

[javatwister]

Bonjour,
Une solution est de remplacer les images par des conteneurs de type div avec des identifiants et des images de fond (background-image : ...). Ainsi, il est facile d'écrire ce que l'on veut dans les conteneurs.

+1;

par contre, je te conseille de créer une version bis de ton image avec une transparence modifiée avant de la mettre en background;

[nadfri2019]

Merci je vais tester cela de suite.