パズルの管理
もぐら叩きでは、複数ある各もぐら穴を配列変数で管理
パズルでも、同様に
各パズルのピース、つまり分割したブロックを
配列変数で管理する
このため、パズルピースを
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);
というようになる
応用すれば、猫ずらしというアプリみたいなのも
作れそう
空白ピースを猫キャラとかにすれば
おそらくできそう
ただし、これだけだと
何か足りないみたいなので、これは今後の課題