Ce tp reprendra le mise en place de la POO vue avec la carte de voeux o\u00f9 l’on faisait tomber de la neige sur Lille.
On va adapter quelque peu notre pr\u00e9c\u00e9dente cr\u00e9ation pour d\u00e9placer horizontalement des v\u00e9hicules sur une route \u00e0 4 voies.
Puis on ajoutera une grenouille que l’on pourra d\u00e9placer en \u00e9vitant les v\u00e9hicules.
Objectifs : continuer \u00e0 travailler la POO, la gestion d’\u00e9v\u00e9nements, la gestion d’interaction entre diff\u00e9rents objets.<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"fr\" >\n\n<head>\n <meta charset=\"UTF-8\">\n <title>Frog<\/title>\n<link rel=\"stylesheet\" href=\"style.css\">\n<link href=\"https:\/\/fonts.googleapis.com\/css?family=Amatic+SC|Titillium+Web:300,700\" rel=\"stylesheet\">\n<\/head>\n<body >\n <div id=\"conteneur\">\n <header>\n Vous \u00eates une grenouille, \u00e0 vous de traverser la route.\n <\/header>\n \n <article>\n <div>\n <canvas id=\"mon_canvas\"><\/canvas>\n <\/div>\n <\/article>\n<footer>SNT, Lyc\u00e9e Faidherbe 2020<\/footer>\n<\/div>\n<\/body>\n<script src=\"script.js\"><\/script>\n\n<\/html>\n<\/code><\/pre>\n\n\n\nb) Le CSS<\/h4>\n\n\n\n
Peu de modification ici, si ce n’est l’image de fond:<\/p>\n\n\n\n
fond<\/a>T\u00e9l\u00e9charger<\/a><\/div>\n\n\n\n\n@media all and (min-width: 600px) {\n body{\n \n\n }\n#mon_canvas {\n background-image: url(\"images\/fond.png\");\n background-position: center top; \/* On centre l'image *\/\n background-repeat: no-repeat; \/* on ne la r\u00e9p\u00e8te pas *\/\n background-size: cover; \/* l'image recouvre l'\u00e9l\u00e9ment *\/\n height: 600px; \/* on fixe les dimensions du canvas *\/\n width: 900px;\n}\n \n #conteneur{\n margin-left: 20px;\n width : 1000px;\n }\nheader,footer {\n font-family: 'Amatic SC', cursive;\n border-width:1px;\n border-style: outset;\n border-color: #000;\n margin-top: 15px;\n margin-bottom: 15px;\n font-size: 30px;\n padding-left: 50px;\n color: black;\n\n}\n\narticle{\nfont-family: 'Titillium Web', sans-serif;\n display: flex;\n flex-direction: row;\n justify-content: space-around;\n border-width:1px;\n border-style: outset;\n border-color: #000;\n margin-top: 15px;\n margin-bottom: 15px;\n}\narticle h1{\n font-size: 20px;\n font-weight: bold;\n text-decoration: underline;\n}\n}\n\n@media all and (max-width: 600px) {\n\n #mon_canvas {\n background-image: url(\"images\/fond.png\");\n background-position: center top; \/* On centre l'image *\/\n background-repeat: no-repeat; \/* on ne la r\u00e9p\u00e8te pas *\/\n background-size: cover; \/* l'image recouvre l'\u00e9l\u00e9ment *\/\n height: 300px; \/* on fixe les dimensions du canvas *\/\n width: 450px;\n}\n \n#conteneur{\n width : 95%;\n position : center;\n }\nheader,footer {\n font-family: 'Amatic SC', cursive;\n border-width:1px;\n border-style: outset;\n border-color: #000;\n margin-top: 15px;\n margin-bottom: 15px;\n font-size: 30px;\n padding-left: 50px;\n color: black;\n\n}\nheader {\n height: 100px;\n\n }\n\n\narticle{\n font-family: 'Titillium Web', sans-serif;\n display: flex;\n flex-direction: column;\n align-items: center;\n \n border-width:1px;\n border-style: outset;\n border-color: #000;\n margin-top: 15px;\n margin-bottom: 15px;\n}\narticle h1{\n font-size: 20px;\n font-weight: bold;\n text-decoration: underline;\n}\nimg {\n width: 80%;\n position: center;\n }\n\n\n}<\/code><\/pre>\n\n\n\nc) Le js<\/h4>\n\n\n\n
On a apport\u00e9 davantage de modifications :
– d\u00e9placement horizontal et plus vertical comme avec les flocons,
– positionnement vertical d\u00e9fini en fonction du type de v\u00e9hicules,
– un gestion de la position des v\u00e9hicules les uns en fonction des autres.<\/p>\n\n\n\n
\/\/ on d\u00e9clare un \u00e9l\u00e9ment canvas qui correspond \u00e0 l'\u00e9l\u00e9ment dont l'id est tutoriel\n var canvas = document.getElementById(\"mon_canvas\");\n \/\/ on d\u00e9clare notre feuille de dessin ctx qui sera une version 2D du canvas\n ctx = canvas.getContext(\"2d\");\n \/\/ On d\u00e9clare une liste d'objets appel\u00e9 vehicules\n var vehicules=[];\n \/\/ on cr\u00e9e 10 vehiculess\non_met_en_place_les_vehicules(20)\n\n \n\n \/\/ on d\u00e9finit le constructeur et les propri\u00e9t\u00e9s et m\u00e9thodes associ\u00e9es\n function Vehicule(x,y,type,sens) {\n \/\/ un vehicule est d\u00e9fini par 4 propri\u00e9t\u00e9s\n \/\/ position : x et y\n \/\/ type\n \/\/ 0 : camion, 1 : voiture, 2 : moto\n \/\/ sens : 1 : se d\u00e9place de la gauche vers la droite\n \/\/ -1 : se d\u00e9place de la droite vers la gauche\n this.x=x;\n this.y=y;\n this.type=type;\n this.sens=sens;\n \/\/ on cr\u00e9e 2 m\u00e9thodes\n \/\/ la m\u00e9thode deplacement en fonction du type de vehicules : 0 gros, 1 moyens, 2 petits\n this.deplacement=function(){\n switch (this.type) {\n \/\/ cas 0 : camion\n case 0:\n vitesse=0.3*this.sens;\n break;\n \/\/ cas 1 : voiture\n case 1:\n vitesse=0.6*this.sens;\n break;\n \/\/ cas 2 : moto\n case 2:\n vitesse=0.8*this.sens;\n break;\n }\n this.x=this.x+vitesse;\n \/\/ si le vehicule sort \u00e0 droite on le renvoie \u00e0 gauche\n if ((this.x>canvas.width) && (sens==1))\n {this.x=position_vehicule_plus_a_gauche();}\n \/\/ si le vehicule sort \u00e0 gauche on le renvoie \u00e0 droite\n if ((this.x<0) && (sens==-1))\n {this.x=position_vehicule_plus_a_droite();}\n }\n \/\/ la m\u00e9thode dessiner en fonction du type\n this.dessiner=function(){\n\n var taille;\n var transparences;\n switch (this.type) {\n \/\/ cas 0 : on dessine un cercle non rempli\n case 0:\n hauteur=canvas.height\/12;\n largeur=canvas.width\/10;\n couleur='rgb(150,100,100)';\n break;\n \/\/ cas 1 : on dessine un cercle colori\u00e9 en noir\n case 1:\n hauteur=canvas.height\/12;\n largeur=canvas.width\/20;\n couleur='rgb(100,150,100)';\n break;\n \/\/ cas 2 : un demi-cercle vers le bas\n case 2:\n hauteur=canvas.height\/12;\n largeur=canvas.width\/25;\n couleur='rgb(100,100,150)';\n \n break;\n }\n \n \n ctx.beginPath();\n ctx.rect(this.x-largeur\/2,this.y-hauteur\/2,largeur,hauteur);\n ctx.fillStyle = couleur;\n ctx.fill();\n ctx.stokeStyle = \"rgb(255,255,255)\";\n ctx.stroke();\n ctx.closePath();\n }\n\n\/\/ fin du constructeur\n}\n\n\/\/ fonction qui permet de cr\u00e9er les v\u00e9hicules avec des propri\u00e9t\u00e9s al\u00e9atoires\nfunction on_met_en_place_les_vehicules(n){\n var nbe_aleatoire;\n \n var type;\n \n for (i=0;i<n;i++){\n nbe_aleatoire=Math.random();\n if (nbe_aleatoire<0.4){type=0;}\n if (nbe_aleatoire>=0.4 && nbe_aleatoire<0.8){type=1;}\n if (nbe_aleatoire>=0.8){type=2;}\n \/\/ on d\u00e9termine al\u00e9atoire le sens de d\u00e9placement\n nbe_aleatoire=Math.random();\nif (nbe_aleatoire<0.5){\n sens=1;\n} \nelse\n {sens=-1;}\n \/\/alert(nbe_aleatoire+\" \"+i+\" sens \"+sens+\" type \"+type);\n \n \/\/ on positionne les v\u00e9hicules en fonction de leur sens\n \/\/ de d\u00e9placement et de leur type\nif (sens==1){\n x=position_vehicule_plus_a_gauche();\n if (type==0) {\n \n y=canvas.height*9\/12;\n }\n if (type==1) {\n y=canvas.height*7\/12;\n }\n if (type==2) {\n y=canvas.height*7\/12;\n } \n}\nelse {\n x=position_vehicule_plus_a_droite();\n if (type==0) {\n y=canvas.height*3\/12;\n }\n if (type==1) {\n y=canvas.height*5\/12;\n }\n if (type==2) {\n y=canvas.height*5\/12;\n } \n}\n \n vehicules[vehicules.length]= new Vehicule(x,y,type,sens);\n distance_securite+=20;\n \n }\n \n}\n\nfunction position_vehicule_plus_a_gauche(){\n distance_securite=50;\n min=0;\n for (var i=0;i<vehicules.length;i++){\n if (vehicules[i].x<min){\n min=vehicules[i].x\n }\n }\n return min-distance_securite;\n}\nfunction position_vehicule_plus_a_droite(){\n distance_securite=50;\n max=canvas.width;\n for (var i=0;i<vehicules.length;i++){\n if (vehicules[i].x>max){\n max=vehicules[i].x\n }\n }\n return max+distance_securite;\n}\n\nfunction dessiner_la_jeu(){\n \n \/\/ on efface avec un fond noir\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n for (var i=0;i<vehicules.length;i++){\n \n vehicules[i].dessiner();\n vehicules[i].deplacement();\n }\n window.requestAnimationFrame(dessiner_la_jeu);\n }<\/code><\/pre>\n\n\n\n2. La mise en place d’une grenouille et la gestion d’\u00e9v\u00e9nements au clavier.<\/h3>\n\n\n\na) D\u00e9finir les propri\u00e9t\u00e9s et m\u00e9thodes qui seront associ\u00e9es \u00e0 notre ( ou nos ) grenouille(s).<\/h3>\n\n\n\n
Mettre en place, en vous inspirant de la classe Vehicule, une classe Grenouille.
D\u00e9finir les propri\u00e9t\u00e9s qui seront n\u00e9cessaires ainsi que les m\u00e9thodes ( on peut s’inspirer, l\u00e0 encore de la classe Vehicule )..
On pourra penser \u00e0 un nombre de vies d\u00e9termin\u00e9.
On n’oubliera pas de demander \u00e0 afficher notre grenouille dans la fonction dessiner_la_jeu().<\/p>\n\n\n\n
b) Attacher des \u00e9v\u00e9nements \u00e0 certaines touches du clavier.<\/h3>\n\n\n\n
Pour g\u00e9rer les \u00e9v\u00e9nements li\u00e9s au clavier, on va utiliser un appel fl\u00e9ch\u00e9 \u00e0 une fonction anonyme.
Ins\u00e9rer dans le js, avant la d\u00e9claration des classes et des fonctions, le code suivant :<\/p>\n\n\n\n
document.addEventListener('keydown', (event) => {\n const nomTouche = event.key;\n alert(nomTouche);\n}, false);<\/code><\/pre>\n\n\n\nTester ce code, et le modifier pour g\u00e9rer les d\u00e9placements de votre grenouille.<\/p>\n\n\n\n
c) G\u00e9rer les collisions.<\/h3>\n\n\n\n
Le plus simple pour g\u00e9rer la collision est de g\u00e9rer ce cas lors du d\u00e9placement des v\u00e9hicules.
A vous de jouer avant de pouvoir jouer.<\/p>\n\n\n\n
d) Pour aller plus loin.<\/h3>\n\n\n\n- modifier les formes tr\u00e8s simples associ\u00e9es \u00e0 nos objets ( on peut remplacer nos dessins dans le canvas par des images ),<\/li>
- penser \u00e0 une autre gestion des \u00e9v\u00e9nements pour une version pour un t\u00e9l\u00e9phone portable ( pas d’acc\u00e8s au clavier),<\/li>
- \u00e0 un placement al\u00e9atoire de la grenouille,<\/li>
- \u00e0 un jeu avec plusieurs grenouilles….<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"
1. Objectifs Ce tp reprendra le mise en place de la POO vue avec la…<\/p>\n
![fond<\/a>](\"https:\/\/labodemaths.fr\/WordPress3\/wp-content\/uploads\/2020\/01\/fond.png\"){kind=link}