Rapport d’OCI

Ly Danny 2L, Benabdallah Wa’eel Amine 2G

6 avril 2023

1
Sommaire
1 But 3

2 Réalisation 3

3 Détail du code 3

4 Problèmes rencontrés et résolution de ces problèmes 4

5 Conclusion 5

2
1 But
Notre objectif était de créer un jeu mathématique qui permet
d’apprendre à faire des calculs simples à l’aide du Basketball comme
moyen de vérifier la réponse, cela en faisant rentrer la balle dans
le panier si la réponse est vraie et en dehors si elle est fausse. Tout
cela sera réalisé en Javascript pour le coté codage et en HTML
pour faire le site.

2 Réalisation
Tout d’abord, il faut créer un fichier qui contient le site en HTML
(index.html), un dossier ”js” qui contient un fichier .js, un dossier
”images” qui contient toutes les images utilisées et un dossier ”css”
qui contient un fichier .css. Ces différents fichiers comporteront
le code du site en HTML et en Javascript. Il faut aussi trouver
(en l’occurrence ici, modifier une image trouvée sur internet) des
images permettant de représenter le terrain ainsi que la balle.

Nous avons donc mis les variables en place (les attribuer plutôt)
et avons créé pour le début une fonction nommée ”launch” qui
lance l’animation du lancer de la balle pour vérifier si nos vari-
ables sont bien fonctionnelles.Nous avons ensuite relier le ”but-
ton” créé en HTML à la fonction ,citée juste avant, grâce au
”Document.GetElementByID dans le JavaScript

3 Détail du code
Alors le plus gros du projet se passe dans le .js, notre fonction
”principale” est le ”launch” car c’est elle qui détermine si la balle
part ou ne part pas grâce à la courbe réalisée grâce à une formule
de physique (Balistique MRUA) dont nous vous en parlerons après
car celle-ci nous a causé beaucoup de problème. La deuxième par-
tie de notre projet est le calcul qu’il faut réaliser afin de lancer
l’animation de la manière correcte, il fallait donc faire en sorte
de créer un endroit où on peut marquer des chiffres, un ”in-
put”, et dans le .js nous mettons un document.GetElementByID
pour récupérer la valeur marquée à l’intérieur et si la valeur = le
résultat du calcul alors quand on appuie sur le bouton contenant

3
le ”check” va vérifier, grâce à ”if (x == 4) [ launch()]”,si la valeur
est bel et bien juste et après lancera l’animation correcte si la
valeur était inférieure ”if (x ¡ 4) [ flaunch()]” à la réponse atten-
due alors la courbe de la balle sera plus petite, mais si la valeur
était supérieure ”if (x ¿4) [ glaunch()]” alors la balle ira plus haut
et plus vite.

4 Problèmes rencontrés et résolution de ces problèmes

Un des problèmes rencontrés était d’envoyer la balle dans le panier
tout en suivant une courbe réaliste qui suit une formule en physique
qui est, ”x=1/2a*t²+v0*t + x0”, Ce problème a été résolu grâce
à des formules de base de la balistique et plusieurs essais avec
différentes valeurs (pour les variables) pour arriver à une courbe
”parfaite” qui rentre bien dans le panier ainsi que d’autres valeurs
qui, elles, sont intentionnellement erronées pour faire aller la balle
trop loin ou trop près, cela pour démontrer les erreurs de calculs.

Un autre des problèmes était de placer correctement la surface de

calcul donc le ”input”, venant du HTML, les marges de chaque
côté n’étaient pas correctement alignées et surtout la ”boı̂te de
collision” ou du ”button” était plus grosse que nécessaire ce qui
nous empêchait de mettre des éléments à côté, alors pour régler
ce problème dont nous n’avions pas compris la provenance, nous
avons demandé l’aide de l’enseignant Vincent Guyot. Il a d’abord
cherché d’où venait le problème et nous savions tous les trois que
le problème venait du CSS (feuille de style en cascade) alors nous
avons redécouvert le principe du display-inlineblock qui devait
réorganiser la place que prenait ”l’input” et le ”button”.

Troisième et dernier problème, relier le check button à la vérification

du calcul. On avait pas très bien compris la manière de le faire
alors lors d’une leçon de DO Info, on a pu demander à Monsieur
Joos de bien vouloir nous aider à comprendre comment réaliser
ceci, il nous a alors expliqué que lorsque l’on cliquait sur le bou-
ton donc ”Document.GetElementByID().onclick” on pouvait faire
en sorte qu’il lance la fonction ”verif” qui elle va chercher la
valeur marquée par l’utilisateur et ensuite faire les vérifications

4
nécessaires par exemple le calcul était 2+2 si la valeur n’était pas
4 alors la fonction lançait 2 déplacements différents.

5 Conclusion
Pour conclure, ce projet a été intéressant au point de vue codage
car nous avons découvert un nouveau langage de code et son fonc-
tionnement avec les différentes fonctions a été particulièrement
intéressant. Malgré le temps qu’il nous manquait et les problèmes
rencontrés, nous avons tant bien que mal réussi à faire notre site
et sommes plus ou moins satisfaits du résultat et avons rempli
notre but initial. Nous restons tout de même un peu déçus du
point de vue esthétique mais cela reste satisfaisant.

Nous pensons tout de même que notre projet n’est pas encore très
bien terminé pour cause de manque de temps mais nous sommes
arrivés plus ou moins au bout du projet alors nous sommes assez
fiers de nous car on appris à maı̂triser un nouveau langage de code
et surtout appris à nous servir de nos autres matières pour réaliser
nos projets par exemple la physique pour la balistique.