Comment faire une animation de petite boule en js

Cette fois je vais vous montrer comment réaliser une animation de petite boule avec js. Quelles sont les précautions pour réaliser une animation de petite boule avec js. . Jetons un coup d'oeil.

1. Boule en mouvement

Dans cette section, nous utiliserons p5.js pour créer une petite boule qui se déplace sur l'écran.

L'idée est d'utiliser des variables pour enregistrer la position de la balle, puis de la modifier dans la fonction draw() puisque la fonction draw() continuera à s'exécuter (la fréquence est FPS, par défaut 60 images/). deuxième), donc la balle bouge.

Le code est le suivant :

var x=0; 
 
function setup() {  
 createCanvas(400, 400); 
}  
 
function draw() {  
 background(220); 
 //width和height是关键词，分别是Canvas的宽和高 
 x+=2; 
 ellipse(x,height/2,20,20); 
}

2. La balle qui rebondit

Après un certain temps, la balle sortira de l'écran. Afin d'éviter que la balle ne sorte de l'écran, nous ajoutons une variable pour contrôler la vitesse et inverser la vitesse lorsque la balle quitte l'écran.

Le code est le suivant :

var x=0; 
var speed=2; 
 
function setup() {  
 createCanvas(400, 400); 
}  
 
function draw() {  
 background(220); 
 ellipse(x,height/2,20,20); 
 //width和height是关键词，分别是Canvas的宽和高 
 x+=speed; 
 if(x>width||x<0){ 
 speed*=-1; 
}

De plus, nous pouvons utiliser deux variables pour contrôler la vitesse dans les directions x et y afin de réaliser la fonction d'éjection de la balle sur la toile.

Le code est le suivant :

var x=200; 
var y=200; 
var Vx=2; 
var Vy=3; 
 
function setup() {  
 createCanvas(400, 400); 
}  
 
function draw() {  
 background(220); 
 ellipse(x,y,20,20);//width和height是关键词，分别是Canvas的宽和高 
 x+=Vx; 
 y+=Vy; 
  if(x>width||x<0){ 
    Vx*=-1; 
 } 
 if(y>height||y<0){ 
    Vy*=-1; 
 } 
}

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le. Site Web chinois PHP !

Lecture recommandée :

Comment convertir les types de données JS

Explication détaillée de la conversion de type implicite en JS

Comment utiliser le service $http en angulaire

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!