Elradriel | 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 ! |
) avec des objets (programmation orienté-objet). 
)