Discussion :

[Elradriel]

Bonjour tout le monde, ayant choisis comme projet de fin d'année (Terminale S, option ISN) un tower defense réalisable à deux (les profs m'ont dit que le projet était faisable donc accepté), j'ai commencé à me lancer dedans quand même car le temps défile et mon collègue n'a pas l'air très motivé ! Bref ! Le tower defense que les profs me demande est un peu différent de celui que l'on connait, brièvement, la génération des mobs ce fait partout sur les bords de la carte et ceux ci cherchent à détruire les tours posées sur la carte, si il n'y a plus de tour c'est perdu. Bref, j'ai essayé de faire la génération de mob aléatoirement tout d'abord sur toute la carte pour voir le fonctionnement, mais le problème c'est que ça ne marche pas. Je ne suis pas spécialement doué en prog' même si je m'y intéresse un peu (je suis le meilleur de ma classe alors que bon u_U Et concrètement ce qu'on a vu en cours n'est absolument pas utile pour nos projets.)

Voila le code:

Code :

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
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
window.onload = function(){
var largeur = setInterval(generateurPositionAleatoireLargeur(),1000);
var hauteur = setInterval(generateurPositionAleatoireHauteur(),1000);
var generation = setInterval(generationMob(largeur, hauteur),1000);
}
 
function generationMob(largeur,hauteur){
	context.beginPath();
	context.fillRect(largeur,hauteur,5,5);
	context.closePath();
}
 
function generateurPositionAleatoireHauteur(){
var tableauAleatoireHauteur = [];
	for (var i = 0; i < 10; i++){
	var hauteur = Math.floor(canvas.height*Math.random());
	tableauAleatoireHauteur.push(hauteur);
	}
	var selectionHauteur = tableauAleatoireHauteur [Math.floor(Math.random()*tableauAleatoireHauteur.length)];
	return selectionHauteur;
}
 
function generateurPositionAleatoireLargeur(){
var tableauAleatoireLargeur = [];
	for (var i = 0; i < 10; i++){
	var largeur = Math.floor(canvas.width*Math.random());
	tableauAleatoireLargeur.push(largeur);
	}
	var selectionLargeur = tableauAleatoireLargeur [Math.floor(Math.random()*tableauAleatoireLargeur.length)];
	return selectionLargeur;
}

J'utilise donc canvas pour le projet j'espère que ça ne me posera pas de problème, ensuite je sais que le Javascript est orienté objet mais on n'a absolument rien vu sur ça en cours, donc déjà je vous demande si ça risque de poser problème si je travaille uniquement avec des fonctions ?

Ensuite donc je n'arrive pas à comprendre le problème du code, et le déboggeur de firefox ne me dit rien.

Merci de votre aide bonne soirée

[SylvainPV]

Bonjour,

Il va falloir être un peu plus précis que "ça ne marche pas". Quel est le résultat, y-a-t-il des erreurs en console JavaScript, as-tu essayé d'utiliser le débogage pas à pas pour voir si tu passais bien aux endroits attendus du code ? As-tu une démo en ligne quelque-part que l'on puisse voir tout le code ?

Sinon pour répondre à tes questions, canvas est un bon choix de techno pour un jeu JavaScript bien que ce ne soit pas forcément le plus facile à aborder par un débutant. Et en effet en JavaScript presque tout est objet, mais le langage est suffisamment flexible pour autoriser tous styles de programmation: fonctionnel, évènementiel, objet, MVC... Pour le moment, fais comme tu le sens du moment que tu es à l'aise.

Je ne connais pas les objectifs pédagogiques de ton projet, mais est-ce que tes profs sont ouverts à l'usage d'une bibliothèque ? Ça pourrait t'aider à finir dans les temps avec un jeu correct, en éliminant les parties rébarbatives comme la gestion de sprites, les contrôles etc... pour te concentrer sur la logique de jeu.

[Elradriel]

Justement il faut que je demande cette question ! Mais je t'avoue que je ne suis pas très au point avec les bibliothèques, ceci m'aiderai grandement ? Ensuite voila ce qui se passe lorsque je lance le code: http://hpics.li/32c37e8

Donc le carré est généré uniquement en haut à gauche de l'écran. Alors que le but serai que chaque seconde, un nouveau carré apparaissent à une position aléatoire.

Ensuite quand j'essaye des commandes tel que : var largeur = generateurPositionAleatoireLargeur() dans la console, cela me sort undefined.

[SylvainPV]

Disons qu'une bonne bibliothèque pourrait réduire ton temps de travail de moitié au moins, et te fournirait tout ce que tu as besoin. C'est le meilleur moyen d'arriver à un jeu correct, mais bien entendu tout faire soi-même est bien plus enrichissant sur le plan pédagogique. Encore faut-il avoir le temps et les capacités.

