JS에서 작은 공 애니메이션을 만드는 방법

이번에는 js로 작은 공animation을 만드는 방법을 보여드리겠습니다. js로 작은 공 애니메이션을 만들 때 주의사항은 무엇인가요?

1. 움직이는 공

이 섹션에서는 p5.js를 사용하여 화면에서 움직이는 작은 공을 만들어 보겠습니다.

변수를 사용하여 공의 위치를 ​​기록한 다음 draw() 함수에서 이를 변경하는 것입니다. draw() 함수는 계속 실행되므로(주파수는 FPS, 기본값은 60프레임/초) 볼의 의지 무브먼트를 제작하였습니다.

코드는 다음과 같습니다:

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

2. 튀는 공

일정 시간이 지나면 공이 화면 밖으로 나옵니다. 공이 화면 밖으로 나가는 것을 방지하기 위해 공이 화면을 떠날 때 속도를 제어하고 속도를 반전시키는 변수를 추가합니다.

코드는 다음과 같습니다:

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; 
}

또한 두 개의 변수를 사용하여 x 및 y 방향의 속도를 제어하여 캔버스에서 공이 배출되는 기능을 구현할 수 있습니다.

코드는 다음과 같습니다.

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; 
 } 
}

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

JS 데이터 유형을 변환하는 방법

JS의 암시적 유형 변환에 대한 자세한 설명

Angular에서 $http 서비스를 사용하는 방법

위 내용은 JS에서 작은 공 애니메이션을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!