Demoこつこつ作っていたゲームもどきがようやく動くようになってきました。
今回のデモは画面に表示されたキャラクタ画像が左から右へ移動して端っこまで来るとまた左から右への繰り返しです。
ブラウザで全体のソースを見た人は分かりますが結構ゴタゴタしています、んがっ！今回はそんなことはどうでもいいことなので置いておいて、肝心要の呼び出し部分のソースだけ載せます。
まず、ウィンドウがロードされると、imgsという名前のimgLoader関数が作られます。
この関数は以前から作っていた画像ローダで、iload関数の引数に渡された配列のアドレス・・・ややこしいですね。とにかく画像のアドレスを読み込んでキャンバスに表示できるようにしてくれます。
また、ロードの部分はウィンドウのロード前でもいいかもしれません。
次に、gameという名前のGE関数が作られます。
この部分がいろいろなゲームの部品を格納してくれます。
game.canvasの部分は引数で渡されたcanvasタグを格納します。今回は以前作ったjQueryのような働きをするプログラムで渡しているのでkoonz()のようになっていますが、対象がcanvasならどんな渡し方をしても大丈夫です。
つぎにhiroという名前のキャラクタを作っています。（キャラクタとは限らないのでイメージ系の名前に変えようかと思います。）
そしてhiro.srcに先にローダで作った画像を渡しています。（ローダではthis.imgという配列の画像のアドレス名でイメージオブジェクトが格納される）
次のhiro.xとyは最初に表示される位置を意味しています。
hiroから始まる項目最後のコントロール関数は、画像が画面に表示される直前に実行されます。（このコントロール関数を共通の関数として全てのキャラクタや文字などに持たせて移動を制御するようにします。）
つぎに、hiroの前に作って置いたgame関数が登場します。
このenter関数はここに入れられたキャラクタをgameが持つ配列に格納します。（後々はレイヤーごとに格納できるように配列を入れられるようにしたいです。）
最後にstart関数でenterによって作られた配列の中身を画面に描写していきます。
window.onload = function(){
imgs = new imgLoader();
imgs.iload(['http://blog-imgs-44.fc2.com/k/o/o/koonz/kyara1.png']);
game= new GE();
game.canvas(koonz('canvas')[0]);
var hiro = new Character();
hiro.src = imgs.img['http://blog-imgs-44.fc2.com/k/o/o/koonz/kyara1.png'];
hiro.x = 20;
hiro.y = 100;
hiro.control = function(){
hiro.x += 5;
if(hiro.x>game.cnvs.width){
hiro.x = 0;
};
};
game.enter(hiro);
game.start();
};