Afficher l'image d'un objet citrouille ;)

**nouby** · 15/06/2023, 10h06

Bonjour, je voudrais créer un objet, ça je sais faire, mais lui attribuer une image seulement après le chargement du body dans une fonction init().
Mais mon image de l'objet ne s'affiche pas :/

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
var image1=new Image();
var monobjet=new CObjet(image1,100,200); // <----- PX et PY
 
function init(){
 
    // Image à charger pour l'objet.
    image1.src='img/citrouille.png';
 
    image1.onload=function(){
        monobjet.Image=image1;
    }
 
 
    ctx1.drawImage(monobjet.Image,monobjet.PX,monobjet.PY);
}

**Archimède** · 15/06/2023, 10h39

Salut, Il faudrait pouvoir regarder du côté de ta classe Cobjet si ton setter image est correct...
Après, tu développes une classe avec les positions de ton image dans son container et tu fais un context.drawImage() qui te positionne cet objet sur le canvas... Curieux comme démarche... Il y a un souci...

**nouby** · 15/06/2023, 10h50

Merci

Quand je fais ça, l'image s'affiche :

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
// j'ajoute ça à la fin de la fonction init()
var animtimer=requestAnimationFrame(anime);
 
// Et ça c'est hors de la fonction init(), je l'ai mis bien au-dessus de la fonction init().
function anime(timestamp){
 
    ctx1.drawImage(monobjet.Image,monobjet.PX,monobjet.PY);
 
    animtimer=requestAnimationFrame(anime);
}

Ah c'est vrai ce que tu dis pour le PX,PY ils me servent à stocker la position de la citrouille.
il y a mieux à faire ?

EDIT :

Je le déclare comme ça :

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
class CObjets{
	constructor(Image, PX, PY, With, Height, Nom){
	this.Image=Image;
        this.PX=PX;
        this.PY=PY;
        this.Width=Width;
        this.Height=Height;
	this.Nom=Nom;
 
}

Je veux faire un jeu avec une ferme et des légumes.

**Archimède** · 15/06/2023, 11h03

Quand appelles-tu ta fonction init() dans le onload ?

Code javascript :

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

window.addEventListener("load",init)

**nouby** · 15/06/2023, 11h07

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
</body>
 
</html>
 
<!-- Initialisation de quelques variables. -->
<script>
        var ctx1 = document.getElementById('ecran1').getContext('2d');
</script>>
 
 
<script type="text/javascript">
        window.onload=function(){init();};
</script>

**Archimède** · 15/06/2023, 11h10

Tu as placé ta fonction init() avant ton événement load ?

**nouby** · 15/06/2023, 11h44

J'ai fais comme ça :

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
 
<html lang="fr">
 
<head>
 
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<link href="css/maferme.css" rel="stylesheet" type="text/css" >
	<script type="text/javascript" src="js/maferme.js"></script>
 
	<title>LaFerme Ver1.0</title>
 
 
<!--
Jeu de gestion d'une ferme.
Titre provisoire.
-->
 
</head>
 
<body>
 
	<div id="contener">
 
        <!-- Affichage des points, à voir... -->
 
        <!-- Affichage de la barre de menu -->
 
        <!-- Affichage du Calendrier -->
        <div id="calendrier">
 
            <!-- Affichage de l'année virtuelle. -->
 
            <!-- Affichage du mois virtuel. -->
 
            <!-- Affichage de la semaine virtuelle. -->
 
            <!-- Affichage du jour virtuel. -->
 
            <!-- Affichage de l'heure virtuelle. -->
 
        </div>
 
        <!-- Ecran d'affichage de l'image de fond. -->
		<canvas id="ecran1"></canvas>		   
 
        <!-- Ecran d'affichage des objets "plante".  -->
        <canvas id="ecran2"></canvas>
 
    </div>
</body>
 
</html>
 
<!-- Initialisation de quelques variables. -->
<script>
        var ctx1 = document.getElementById('ecran1').getContext('2d');
</script>>
 
 
<script type="text/javascript">
        window.onload=function(){init();};
</script>

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
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
/* ****************** CLASSES ****************** */
 
class CObjets{
	constructor(Image, PX, PY, With, Height, Nom){
	this.Image=Image;
        this.PX=PX;
        this.PY=PY;
        this.Width=Width;
        this.Height=Height;
	this.Nom=Nom;
 
}
 
 
/* ******************* VARIABLES **************** */
 
var image1=new Image();
 
X1,X2,Y1,Y2=0;
menu=False;
 
 
var monobjet=new CObjet(image1,100,200); // <----- PX et PY
 
 
 
/* ************** FONCTIONS *************** */
 
function anime(timestamp){
 
    ctx1.drawImage(monobjet.Image,monobjet.PX,monobjet.PY);
 
    animtimer=requestAnimationFrame(anime);
}
 
 
function init(){
 
    // Image à charger pour l'objet.
    image1.src='img/citrouille.png';
 
    image1.onload=function(){
        monobjet.Image=image1;
    }
 
    var animtimer=requestAnimationFrame(anime);   
}

**nouby** · 15/06/2023, 12h01

Je sais plus ce que j'ai changé, maintenant l'image s'affiche plus, avant elle s'affichait dans la boucle anim

RESOLU !!!!

J'avais oublié de remettre les largeurs et hauteurs du canvas dans la fonction init().

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
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
49
50
51
52
53
54
55
56
57
 
/* ****************** CLASSES ****************** */
 
class CObjet{
	constructor(Image, PX, PY, Width, Height, Nom){
	this.Image=Image;
    this.PX=PX;
    this.PY=PY;
    this.Width=Width;
    this.Height=Height;
	this.Nom=Nom;
    }
}
 
 
/* ******************* VARIABLES **************** */
 
var largeur=screen.width;
var hauteur=screen.height;
 
 
var image1=new Image();
 
var X1,X2,Y1,Y2=0;
var menu=false;
 
 
var monobjet=new CObjet(image1,100,200); // <----- PX et PY
 
 
 
/* ************** FONCTIONS *************** */
 
function anime(timestamp){
 
    ctx1.drawImage(monobjet.Image,monobjet.PX,monobjet.PY);
 
    animtimer=requestAnimationFrame(anime);
}
 
 
function init(){
 
	ecran1.width=largeur;
	ecran1.height=hauteur;
	ctx1.width=largeur;
	ctx1.height=hauteur;
 
    image1.onload=function(){
        monobjet.Image=image1;
    }
 
    // Image à charger pour l'objet.
    image1.src='citrouille.png';
 
    var animtimer=requestAnimationFrame(anime);   
}

Mais j'aurais bien voulu savoir comment on fait pour charger une image sur l'objet aprés qu'il a été créé, parce que je crée l'objet en début de page JS et ensuite je voudrais y mettre son image à partir du init(). Alors je vais faire un autre sujet puisque celui-ci est résolu.

Merci

Afficher l'image d'un objet citrouille ;)

JavaScript

Discussions similaires

Partager

Partager