Programme final
Le projectile part actuellement dès que la page est chargée. Afin de permettre à l'utilisateur de régler la vitesse initiale, l'angle de lancement et la hauteur de lancement, nous allons ajouter un bouton intitulé Tir. Le lancement du projectile n'aura lieu qu'après avoir cliqué ce bouton. Le compteur ne doit pas s'incrémenter pendant ces réglages. Une manière de procéder est de remplacer compteur=compteur+1 par compteur=compteur+pas avec un pas réglé à 0 au début. Sa déclaration var pas=0 ; est faite au début du script.
Le onclick="start() ;" signifie que la fonction start() est appelée. Cette dernière met le pas à 1. Le projectile va alors se déplacer.
L'ajout d'un dernier bouton permettant de réinitialiser le tir en remettant le compteur et le pas à 0 permet d'éviter de recharger la page web pour recommencer un autre tir, et conserve les réglages précédents.
<!DOCTYPE HTML>
<html lang = "fr">
<head>
<title>modéliser tir</title>
<link rel="stylesheet" media="screen" href="styles.css" type="text/css">
<meta charset = "utf-8" />
</head>
<body>
<canvas id = "schema" height = "300" width = "600" style="border:1px solid">Votre navigateur ne supporte pas la balise canvas</canvas><br/>
Vitesse lancement <input type="range" id="Vi" min="50" max="200" step="10" value="50"> cm/s<br/>
Angle de lancement<input type="range" id="alpha" min="-90" max="90" step="1" value="45">°<br/>
Hauteur lancement <input type="range" id="hauteur" min="0" max="250" step="10" value="100">cm<br/>
<input type="button" name="Submit" value="Tir" onclick="start();" />
<input type="button" name="Submit" value="Initialisation" onclick="initialisation();" />
<script>
var zone_dessin = document.getElementById("schema");
var tir = zone_dessin.getContext('2d');
var intervalle=setInterval(dessin,30);
var compteur=0;
var pas=0;
function dessin() {
tir.clearRect(0,0,600,300);
var hauteur=document.getElementById('hauteur');
var alpha=document.getElementById('alpha');
tir.beginPath();
tir.lineWidth="5";
tir.moveTo(10,290-hauteur.value);
tir.lineTo(10+10*Math.cos(2*Math.PI*alpha.value/360),290-hauteur.value-10*Math.sin(2*Math.PI*alpha.value/360));
tir.stroke();
tir.fillStyle="blue";
tir.beginPath();
tir.arc(compteur+10,290-f(compteur),5,0,Math.PI*2);
tir.fill();
if(f(compteur)>=0) compteur=compteur+pas;
tir.fillStyle="green";
tir.fillRect(400,270,20,20);
tir.beginPath();
tir.lineWidth="1";
tir.strokeStyle="black";
tir.moveTo(0,290);
tir.lineTo(600,290);
tir.moveTo(10,300);
tir.lineTo(10,0);
tir.stroke();
tir.fillStyle="blue";
tir.fillText("angle de lancement "+alpha.value+" °",20,290-hauteur.value);
tir.fillText("vitesse de lancement "+Vi.value+" cm/s",20,310-hauteur.value);
tir.fillText("distance atteinte "+(compteur)+" cm",260,300);
tir.fillText("distance (cm)",520,285);
tir.fillText("hauteur de réglage "+hauteur.value+" cm",20,10);
tir.fillText("cible à x=400",400,250);
}
function f(x) {
var y=-0.5*9.81*x*x*(1+(Math.tan(2*Math.PI*alpha.value/360))*(Math.tan(2*Math.PI*alpha.value/360)))/(Vi.value*Vi.value)+x*Math.tan(2*Math.PI*alpha.value/360)+hauteur.value*1;
return (y);
}
function start() {
pas=1;
}
function initialisation() {
pas=0;
compteur=0;
}
</script>
</body>
</html>