Si la console te sort undefined, c'est parce qu'une déclaration de variable n'est pas sensée retourner de valeur. Ce qui s'affiche dans la console est l'évaluation de l'instruction au-dessus, rien de plus.

> var x = 5;
undefined
> 5 + 5
10
> x
5

Quant à ton code, en regardant de plus près il y a beaucoup d'erreurs de logique :

Code :

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

1
2
3
var largeur = setInterval(generateurPositionAleatoireLargeur(),1000);
var hauteur = setInterval(generateurPositionAleatoireHauteur(),1000);
var generation = setInterval(generationMob(largeur, hauteur),1000);

Plein d'erreurs ici. Déjà pourquoi trois setInterval ? largeur et hauteur ne sont pas des timers. Et on passe à setInterval une fonction, pas le résultat de cette fonction après son appel. Donc un code plus correct serait :

Code :

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

1
2
3
4
5
6
7
8
function generationMob(){
        var largeur = generateurPositionAleatoireLargeur();
        var hauteur = generateurPositionAleatoireHauteur();
    context.beginPath();
    context.fillRect(largeur,hauteur,5,5);
    context.closePath(); 
}
var generation = setInterval(generationMob,1000);

Reste à comprendre la logique des fonctions generateurPositionAleatoireXXX. De ce que je vois, tu remplis un tableau avec dix valeurs au hasard, puis parmi ces dix valeurs au hasard, tu en prends une au hasard. Multiplier les tirages au sort ne sert pas à grand chose ici, un seul random suffit amplement Pour moi, la seule ligne utile est :

Code :

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

var largeur = Math.floor(canvas.width*Math.random());

[Elradriel]

Oulah oui tellement d'erreur je suis mauvais .. je crois que je suis mal barré pour réaliser un projet pareil ! En fait ma logique était très mauvaise car je voulais chaque seconde générer un nombre aléatoire utilisable par ma fonction générationMob pour placer chaque seconde un nouveau mob sur le canvas aléatoirement. Mais en fait je ne sais pas comment m'y prendre pour avoir toute les secondes une nouvelle largeur et hauteur utilisable par ma fonction generationMob.

Désolé pour mon niveau très faible et merci de ton aide en espérant que tu puisses continuer à m'aider

[Elradriel]

Bonjour, j'ai pour l'instant mis de côté la partie génération de plusieurs mobs chaque seconde pour me concentrer sur le positionnement et je voulais vous demander si il était possible de faire quelque chose de plus joli et nécessitant moins de test que ce que je fais:

Code :

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
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
 
window.onload = function()
{
 
context.beginPath();
context.fillRect((canvas.width)/2,(canvas.height)/2,5,5);
context.closePath();
 
 
var generation = setInterval(generationMob(),1000);
 
}
 
function generationMob()
{
	var largeur = Math.floor(canvas.width*Math.random());
	var hauteur = Math.floor(canvas.height*Math.random());
	var aleatoirePosition = Math.floor((Math.random()*4)+1);
	if (aleatoirePosition == 1){
		if (hauteur > 0){
		largeur = 0;
		}
	}
	if (aleatoirePosition == 2){
		if (largeur > 0){
		hauteur = 0;
		}
	}
	if (aleatoirePosition == 3){
		if (hauteur > 0){
		largeur = (canvas.width)-5;
		}
	}
	if (aleatoirePosition == 4){
		if (largeur > 0){
		hauteur = (canvas.height)-5;
		}
	}
 
	context.beginPath();
	context.fillRect(largeur,hauteur,5,5);
	context.closePath();
 
 
}

Suite au remarque j'ai donc modifié le code et maintenant j'essaye de placer le mob génération sur un coté du canvas. Le code marche parfaitement mais j'ai plusieurs question:

Tout d'abord est-il possible de déclarer une variable pour un objet appartenant au canvas pour ensuite l'utiliser ?

Ensuite n'y a t-il pas une "commande" pour conjuguer plusieurs possibilitées, car le "||" ne marche que pour tester une condition alors que j'aimerai pouvoir faire que si la largeur est supérieur à 0, alors la hauteur sera soit 0, soit la hauteur max.

Et pour finir y a t-il un moyen de récupérer la taille de mon carré généré avec context, car ici pour la hauteur et la largeur max, j'ai donc dut mettre -5 pour rentrer dans le canvas, mais est-il possible donc, de travailler avec les constantes de l'objet ?

Merci de votre aide et j'espère que mes questions ne vous importune pas trop Bonne journée