![Amazon.co.jp: 詳解 ActionScript 3.0アニメーション ―衝突判定・AI・3DからピクセルシェーダまでFlash上級テクニック: Keith Peters (著), 相川愛三 (翻訳): 本](https://cdn-ak-scissors.b.st-hatena.com/image/square/aa077067f004fbf6481a2f21b97f98cb78a120f7/height=288;version=1;width=512/https%3A%2F%2Fm.media-amazon.com%2Fimages%2FI%2F51EPW3U4xpL._SL500_.jpg)
あるWeb系セミナーイベントのおまけで作ったcanvasを使ったゲームです。 と言っても点数が出るわけでもなく、戦闘機を動かして、クリックしたら弾が出て敵のタコキャラを消していくって一連の流れを追って作っていきましょう。 まずcanvasですが、お決まりのパターンとして憶えておきます。 //HTML内 <canvas id="shootingCanvas" width="1200" height="800"></canvas> 1200pxの横幅、800pxの高さのcanvasタグを書きます。 これをJavaScriptで読みにいきます。 これで、このあとはJavaScriptで変数「ctx」にドットシンタックス(ドット「.」で命令をつないでいく文法、JavaScriptやActionScriptでは定番)で書いていくことになります。 で、四角を描く方法は以下の通りです。(ソースをコピペし
「jcotton」はCanvasベースのjavascript用アニメーションフレームワークです。 オブジェクトを描画して動かしたり、テキストをレンダリングしたりする事が簡単にできるようです。 デモはクリックでボムが爆発するアニメーションが始まります。 デモ これはすごいですね。 チュートリアルも充実しているので、コードの修正も行えそうです。 ソースコードもjQueryと似たコーディングスタイルでした。 tutorialCanvas.add( jcotton.rect(0, 0, 50, 50) .position(125, 125) .animate({xposition: 25}, 1000) ) 気になる動作ブラウザですが、以下のようになっていました。 Firefox 3 – 100% Chrome 5 – 100% Safari 4 – 100% Opera 10 – 文字のレンダリ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く