canvasアニメーションでゲーム制作-1

2010年4月20日 22:56

スクリーンショット(2010-04-20 22.54.20).png

あるWeb系セミナーイベントのおまけで作ったcanvasを使ったゲームです。
と言っても点数が出るわけでもなく、戦闘機を動かして、クリックしたら弾が出て敵のタコキャラを消していくって一連の流れを追って作っていきましょう。

まずcanvasですが、お決まりのパターンとして憶えておきます。
1200pxの横幅、800pxの高さのcanvasタグを書きます。
これをJavaScriptで読みにいきます。
これで、このあとはJavaScriptで変数「ctx」にドットシンタックス(ドット「.」で命令をつないでいく文法、JavaScriptやActionScriptでは定番)で書いていくことになります。

で、四角を描く方法は以下の通りです。(ソースをコピペしてcanvas対応ブラウザで見てください)
スクリーンショット(2010-04-20 23.20.57).png 
 ポイントは「ctx.fillRect(0,0,300,200);」です。

ctxというキャンバスのスクリプトが書ける場所に「fillRect」という四角形を描く関数を使って書いてます。
()の中の座標は、横座標の開始点、縦座標の開始点、長方形の横の長さ、長方形の縦の長さ、と、なります。

今回は左上隅に横300px、縦200pxの長方形を描いた訳です。

で、次は四角形ではなく、IllustratorやPhotoshopなどで作ったPNG画像を読み込んで表示してみましょう。

HTML5 canvas学習リスト

siteInformation

info@akibahideki.com

カテゴリ
Author
秋葉秀樹

秋葉秀樹(アキバヒデキ)

DTP上がりのデザイナー
ノンプログラマー!
フリーランスのデザイナー。
IllustratorやPhotoshopを初代バージョンから使っているという事がウリ。
クリエイター育成機関などでお世話になり、先生として講義をしていたりします。