HTML5のCanvasを駆使してテトリス作ってみた
http://pluswing.net/html5/canvas.html
ということで、テトリスを実装してみた。
テトリス自体(tetris.js)は小一時間でてきとーに実装したので、
ブロックの回転とかが微妙な感じ。
※FirefoxはCanvasがもっさりしてるので、Chromeでプレイすることをオススメします。
それは置いておいて、なんでHTML5のCanvasを使おうかと思ったのかというと、
ChromeのCanvasが恐ろしく速いという事実。*1
これは、ゲームが作れるぞ！という興奮から。
(僕がゲームを作ってたのは7年ほど前になるけど、
その頃のそこらにあるマシン並に速度出てそうな勢い。Chromeは。)
実はテトリスは副産物で、
Canvasを使うにあたり、ライブラリが無いとねー
ということで、描画周りのライブラリをひととおり作りました。
一個くらい作ってみないとライブラリの使い勝手がわからんかったので、
簡単なテトリスを。という感じ。
この程度のゲームなら、さくっといけます。
主な機能は
- シーン管理
- レイヤー
- スプライト(アニメーション)
- FPSタイマ
FPSタイマーはframe dropにも対応してたりします。
荒削りだけど、とりあえず公開してみます。
※DXLはなんかテキトーにつけたんだけど、まぁいいやってことで変えてません。
なんかの略とかでは無いです。特に。
簡単な使い方は、canvas.htmlを見てもらえばなんとなくわかるかなー（わかって欲しいｗｗ）
面倒だけどざっと書いてみる
○概要
DXL
↓
シーン（複数。一度に描画されるのは1つのシーンのみ。DXL.changeScene(key)で変更できる）
↓
レイヤー（シーンに対して複数、非表示でないレイヤー全てが描画対象）
↓
スプライト（レイヤーに対して複数、非表示でないスプライト全てが描画対象）
?とりあえず、コンテキストを取ります。
この辺はそこらの情報をパチっただけ。
var canvas = document.getElementById('canvassample');
if ( ! canvas || ! canvas.getContext ) { return false; }
var ctx = canvas.getContext('2d');
?DXLのインスタンスを作ります。
引数にコンテキストを渡します。
var dxl = new DXL(ctx);
?シーンを作ります。
引数はキーです。何でも構いません。getScene(key)で該当のシーンを取得できるので、それっぽいのをつけておくと良いです。
※create*メソッドは同じ理由で大体キーを引数に取ります。
var scene = dxl.createScene("main");
?次に使用する画像を読み込みます。
loadメソッドの最初の引数はキーです。次の引数はファイル名です。
同じ画像を複数のシーンにまたがって使う場合は、それぞれのシーンで読み込んでください。
var loader = scene.getImageLoader();
loader.load("bg", "bg.jpg");
loader.load("blocks", "blocks.jpg");
?レイヤーを作ります。
var layer = scene.createLayer("hoge");
?次にキャラを設定します。
キャラとは、描画する画像の事で、アニメーションの定義もここでします。
DXLRectクラスは矩形を管理するクラスです。引数はx座標、y座標、幅、高さの順です。
buildVerticalは縦に並んだ画像を指定の矩形ごとに切り取りそれをアニメーション化します。
var cb = dxl.getCharaBuilder();
var rect = new DXLRect(0, 0, 30, 30);
cb.buildVertical(1, "blocks", rect, 1, new Array(0));
例えば、
こんな画像が一枚あって、アニメーションするキャラを作るときは
loader.load("hoge", "hoge.jpg");
var rect = new DXLRect(0, 0, 24, 24);
cb.buildVertical("hogehoge", "hoge", rect, 4, new Array(5, 5, 5, 5));
とします。
これで、赤、緑、青、紫の順に変わるキャラが定義出きます。
最後のArrayは次の画像に切り替わるまでの描画フレーム数です。
この場合は、赤から緑に5フレームで切り替わる・・・と全て5フレームづつで切り替わります。
?次にスプライトを作成します。
createSprite()を呼び出すと、自動的に描画配列に追加され、
hide()メソッドを呼び出さない限り、画面に描画されます。
var sprite = layer.createSprite("block1", 1);
レイヤー、スプライトに共通してあるメソッドは以下です。
xxx.hide
レイヤー/スプライトを非表示にします。
xxx.show
レイヤー/スプライトを表示します。
xxx.setZIndex(index);
Zインデックスを指定します。index値が大きいものが背面に描画されます。
xxx.setAlpha(alpha);
アルファ値を指定します。
スプライトクラスのメソッドは以下です。
sprite.size
スプライトのサイズを設定します。キャラ本来の大きさと違う場合は自動的に拡大縮小されます。
sprite.position
スプライトの表示位置を変更します。
sprite.move
スプライトを指定した分移動します。
sprite.changeChara
キャラを変更します。
