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 ブラウザでも動きます.
また何かあれば気兼ねなく聞いてくださいな♪