月別: 2013年3月

ジェスチャーイベントとプロパティ
ジェスチャーイベントは
ongesturestart
ジェスチャー開始
ongesturechange
ジェスチャー変更
ongestureend
ジェスチャー終了
そして、以下がジェスチャーのプロパティ名
event.scale
拡大、縮小したときの倍率
これは、実数値
100%なら1
150%なら
1.5
event.rotation
回転角度を度数で指定
ラジアンではないので注意

マルチタッチのプロパティ
touches
スクリーンに触れている指の情報
targetTouches
同じノード内で開始された指の情報
changedTouches
イベント発生元での指の種類

タッチ情報の種類
identifier
タッチポイントを識別するためのユニークな値
target
タッチイベントが発生したノード
screenX/screenY
画面の表示領域に対するX/Y座標
clientX/clientY
クライアント領域(viewport)に対するX/Y座標
pageX/pageY
ページ全体(スクロール領域を含む)に対するX/Y座標

addEventListener()について
addEventListener()を使うことで
複数のイベントハンドラの設定が可能
書式は
object.addEventListener(type, listener, useCapture)
引数の意味は
type
イベントの種類
もし、ontouchstartなら
touchstart
というように、最初のonを省いて書く
listener
イベントを処理するハンドラを記述
fuction(e){….}
という自作の処理になることがほとんど
useCapture
イベントをキャプチャするか指定
大抵の場合、false
ここは、falseかtrueで設定
これらを元にタッチイベントの処理のソース
var a_div=document.getElementById(“a_div”);
//イベント設定
a_div.addEventListener(
“touchstart”,
fuction(e){
a_div.innerHTML=”画面にタッチしました”;},
false
);
a_div.addEventListener(
“touchend”,
fuction(e){
a_div.innerHTML=”画面から指が離れました”;),
false
);

タッチイベントの設定
Javascriptイベントを設定する方法は2つ
一番簡単なのが
ontouchstartなど
onから始まるイベントに対して
直接関数オブジェクトを代入する方法
これは、タッチイベントにイベントハンドラを直接指定する
ソースにすると
var a_div = document.getElementById(“a_div”);
//イベント設定
a_div.ontouchstill=fuction(e){
a_div.innerHTML=”画面に指が触れました”;
};
a_div.ontouchend=fuction(e){
a_div.innerHTML=”画面から指が離れました”;
};
ポイントとなるのは、
ontouchstart
ontouchend
で無名関数を代入していること
ただし、この方法では、
イベントに対して1つのイベントハンドラをしか指定できない
複数のイベントハンドラを設定するには
addEventListener()
を使って設定する
応用すれば、
マウスを載せたら画像がかわるのではなく
指が振れている間だけ画像が変わるというのもできる

8パズル作成
4×4=16の空白ブロックありにして15パズル作成
これを3×3=9の8パズルへ改造
定数にしてあるため、簡単に改造できる
改造するのは
var BLOCK_W =106;
var BLOCK_H = 106;
これは、正方形にしたいから縦横は同じ大きさ
var ROW_COUNT=3;
var COL_COUNT=3;
分割が3×3=9にしたいから
両方とも3を指定
もし、24パズル作成したいなら
var BLOCK_W=64;
var BLOCK_H=64;
var ROW_COUNT=5;
varCOL_COUNT=5;
となる
ちなみに、縦横の幅は
canvasのサイズが320たったときの
設定
これを
320 / 3 = 106
320 / 5 = 64
で計算した結果になる
canvasの値を計算するようにすれば
もっと楽にできるようにもできます

画面にタッチしたときの処理
//タッチしたときの処理
fuction touchHandler(t){
//タッチ座標取得
var px=t.pageX, py=t.pageY;
//何番目のピースを動かしたいか計算
var px2=Math.floor(px/BLOCK_W);
var py2=Math.floor(py/BLOCK_H);
var no=getNo(px2,py2);
//空白ブロックなら動かさない
if(blocks[no]==-1) return;
//上下左右に動かせるブロックがあるか確認
for(var i=0;i=COL_COUNT)continue;
if(yy<0||yy>=ROW_COUNT)continue;
//移動可能か
if(blocks[no]==-1){
blocks[no] = blocks[getNo(px2,py2)];
blocks[getNo(px2,py2)]=-1;
drawPuzzle();
checkClear();
break;
}
}
}
何番目のピースを動かしたいか計算するところでは
画面の左上が基点なので
ブロックの幅や高さで割るだけで
何番目のピースか計算できる
正確には、ピースを座標で判断だけど
ブロックが動かせるか確認するには、
上下左右に空白ブロックがあるか調べる
それが、if(blocks[no]!=-1)
のif制御のところ
で、もし空白ブロックがあるなら
スコープ内の処理をする
処理は
移動可能なら、空白ブロックと
タッチしたブロックのピースを代入して入れ替える
つまり、座標の交換代入ということ
ソースにすると
blocks[no]=blocks[getNo(px2,py2)];
これで、座標取得
つぎに、
blocks[getNo(px2,py2)]=-1;
これで、取得したブロックへ
空白ブロックフラグを設定
そして、drawPuzzle()
で描画する
フラグ立てただけじゃ絵が変わらないから描画しないと駄目

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

Canvasゲームのためのヒント
まず、画面サイズを固定することで
ゲームの座標計算が楽になる
これは、Viewportの設定を
width=device-width
にして固定すればok
さらに、ユーザーがブラウザーを
ズームしたりできないように
user-scalable=no
として、ズームイン、ズームアウトができないようにしておく
これをmetaタグへ記述する
内容は
name=”viewport”
content=”width=device-width,user-scalable=no”
さらに、画面の座標を計算しやすくするため
HTMLのマージンや余白をリセット
これには、styleタグで設定
内容は
*{ padding:0; margin:0; }
これにより、
すべてのDOM要素の
余白、マージンが0になり
正確な位置に要素を配置できる

簡単なiOS/Androidの検出関数
fuction isSmartphone(){
var ua=navigator.userAgent;
return(ua.macth(/iPhone|iPod|iPad|Android/)!=null);
}
//タッチイベントの設定
//もし、スマートフォンでないなら
if(!Smartphone()){
obj.onmousedown = touchHandler;
}
//タッチしたときの処理
fuction touchHandler(t){
var px = t.pageX, py = t.pageY;
alert(‘画面をタッチしました ‘+px+’.’+py);
}
これを、スマートフォンで実行すると
なにもない画面になりタッチすれば
イベント発生する
navigator.userAgent
で、スマートフォンの識別ができる
返ってくる値は
iPod
iPhone
iPad
Android
など
あと、PCのマウスのポインタは1つだけだが
スマートフォンは、マルチタッチのため
何番目の指の情報をどのように
処理するか指定する必要がある
各種の情報が
イベントハンドラ関数の引数の
touchに配列変数として得られる
このため、
タッチした指の情報の一つ目を利用するなら
touchs[0]
というように指定する
画面をタッチしたときの座標情報を
pageX,pageY
で取得するには
fuction touchHandler(t){
var px=T.pageX, py=t.pageY;
alert(‘画像をタッチしました’+px+’,’+py);
}