コードを書いて鍛錬するブログ

読者です 読者をやめる 読者になる 読者になる

コードを書いて鍛錬するブログ

プログラマーとして成長できるようにコードを書いていきます。

【javascript】フルスクラッチで〇〇を動かせ!

二日前までフルスクラッチって何?(・ω・`)
って状態でしたが、フルスクラッチとは既存のプログラムを使わず一から新たに作成することを言うみたいですね。私自身プログラムスキルが半端なので、フルスクラッチで何か作っていこうと思います。そこで、以下のコードを見つけたので、真似て書いてみることにしました。真似て書いてみたというより丸写しです。
jsdo.it

aaa.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ゲーム</title>
  <script type="text/javascript" src="js/aaa.js"></script>
</head>
<style>
* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background: #fdf;
  font: 30px sans-serif;
}
</style>
<body bgcolor="#FFF">
  <canvas id="main_canvas"
          width="640px"
          height="480px">
  </canvas>
</body>
</html>


aaa.js

var canvas = null;
var ctx = null;
var image = null;
var bearX = 0;
var leftFlag = 0;

//初期化
function init(){
  canvas = document.querySelector('#main_canvas');
  ctx = canvas.getContext('2d');
  loadImage(function(){
    //画像読み込み完了後の処理
    update();
  });
}
//画像を読み込む
function loadImage(onComplete){
  image = new Image();
  image.onload = function(){
    onComplete();
  }
  image.src = 'image/obj.png';
}

function update(){
  window.requestAnimationFrame(update);
  if(bearX === canvas.width-100){
    leftFlag = 1;
  }
  if(bearX === 0){
    leftFlag = 0;
  }

  if(leftFlag === 0){
    bearX += 2;
  }else{
    bearX -= 2;
  }
  render();
}
//画面をクリア
function render(){
  //x, y, 幅, 高さ
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  //画像, x, y
  ctx.drawImage(image, bearX, 0);
}
window.addEventListener('load', init);


これで指定した画像が横にアニメーションで動いていきます。
コードを書き写している途中、色々気になるところがあり、例えば image.onload...ええーどういうことだろう(・ω・`)??
ってなったので軽く調べていたら、こんな記事を見つけたので貼っておきます。

img 要素の src 属性と onload イベントリスナの設定タイミング - Please Sleep

src 属性に url を設定した時点で即座に非同期のリクエストが飛ぶ。



src に設定している画像がブラウザキャッシュから読み込まれた場合、おそらく onload イベントの設定より前に画像のロードが終わるので、ハンドラの関数が呼ばれないということが高い確率でおこる。

ふむふむ。なるほどね。なんとなくわかった。非同期ってあたりがまだちょっとわからんが、今後調べていくことにしよう。
とりあえず、image.src より前に image.onload を記述することにします。