FC2ブログ

CanvasAPIでパズル管理

パズルの管理

もぐら叩きでは、複数ある各もぐら穴を配列変数で管理

パズルでも、同様に
各パズルのピース、つまり分割したブロックを
配列変数で管理する

このため、パズルピースを
0~15で管理

図にすると
01234
56789
1112131415
というかんじ

そして、配列変数の値として
現在、どの位置にあるピースを描画するか
番号で代入
そして、15番には空白ピースを表す番号-1を代入

パズルの各ピースを管理する変数blocksの生成と初期化ソースは以下のようになる

//各ピースを管理する配列変数
var blocks=[];

//パズルのブロック作成
for(var i=0;i<(ROW_COUNT * COL_COUNT); i++){
blocks[i]=i;
}

//末尾、つまり右下を空きブロックへ
blocks[ROW_COUNT * COL_COUNT -1] =-1;

CanvasAPIでパズルのピースを描画

パズルの画面を描画する関数
drawPuzzle()

ここでは、配列変数blocksの内容に基づいて
元画像を部分的にコピーし
canvasへ描画する

描画先の座標(x,y)と
描画元の座標(sx,sy)を計算し
drawImage()を使って、画像の部分的描画を行う

左上から右下へかけて
forでパズルピースを描画していく

ループの中で
元画像を部分的に切り取り
パズルピースへ描画

canvasAPIの
drawImage()を使えば
画像の一部分を切り取り描画できる

元画像の座標がsx,sy
描画するcanvasの座標がdx,dyなら
ソースは
context.drawImage(image,sx,sy,BLOCK_W,BLOCK_H,dx,dy,BLOCK_W,BLOCK_H);
というようになる


応用すれば、猫ずらしというアプリみたいなのも
作れそう

空白ピースを猫キャラとかにすれば
おそらくできそう
ただし、これだけだと
何か足りないみたいなので、これは今後の課題
スポンサーサイト



コメント

非公開コメント

最新記事
検索フォーム
GREEハコニワ攻略サイト
リンク
カテゴリ
月別アーカイブ
フリーエリア
最新記事
FXプライムレート
最新コメント
最新トラックバック