Déplacement automatique d'une boule sur un billard

Le canevas (le billard)

La boule se déplace sur le billard ; la boule a une ombre.

Le code de la page

... <canvas width ="300" height ="150" style ="width :80% ; height : auto ; background : lime ; border : 5px solid maroon; box-shadow : 5px 5px 5px grey;" > </canvas> ... <script> // canevas référence la balise canvas var X =canevas.width; var Y =canevas.height; contexte.shadowColor = 'grey'; contexte.shadowOffsetX = 3 ; contexte.shadowOffsetY = 3 ; contexte.shadowBlur = 3 ; var rayon =6; var x = X/2; var y = Y/2; // coordonnées initiales de la boule de billard var sensX = 3; var sensY = 3; contexte.fillStyle ='red'; setInterval(animate,50); // toutes les 50 millisecondes ou 20 fois par seconde (1000/50) function animate() { contexte.clearRect(0, 0, X, Y); contexte.beginPath(); contexte.arc(x, y,rayon, 0, Math.PI*2); contexte.fill(); if(x > X-rayon || x <= rayon)//Si boule touche le bord gauche ou droit alors sensX change de signe { sensX =sensX * -1 ; } if(y >= Y-rayon || y <= rayon)//Si boule touche le bord haut ou bas alors sensY change de signe { sensY =sensY * -1 ; } x = x + sensX ; y = y + sensY ; // nouvelles coordonnées de la boule } // fin fonction animate ...

HTML & CSS

CANVAS est une balise HTML qui peut être stylée avec CSS (couleur de fond, bordure, ombrage, etc.)
Zone de dessin adaptative : 80% de la largeur du conteneur parent.
Pour le script les dimensions du canevas seront 300 par 150 (valeurs des attributs width / height).

Le script

La fonction animate est appelée toutes les 50 millisecondes donc 20 fois par seconde (1000/50).
Retour menu