ゆっくりJavaScript - 画像を動かす。

画像が動くということはどういうことかというと、今ある場所から違う場所へ移動する。連続的に画像の場所が変わるということです。JavaScriptでいうと、画像は座標(x,y)で決まっています。xが横、yが縦方向です。この指定されているものを変化させることで場所が変わります。

実際に動かしてみましょう。

表示させるためのdraw関数は以下となっています。

function draw(){
  ctx.drawImage(bluRect,50,50);
  ctx.drawImage(yelRect,100,50);
}

ctx.drawImage(画像,x座標,y座標);

ということになっています。画像を動かすということは、この画像の位置を決めているx座標,y座標の数字を動かしたい位置の座標に変えてやれば良さそうですね。

この数字を変更するときに便利なものが変数です。

bluRectの座標(x,y)を(bx,by)と定義します。

let bx = 50;
let by = 50;

yelRectも同じように

let yx = 100;
let yy = 50;

draw関数は

function draw(){
  ctx.drawImage(bluRect,bx,by);
  ctx.drawImage(yelRect,yx,yy);
}

となります。試しに変数bxの数字を50から150に変えて実行するとx方向(右方向)にずれることが確認できます。

これを連続してやると動いているように見えるということです。

update関数を作っていきます。

function update(){
  bx = bx + 2;
  draw()  
  }

そして

setInterval("update()", 16);

setInterval()l関数を使います。16ミリ秒ごとにupdate()関数を実行します。16ミリ秒ごとに実行すると60FPSとなります。

6. 映像の解像度・フレームレート・色情報・情報量・帯域幅 | 高精細画像を光技術でつなぐ光パスコミュニケーションズ

setInterval()の使い方などは以下参考になると思います。

JavaScriptのタイマー処理　setIntervalとsetTimeout - Qiita

これを実行すると

続けて画像が表示続けられるので繋がって表示されます。これを丸が移動しているようにするには前の画像を消してやります。

Canvasの機能を使えば

ctx.clearRect(0, 0, canvas.width, canvas.height);

とすればうまくいきます。

今回は黒背景の上でやっているので

 ctx.fillStyle = "brack";
 ctx.fillRect(0, 0, 500, 500);

と再描画させて前の画像は消して新しく書き直すことで画像が動いているように見えます。

これまでの全コードです。

const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");

ctx.fillStyle = "black";
ctx.fillRect(0, 0, 400, 400);

const bluRect = new Image()
bluRect.src = "bul.png"
const yelRect = new Image()
yelRect.src = "yel.png"

setInterval("update()", 16);

let bx  = 50;
let by = 50;
let yx = 100;
let yy = 50;

function draw(){
  ctx.fillStyle = "black";
  ctx.fillRect(0, 0, 500, 500);

  ctx.drawImage(bluRect,bx,by);
  ctx.drawImage(yelRect,yx,yy);
}


function update(){
  bx = bx + 1;
  draw()
  
  }