JSで小さなボールアニメーションを作る方法

今回はjsで小さなボールアニメーションを作る方法を紹介します。 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; 
}

さらに、2 つの変数を使用して 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 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

JS データ型を変換する方法

JS での暗黙的な型変換の詳細な説明

Angular で $http サービスを使用する方法

以上がJSで小さなボールアニメーションを作る方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。