その2 から随分時間が経ってしまいましたが、続きを書いていきます。
今回はカエルのキャラクターがシャベルやドリルを使って「働く」アクションを追加する内容です。
]]>
設計と実装編 その4 - 「働く」アクションを追加する
案の定というか当たり前というか、画面上をカエルが歩いているだけだとコンテンツとしては退屈ですので、キャラクターが働いているアクションを追加します。
働いているキャラクターはアニメGIFなので、「働いている」状態の実装は画像切り替えだけでOKです。
キャラクターが「働く」アニメGIFの例
ここでのポイントはキャラクターが立ち止まるところにあります。
キャラクター初期化時に「働く」エリアをランダムに決定
働くエリアの特定の座標に到達したら立ち止まり、働くキャラクター画像に切り替える
働き終わったら通常のキャラクター画像に切り替え、通常の移動を再開
というわけでこれをKaeruクラスの機能に落とし込んで、_selectWorkingArea()メソッド、_checkWorking()メソッド、_work()メソッドを追加することにしました。
Kaeru.prototype = {
...中略
_selectWorkingArea: function (arr, count) {
// 「働く」エリアを選択して返す
// @param {Array} arr behavior配列
// @param {Number} count 働く回数
var arr2 = arr.concat(),
newArr = [],
newArr2 = [],
noWorkingAreaMap = [0,1,8,9,16,17,24,25]; // 縦移動エリア
$.each(arr2, function (i) {
// check area to work
for (var j = 0, l = noWorkingAreaMap.length; j < l; j++) {
if (arr2[i] === noWorkingAreaMap[j]) {
return true;
}
};
newArr.push(arr2[i]);
});
arr2 = shuffle(newArr);
for (var i = 0; i < count; i++) {
newArr2[i] = arr2[i];
};
function shuffle(array) {
var array2 = array.concat();
$.each(array, function(i) {
var index = Math.floor(Math.random() * array2.length);
var element = array2[index];
array2.splice(index, 1);
array[i] = element;
});
return array;
}
return newArr2;
},
_checkWorking: function (workingArea, currentArea) {
// 現在いるエリアが「働く」エリアかチェック
// @param {Array} workingArea 「働く」エリア
// @param {Number} currentArea 現在いるエリア
var self = this,
flag = 0;
$.each(workingArea, function () {
if (currentArea === parseInt(this)) {
flag = 1;
return false;
}
});
return flag;
},
_work: function (map, imgSrc) {
// 「働く」処理
// @param {Object} map エリアIDに対応したmap
// 例： { fromX: 0, fromY: 80, toX: 392, toY: 80 }
// @param {String} imgSrc 働いているカエル画像のパス
var self = this,
randomN = Math.ceil(Math.random() * 5) + 1,
newMap = {
fromX: map.fromX,
fromY: map.fromY,
toX: Math.floor((map.toX - map.fromX) / randomN + map.fromX),
toY: map.toY
};
this.$characterBox.animate({
'left': newMap.toX
},
this._computeDuration(newMap),
'linear',
function () {
// work!
self.$character.attr('src', imgSrc);
setTimeout(function () {
// 移動再開
self.resetMove();
}, 7500);
}
);
},
...中略
};_selectWorkingArea()は引数にbehavior配列（※） と、移動パターン中で「働く」回数を受け取ります。
behavior配列とは、ネタばらし記事その1 で書いたように、エリアIDが移動パターンとして順番に並んでいる配列です。[0,5,8,11,10,12,16,22,23,21,24,27,26,28,29,25,19,18,20,22,23,17,14,15,13,9,4,6,7,1]
「behavior配列の中で、縦移動エリアを除いて、その中から指定した回数だけ「働く」エリアをランダムで選択し、配列として返す」という処理になっています。
縦移動エリアというのはハシゴになっている部分なので、ここでキャラクターが「働く」のはおかしいのでまず除外します。それが最初の処理部分です。
var arr2 = arr.concat(),
newArr = [],
newArr2 = [],
noWorkingAreaMap = [0,1,8,9,16,17,24,25]; // 縦移動エリア
$.each(arr2, function (i) {
// check area to work
for (var j = 0, l = noWorkingAreaMap.length; j < l; j++) {
if (arr2[i] === noWorkingAreaMap[j]) {
return true;
}
};
newArr.push(arr2[i]);
});
最初にvar arr2 = arr.concat();しているのは元のarrを変更しないようにするため。引数arrには元の配列が参照渡し されているため、arrを変更すると、元の配列も変更されてしまいます。
ちなみにArray.concat()は配列同士を連結して新しい配列を返す組み込みメソッドです。
var arr1 = ["hoge", "fuga"];
var arr2 = ["foo", "bar"];
var newArr = arr1.concat(arr2); // ["hoge","fuga","foo","bar"]引数を省略すると、空の配列が連結されることとなり、結果的に配列のコピーを作れます。
arr2を$.each()ループでまわしてnoWorkingAreaMapと突き合わせ、もし該当エリアならreturn true;することで次のループへ。該当しなかったら別の配列（newArr）にpush()します。結果的にnewArrは縦移動エリアを除いたエリアの配列となります。
そして次に、newArrをシャッフルします。この処理はshuffle()関数にまとめました。その方が処理の流れが分かりやすいので。arr2に代入しているのはただ単に配列名を使いまわしているだけです。別の変数を作って代入しても構いません。
arr2 = shuffle(newArr);
...中略...
function shuffle(array) {
var array2 = array.concat();
$.each(array, function(i) {
var index = Math.floor(Math.random() * array2.length);
var element = array2[index];
array2.splice(index, 1);
array[i] = element;
});
return array;
}shuffle()では配列をコピーして、ランダムで1個抽出して新しい配列に追加し、元の配列からはsplice()で削除、ということをやっています。この処理については複数のバナーをランダムに表示するJavaScript というエントリーで取り扱った通りです。
そして引数countの分だけarr2を切り出して、別の配列変数（newArr2）に追加してやります。最後にそれを返せばこのメソッドはできあがりです。
for (var i = 0; i < count; i++) {
newArr2[i] = arr2[i];
};
return newArr2;_checkWorking()メソッドですがこちらはシンプルで、_selectWorkingArea()で設定された配列と、現在のエリアIDをループで突き合わせて、同じものがあったら1を返す、というものです。
_checkWorking: function (workingArea, currentArea) {
var self = this,
flag = 0;
$.each(workingArea, function () {
if (currentArea === parseInt(this)) {
flag = 1;
return false;
}
});
return flag;
}_work()メソッドは、animate()を使って実際にキャラクターをアニメーションさせる処理を含んでいます。キャラクターがエリアをまたぐ際（次のanimate()が呼び出されようとするタイミング）に呼び出されます。
_work: function (map) {
var self = this,
randomN = Math.ceil(Math.random() * 5) + 1,
newMap = {
fromX: map.fromX,
fromY: map.fromY,
toX: Math.floor((map.toX - map.fromX) / randomN + map.fromX),
toY: map.toY
};
...
},まず「働く」座標を決定します。randomNという変数に2～6までのランダムな値を代入します。これがrandomN = Math.ceil(Math.random() * 5) + 1
そしてnewMapという変数に、これからキャラクターを移動させる新しいmapデータを作成します。mapのX座標移動量をrandomN（2～6）で割ってランダムな値を出し、toXにセットします。Math.floor()は小数点以下切り捨てを行う組み込み関数です。
エリアをランダムな数で分割してそこまで移動するの図
そしてキャラクターのleftスタイルプロパティをanimate()させます。
...
// this.$characterBox -> キャラクター画像の入ったdiv
this.$characterBox.animate({
'left': newMap.toX
},
this._computeDuration(newMap),
'linear',
function () {
// self.$character -> キャラクター画像
self.$character.attr('src', imgSrc);
setTimeout(function () {
// 移動再開
self.resetMove();
}, 7500);
}
);
...this._computeDurationはKaeruクラスのメンバメソッドで、引数にmapオブジェクトを与えると、始点から終点までのduration値を返します。
animate()のコールバックで、キャラクター画像を「働く」画像に切り替え、7500ミリ秒後に移動再開の処理（Kaeruクラスのメンバメソッドthis.resetMove()）を行うという流れです。
これでキャラクターが「働く」アクションを追加することができました。
]]>
