Tower Defense Javascript

Tower Defense Javascript - HTML/CSS - Programmation

Marsh Posté le 13-02-2014 à 20:45:02    

Bonjour tout le monde, je viens demander votre aide pour un projet de fin d'année.
 
Je suis actuellement en Terminale S, option ISN, et pour la spécialité, on a pour but de fin d'année, qui sera notre note de bac pour la spécialité, un projet à réaliser et à expliquer devant un jury. Les profs ont proposés plusieurs sujets, mais aucun ne m'intéresser ! J'ai donc proposer aux profs un tower defense et ceux-ci mon dit que notre projet était réalisable (nous sommes deux, mon collègue n'a par contre aucune notion de programmation). De plus, et plus particulièrement pour ma part, mais c'est le ressenti d'ami étant dans ma classe en ISN, je n'ai absolument rien appris pendant le cours, et certainement pas quelque chose susceptible de m'aider dans mon projet !  
 
J'ai les notions, vraiment de base en C/C++, HTML5/CSS3 et Javascript, mais rien de bien folichon !
 
Donc, je pense que vous connaissez tous le principe du tower defense, sinon voila: http://fr.wikipedia.org/wiki/Tower_defense
 
Donc, les projets ayant commencé la semaine dernière, et comme il me semble que j'ai choisis un projet trop ambitieux, mais maintenant trop tard pour changer de direction, j'ai décidé de m'y mettre très tranquillement chez moi en inscrivant tout dans un cahier. La première partie qui me semblait facile à faire était la génération de mob qui pour un premier temps se déplacer sur l'axe x et y avec une vitesse constante. Mais voila donc je bloque déjà:
 
Le but des quelques lignes suivantes était donc de: Générer 10 mobs qui se succèdent se déplaçant à vitesse constante sur l'axe x et y en formant une ligne droite, et un système de rebond contre les murs du canvas. Problème ça bloque déjà ..
 
J'ai bien le canvas qui est créé sur ma page, j'ai bien la balle qui est crée, par contre, celle-ci ne bouge pas et reste immobile !  
 
Voici le code:
 
HTML

Spoiler :

<!DOCTYPE html>
 
<html>
 
  <head>
  <link rel="stylesheet" href="style.css" />
    <title>Titre affiche dans la barre de titre du navigateur</title>
  </head>
 
  <body>
   
   
 <canvas id="canvas" width="640" height="500">Oh non ! Votre navigateur ne reconnait pas la balise </canvas>
   
   
    <script src="javascript_test.js"></script>
  </body>
 
</html>



JAVASCRIPT:

Spoiler :

var canvas = document.getElementById("canvas" );
var context = canvas.getContext("2d" );
 
 
 window.onload = function()
{
 var diametreBalle = 20;
    var posX = 1+diametreBalle/2;
    var posY = 1+diametreBalle/2;
    var vitesseX = 5;
    var vitesseY = 5;
 var mob = generationDeMob(posX,posY,diametreBalle,vitesseX,vitesseY);
 setInterval("mob",40);
 
 }
 
 
function generationDeMob(posX,posY,diametreBalle,vitesseX,vitesseY)
{
 var nombreDeMob;
 
 for (nombreDeMob =0; nombreDeMob<10; i++)
  {
  context.clearRect(0,0,canvas.width, canvas.height);
   
  context.beginPath();
  context.arc(posX,posY,diametreBalle/2, 0, Math.PI*2);
  context.fill();
  context.closePath();
   
  if(posX+diametreBalle/2 >= canvas.width || posX <= 0+diametreBalle/2)//Si on touche le bord gauche ou droit
        {
            vitesseX *= -1;//On inverse la vitesse de déplacement sur l'axe horizontal.
   ++nombreDeMob;
        }
 
        if(posY+diametreBalle/2 >= canvas.height || posY <= 0+diametreBalle/2)//Si on touche le bord du bas ou du haut
        {
            vitesseY *= -1;//On inverse la vitesse de déplacement sur l'axe vertical.
   ++nombreDeMob;
        }
   
   
  posX += vitesseX;
        posY += vitesseY;
 }
}


 
J'espère ne pas avoir oublié quelque chose pendant le copier coller mais je ne pense pas ! (je n'ai pas mis le css mais il ajoute juste une bordure au canvas.
 
Voila j'espère que vous pourrez m'aider rapidement, j'ai cours demain après midi, si le problème était résolu, je pourrai de ce fait avancer :) et surtout ! Si vous avez des conseils sur la réalisation du projet de prend !  
 
Bonne soirée et merci !

Reply

Marsh Posté le 13-02-2014 à 20:45:02   

Reply

Marsh Posté le 13-02-2014 à 21:23:51    

Là y'a deux problèmes :
 
D'abord, en Javascript, le passage des variables se fait par copie :  
 

Code :
  1. function foo( a )
  2. {
  3.   a = 17;
  4. }
  5.  
  6. function bar()
  7. {
  8.   var x = 0;
  9.   foo(x); // On appelle en faisant passer la valeur contenue dans x (c'est à dire 0 dans ce cas)
  10.   // Ici, x est toujours à 0
  11. }


 
Pour palier à ça, tu devras travailler (et même outre ce problème, dans le cadre d'un jeu vidéo je te le recommande grandement :D) avec des objets (programmation orienté-objet).  
Javascript le permet, regarde sur google ;)
 
Ceci-dit, il faudrait peut-être penser à changer de support, ça risque de devenir très vite le bordel en JS (je sais pas de combien de temps tu disposes, ça se fini genre juin non ? :sweat:)
 
Le deuxième soucis, c'est la conception même du code.
Là, ta fonction s'appelle "generationDeMob", ce qui sous-entend que tu créer les mobs. Or, dans ta fonction, tu mets à jour une balle, mais avant ça tu dessines la balle, le tout imbriqué dans une loop for.
Normalement, ton jeu devra contenir une boucle principale structurée :
 


- Initialisation des objets (chargement des resources, carte, etc )
 
Tant que ( le jeu n'est pas terminé )
{
   - Mettre à jour tout les objets (coordonnées X/Y/(Z), collisions, etc )
   - Dessiner tout les objets
}


 
En gros, tu aura un objet (on va l'appeler Scene) qui contrôlera les autres :
 

Code :
  1. //-------------------
  2. // Initialisation
  3. Mob A,B,C; // 3 mobs
  4. Scene S;
  5. S.AjouterObjet( A ); // On ajoute le Mob A à la scène
  6. S.AjouterObjet( B ); // On ajoute le Mob B à la scène
  7. S.AjouterObjet( C ); // On ajoute le Mob C à la scène
  8. //-------------------
  10. //-------------------
  11. // Boucle principale
  12. while ( Continuer )
  13. {
  14.     S.MettreAJour(); // On appellera la fonction Mob::MettreAJour sur A,B et C dans ce cas
  15.     S.Dessiner(); // On appellera la fonction Mob::Dessiner sur A,B et C ici
  16. }
  17. //-------------------


 
C'est du pseudo-code (je connais pas assez bien le JS pour te pondre un prototype), si tu es nouveau à la POO ça va être un peu chaud ceci-dit..


---------------
Perhaps you don't deserve to breathe
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed