ゆっくりJavaScript - 画像を制御する。

画像がうまく動くようになりました。今度は動くスピード、止まるタイミングなどを自分の思うまま動くようにしていきます。

まずスピードをコントロールするための変数を作ります。

const speed = 2

として +1 としていたところを + speedに変更します。

function update(){

  bx = bx + speed;

  draw()
 
  }

これでspeedの数字を変えるだけでスピードが変わります。例えばspeedの数字を4にしてやれば2倍早くなります。

次にキーボードを押すことで操作する方法をやっていきます。

document.onkeydown = keyDown;

function keyDown(){
  ySpeed = -25;
  acceleration = 1.5;
  console.log("押した！")；
}

キーボードを押した時に

ySpeed = -25;
acceleration = 1.5;
console.log("押した！")；

console.log("押した")；を入れてキーボードが押されていることを確認してみます。これで実行して何かのキー、例えばspaceを押せば"押した！"と表示されます。

あとはupdate関数の中に初期の動作

function update(){

//オレンジ色の画像
  ySpeed = ySpeed + acceleration;
  yy = yy + ySpeed;
 　　 if (yy > 400){
  　　  yy = 400;
  　　  ySpeed = 0;
 　　   acceleration = 0;
  　　　}
  

// 青色の画像
  bx = bx - speed;
　　  if (bx < 20){
 　　   speed = 0;
    　　bx = 10;
  　　}

  }

青色の画像

bx = bx - speed;

元の座標からスピード分を引き算すると、x軸方向に左から右へ進みます。

ここでは端っこで止まるように

if (bx < 20){
　　 speed = 0;      // 動く力を"0"にしています。
　　  bx = 10;　　// 座標を指定しています。
}

と制限しています。

そしてオレンジ丸の画像ですが

ySpeed = ySpeed + acceleration;
yy = yy + ySpeed;

としてySpeedに対してaccelerationの作用をフレームごとに反映させるかたちになっています。最初が"-25"スタートですが"1.5"づつ加算していくので最終的には"+25"に向かっていきます。

"-"であったものが"+"に変化しています。この操作でジャンプしているように見えるようになります。要するにこれはy方向、上向の操作としているので上へ向かうが反転して下へ下がるということになります。

あとはこれも何もしなければずっと下方向へ進んでしまうので座標が400を超える場合はストップするように命令を付け加えています。

if (yy > 400){
　　 yy = 400;
　　 ySpeed = 0;
　　 acceleration = 0;
}

起動またはリロードで始まり、何かキーを触ればジャンプします。