ゆっくりJavaScript - まとめ。

まとめです。
やったことは

・HTMLを使って画像を表示
・表示した画像を動かす
・キーボード操作で表示した画像をコントロールする。

この３点です。

画像を表示するのに使ったのはCanvas。動かてキーボードの操作でコントロールしたのはJavaScritということになります。

Canvasで表示て動かす方法としてはCSSを使う方法。

ここでは絵文字を使っていますが、文字の代わりに画像を読み込み使うこともできます。

【JavaScript】Webページに画像を表示する

表示させたらあとはJavaScriptで動かします。

setInterval("loop()", 16);

関数"loop()"を16mm秒(1分間に約60回:60FPS)ごとに実行するということで動きを出します。

今回はこのloop()の中に2つの関数を動かしています。

function loop() {
  update();
  draw();
}

update()は更新するタイミングでやりたいことを draw()は表示に関係する命令をまとめて書いています。

あとはキーボード操作ですが

document.onkeydown = keyDown;

とCanvasでキーを押した時に関数 keyDownを実行するようの設定しています。

関数 keyDownは別で定義します。

function keyDown(){
  ySpeed = -25;
  acceleration = 1.5; 
}

これでキーが押された場合に変数ySpeed,accelerationの値が変えられます。
この変わった値が1分60回更新している関数update()の中で使われるのでキーを押したタイミングでジャンプしたように見えます。

このままでは座標が変わり続けるのでif関数で制限しています。この場合では上がって下がって同じ場所に戻ってくるので、同じ座標に来たところで変数の値を"0"にして止めています。

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

青丸画像は

bx = bx - speed;

のみの命令なので同じ速さで一方向に進みます。