JavaScriptでクラスを定義する方法を勝手に定義
JavaScriptはプロトタイプベースの言語なので、
自由度が高すぎてクラスを実現する方法が色々とあります。
C/C++やJavaなどを学んでJavaScriptに流れてきた人は書き方の違いに
戸惑った経験があるのではないでしょうか？
私はその口です。
毎回どう書こうか迷ったり戸惑ってしまったりしてしまうので、
自分がよく採用している描き方をまとめてみました。
sample
実際のプログラムです。http://tm-labo.com/laboratory/finding/define-class-definition/
Vector2クラスを定義(script.js)
/**
* @author phi
*/
// ネームスペース
var TM = {};
/**
* Vector2 class
*/
(function(namespace){
// ネームスペース
// 指定がなかった場合デフォルトでグローバル(window)に追加する
namespace = namespace || window;
// コンストラクタ
var Vector2 = namespace.Vector2 = function(x, y){
this.x = x || 0;
this.y = y || 0;
}
// プロトタイプ
// ここでメンバ変数(プロパティ)やメンバ関数を宣言&定義する
Vector2.prototype = {
// --------------------------------
// property list
// --------------------------------
x:0,
y:0,
// --------------------------------
// function list
// --------------------------------
// 長さ
length:function(){
return Math.sqrt(this.x*this.x+this.y*this.y);
},
// 文字列に変換
toString:function(){
return '(' +this.x+', '+this.y+')';
},
// エレメントに書き込む
writeToElement:function(element) {
element.innerHTML += this.toString() + "<br />";
},
// パラメータをアラート
alert:function(){
alert(this.toString());
}
}
// スタティックなメンバを定義
// オブジェクトを生成しなくても使える変数や関数です
Vector2.className = "Vector2";
Vector2.version = "1.0.0";
Vector2.detail =
"ためしに作ってみたVector2クラスです。\
あくまでクラス定義のサンプルなので、\
normalizeがないとか内積、外積は？？\
といったツッコミはなしでお願いしますw";
})(TM);
// 下記を書けば"TM."を付けなくても使えるようになる
// window.Vector2 = TM.Vector2;
TMというネームスペースにVector2というクラスを定義しています。
いつもこんな感じでオブジェクト指向を実現しています。
使用例(index.html)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Define class definition</title>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript">
window.onload = function(){
var vector_list = []; // 配列
// ベクトル2クラスを生成
for (var i=0; i<32; ++i) {
vector_list.push(new TM.Vector2(Math.random()*100, Math.random()*100));
}
// クラス名を表示
var class_name_element = document.getElementById("class-name");
class_name_element.innerHTML += TM.Vector2.className;
// クラスの情報を表示
var class_info_element = document.getElementById("class-info");
class_info_element.innerHTML += TM.Vector2.detail;
// エレメントを取得
var msg_element = document.getElementById("message");
// x,yを表示しまくる
for (var i=0; i<vector_list.length; ++i) {
msg_element.innerHTML+=(i+1)+". ";
vector_list[i].writeToElement(msg_element);
}
}
</script>
</head>
<body>
<h1>Define class definition</h1>
<p>
勝手にクラス定義の方法を定義してみました。
</p>
<h2 id="class-name"></h2>
<p id="class-info"></p>
<div id="message"></div>
<hr />
<a href="/">Home</a>
</body>
</html>
Vector2のx, yの値をダダァーっと羅列するだけのプログラムですが、
このxとyの値をプレイヤーや敵の座標として使ったりすれば、
少しはクラス定義した意味を感じられるのでは？と思います。
なにかアドバイス、質問いただけるとうれしいです。
[…] GCもあるしってことで、前回書いたクラスを定義にnew […]
大変、解りやすいソース説明で勉強になります。早速ですが、お願いがあります。
Titaniumの開発環境からenchant.jsとgameファイルをインポートとする方法が
解りません。是非、初期段階での設定方法を説明して頂ければ嬉しいです。
後、Titanium以外でも構いませんがゲームが動くまでの設定を書いて頂ければ助
かります。では、宜しくお願い致します。以上
参考になったみたいで良かったです.
Titanium は dom という概念がないので内部的に dom を使っている enchant.js を使うのは難しいですね.
役に立てなくてスイマセン.
一応, 以前 enchant.js を使ってゲームを作る流れは以前ブログにまとめてたので
リンク貼っておきますね.
http://tmlife.net/programming/javascript/enchant-js-game-create.html
PC の Webブラウザでも iPhone の Web ブラウザでも動きます.
また何かあれば気兼ねなく聞いてくださいな♪