私が先週学んだこと:Vanillajsを使っているバウンスオブジェクトを作る方法

パート2へようこそ!あなたが思い出すかもしれないように、私ははらはらした鳥のクローンをつくっています、そして、私はプレーヤーがspacebar . これは私のプログラムの中で私は物理モデルを必要とすることを意味!

コード今まで

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const x = canvas.width / 2;
const y = canvas.height / 2;

Class Player {
  constructor(x, y, radius, color) { 
        this.x = x
        this.y = y
        this.radius = radius 
        this.color = color 
  }

  draw() {
        ctx.beginPath()
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
        ctx.fillStyle = this.color
        ctx.fill()
  }

}

const player = new Player(100, 100, 30, 'blue');

ブラウザのプレーヤー

私が最初にしたことは、重力、速度、リフトプロパティを私のコンストラクタに追加することですPlayer クラス.私がこれらの特性を加えている理由は、私が私が欲しいからですplayer object 彼らが現実の世界でそうするように、物理に影響されてください.

Class Player {
  constructor(x, y, radius, color, gravity, velocity, lift) { 
        this.x = x;
        this.y = y;
        this.radius = radius; 
        this.color = color; 
        this.gravity = gravity;
        this.velocity = velocity;
        this.lift - lift;
  }

物理再開発
Gravity , また、重力では、すべての物質の間に作用するアトラクションの普遍的な力です.

Velocity [距離] 1つの方向に単位時間あたりの旅です.

Lift 固体のオブジェクトによって、ガスの動く流れが回転するとき、起こります.ニュートンの行動と反応の第3法則に従って、流れは一方向に向きます、そして、リフトは反対方向で起こります.空気は気体であり分子は自由に動くので、どんな固体表面も流れを偏向させることができる.航空機の翼では、上下面の両方が旋回旋回に寄与する.流れを変える際に上面の部分を無視することは、リフトの誤った理論につながります.

次に、私はup ユーザが押すたびに実行されるクラスメソッドspacebar . “バウンス”効果を作成するにはplayer s速度プラスリフトとそれを保存this.lift .

  up() {
    this.velocity = this.velocity + this.lift;
  }

次に、クラスメソッドを作りました.update . これは私が比較するところですPlayer 私は実際に画面上のプロパティを操作しているプロパティ対

update() {
   // Update the state of the world for the elapsed time since last render
}

アニメーションループ内の各フレームについてはvelocity of player to this.gravity とy座標this.velocity .

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const x = canvas.width / 2;
const y = canvas.height / 2;

Class Player {
  constructor(x, y, radius, color, gravity, velocity, lift) { 
        this.x = x;
        this.y = y;
        this.radius = radius; 
        this.color = color; 
        this.gravity = gravity;
        this.velocity = velocity;
        this.lift = lift;
  }

  draw() {
        ctx.beginPath()
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
        ctx.fillStyle = this.color
        ctx.fill()
  }

  update() {
        this.velocity += this.gravity;
        this.y += this.velocity; 
  }

}

const player = new Player(100, 100, 30, 'blue', 0.6, 0, -15);

次に、関数を作成しましたanimate のループの原因はplayer オブジェクト.どうやってやるの?

function animate() {

}

インサイドanimate 私は、使用しているrequestAnimationFrame アニメーションを実行したいブラウザに指示し、ブラウザーが指定した関数を呼び出して、次のリペイントの前にアニメーションを更新するよう要求します.このメソッドは、repaintの前に呼び出される引数としてコールバックをとります.

function animate() {  
  requestAnimationFrame();
}

上の例では、何を渡す必要がありますかrequestAnimationFrame 私が移動するオブジェクトを作成したいならば?

function animate() {  
  requestAnimationFrame(animate);
}

関数をインスタンス化するときanimate ループ効果が作成されます.

function animate() {  
  requestAnimationFrame(animate);
}

animate();

最後に、私はEventListener ユーザーがコントロールできるようにplayer 押すとspacebar . 私が通る最初の引数はkeyup . 番目の引数はクラスメソッドを実行するコールバック関数ですup 毎回ユーザープレスspacebar

addEventListener('keyup', event => {
    if (event.code === 'Space') {
      player.up();
    }

})

Voila!

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const x = canvas.width / 2;
const y = canvas.height / 2;

Class Player {
  constructor(x, y, radius, color, gravity, velocity, lift) { 
        this.x = x;
        this.y = y;
        this.radius = radius; 
        this.color = color; 
        this.gravity = gravity;
        this.velocity = velocity;
        this.lift = lift;

  }
  draw() {
        ctx.beginPath()
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
        ctx.fillStyle = this.color
        ctx.fill()
  }
  up() {
    this.velocity += this.lift;
    console.log(this.velocity); 
  }
  update() {
        this.velocity += this.gravity;
        this.y += this.velocity; 
  }
}

const player = new Player(100, 100, 30, 'blue', 0.6, 0, -15);

function animate() {  
  requestAnimationFrame(animate);
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  player.draw();
  player.update();
}

animate();

addEventListener('keyup', event => {
    if (event.code === 'Space') {
      console.log('Space pressed');
      player.up();
    }

})

あなたが沿って続いているならば、あなたは類似したアニメーションで下の青い物のような何かを見なければなりません.


フィン