前回は「初めてのenchant.js 007ちょっとごちゃってきたのでリファクタリング[JavaScript]」と題しリファクタリングしました。
今回はイベントの基礎をやっていきたいと思います。
前回の「初めてのenchant.js 006音を鳴らす[JavaScript]」では、
音を鳴らしてみました。
ソースコードがちょっとごちゃってしまって、ですので。
今回は、リファクタリングしたいとおもいます。
前回の「初めてのenchant.js 005文字の表示[JavaScript]」では、
シーン上に文字を表示しました。
今回は音を鳴らしてみます。
前回の「初めてのenchant.js 004画像の表示[JavaScript]」では、シーン上に画像を表示しました。
今回はそのシーンの土台の上に文字を表示させて見たいと思います。
画像の表示
前回の「初めてのenchant.js 003シーンの表示[JavaScript]」では、シーンをゲーム上に表示しました。
今回はそのシーンの土台の上に画像を表示させて見たいと思います。
HTMLの方は特に変更なしです。
シーンの表示
前回の「初めてのenchant.js 002 基本セッティング[JavaScript]」で、基本のセッティングをしました。
今回はゲームのプレイヤー、エネミーなどのオブジェクトを配置していく、
土台になるシーンを表示させてみます。
基本セッティング
前回の「初めてのenchant.js 001 基本的なこと[JavaScript]」で準備したファイルでenchant.jsの基本セッティングを行ってみようとおもいます。
まず、index.htmlにゲームのエンジン「enchant.js」と、ゲームの内容をプログラムしていく「main.js」を読み込みます。
読込順は、「enchant.js」→「main.js」です。
enchant.jsを触ってみる
最近クロスデバイス＆クロスプラットフォームな需要がどんどん高まってきてるなぁーとつくづく実感しております。
インタラクションの効いたコンテンツを作ろうと思った場合に、
ボタンにonClick属性をつけてトラッキングする。
(hogehoge部分は任意の仮想URL)
<a onClick="_gaq.push(['_trackPageview','/hogehoge']);" href="xxxx.mp3" target="_blank">
通常の配列
通常の配列はsort(),reverse()を使うべし。
var arr = [3,5,1,6,3,4,6,3,6,7,4]; alert(arr); //昇順 arr.sort(); alert(arr); //降順 arr.reverse(); alert(arr);
ハッシュをキーでソートする
//keyでソートする
function keySort(hash,sort){
var sortFunc = sort || reverse;
var keys = [];
var newHash = {};
for (var k in hash) keys.push(k);
keys[sortFunc]();
var length = keys.length;
for(var i = 0; i < length; i++){
newHash[keys[i]] = hash[keys[i]];
}
return newHash;
}
//テストデータ
var hash = {
"e":55,
"f":66,
"g":77,
"name":88,
"a":11,
"b":22,
"c":33,
"d":44
};
/*
* テスト
*/
//元のハッシュ
var str = "元のハッシュ\n";
for(var k in hash) str += "key:" + k + " val:" + hash[k] + "\n";
alert(str);
//昇順(デフォルト)でソート
hash = keySort(hash);
str = "昇順\n";
for(var k in hash) str += "key:" + k + " val:" + hash[k] + "\n";
alert(str);
//降順でソート
hash = keySort(hash,"reverse");
str = "降順\n";
for(var k in hash) str += "key:" + k + " val:" + hash[k] + "\n";
alert(str);