プログラム解説
■使用ライブラリ
このプログラムではAjaxライブラリである
Prototype.jsと
Script.aculo.usライブラリを使っています。jQuery + jQuery UIも最初考えましたが、どうも処理が面倒なのでPrototype.jsとScript.aculo.usライブラリにしました。
■ドラッグドロップ
このゲームはリアルタイムゲームですが、Script.aculo.usのドラッグ＆ドロップ処理は問題なく処理することができています。服などのアイテムにドラッグ処理を指定し、酔っぱらいのキャラクタにドロップ（ドロップゾーン）を設定しています。これにより、服などをキャラクタに重ねた時に手軽に判定できます。element.idをチェックすることで、酔っぱらいに何がドロップされたかをチェックすることができます。ただ、このゲームでは順番に服を着せるためにカウンタを用意し、ドロップされたらカウンタを増やしています。
服を着せたときにキャラクタの画像を入れ替えるには、このカウンタの数値を画像ファイル名と組み合わせたものをスタイルシートのbackground-imageに入れています。
警察官の移動と当たり判定
警察官の移動は、あらかじめ座標値を配列に入れておいて順番に酔っぱらいに向かって移動する処理を行っています。どちらに向かえばよいかは、酔っぱらいの座標値から警察官の座標値を減算した時に負数か正数かで判断することができます。負数であれば左方向（つまりマイナス）、正数であれば右方向（つまりプラス）に移動すればよいことになります。座標値が決まったら、警察官の座標値をスタイルシートのleft, topプロパティに設定します。
酔っぱらいと警察官の当たり判定は、警察官が1人1回移動するたびにチェックします。キャラクタのサイズは32×32ピクセルですが、誤差なく判定してしまうと、感覚的に接触していないに「当たった」となってしまい、違和感を残してしまいます。そこで、多少接触してもいいように余裕を取って接触したと判定するようにしています。
■改造および配布について
このゲームプログラムは勝手に改造して自由に配布して構いません。画像なども適当に変更したり、アイテム（衣服）の数などを増やしてみるのもよいでしょう。
衣服などのアイテムを増やす場合にはHTMLタグとCSSを追加設定してください。プログラム内ではstartGame()関数のDroppables.add()内のif (count == 3) new Draggable("〜");を適宜追加してください。
【
ゲームデータ一式(PSDファイルも含む) ダウンロード (smap.zip)】
