JavaScript ミニゲーム作成中に・・・

質問

こんにちは。趣味でプログラミングをしているものです。
JavaScriptで1から25までの数字が
正方形を２５個に分割した小さな正方形に
ランダムに配置されたものをクリックしていく、
というミニゲームをオブジェクト指向っぽく作っているのですが、
わからないところが出てきましたので質問させていただきます。

まず、ゲームの内容について説明させていただきます。

(1) htmlにdivタグを記述してidを　'stage' とします。

(2)　ゲームの初期設定、処理を担当するのはGAMEクラスのインスタンスです

(3) GAMEクラスは
'stage'に 正方形を 5*5 = 25 個の小さな正方形に分割した
FieldPartクラスのインスタンスを配置します。
これらのインスタンスをリストに格納しておきます。
FieldPartインスタンスの描画は小さな正方形を表す
divタグをフィールドにもち、border を指定して
'stage' にappend して
小さな正方形の枠を描画します。

数字のピースを表すスーパークラスPieceを定義しておき
さらにサブクラスを定義します
　　FieldPartインスタンス一個を丸々埋め尽くすLPiece,
FieldPartインスタンス一個の
半分の面積の横長の部分を埋めるHtPiece
FieldPartインスタンス一個の
半分の面積の縦長の部分を埋めるVtPiece,です。

　　HtPiece, VtPiece はどの一行あるいは一列をみても
　　各ひとつずつ配置されるようにします。

これらサブクラスの描画も createElementでdivを作成し、
　　FieldPartインスタンスのフィールドが保持するdivにappendします。
このappendを担当するPiece のサブクラスのメソッドは

(各サブクラス).prototype.belongTo
= fundtion( fieldpart )
{
以下省略
}
と記述しました。

(4)
Piece クラスの各サブクラスへの継承ですが
以下のサイトを参考にさせていただきました。

http://d.hatena.ne.jp/vividcode/20110316/1300269173

　　この中の Classical Pattern #5 を用いました。
そして
(各サブクラス).prototype.belongTo
= function( fieldpart )
{
//
}
として定義しました。

(5)
実行してみると、LPiece はうまくappend できるようです。
HtPiece は div の height が少し大きめに描画されるようですが append できます。
これについてはまたあとで考えるとして
問題はVtPiece なのですが VtPiece の belongTo の実行になると
IE は
[オブジェクトは 'vtBelongTo' プロパティまたはメソッドをサポートしていません。]
というエラーメッセージを表示します。

各サブクラスのPieceクラスからの継承の記述の順番はLPiece, HtPiece, VtPieceですが
何か関係があるのでしょうか？
スペルミス等がない場合には
[オブジェクトは 'vtBelongTo' プロパティまたはメソッドをサポートしていません。]
というエラーメッセージが表示される原因としては
どのようなものが考えられるのでしょうか？

ご存知の方、教えていただけないでしょうか？
よろしくお願いします。

回答No.3

神崎 渉瑠（@taloo） · ベストアンサー

>そこで必要最低限のコードを
>(snip)
>原因というのはわかるものなのでしょうか？

原因を見つけるための方法（の１つ）が、最低限のコードを作ることですから、
それでわからなければお手上げです。

プロパティ/メソッドを定義しているにもかかわらず、そのプロパティ/メソッドがないというエラーが出るのは、
そのオブジェクトや、thisキーワードが指している内容が、コーダーが思ったものとは違うものになっている場合だと思います。

お礼

お礼が遅れてしまい申しわけありません
いったん質問を打ち切らせていただき
改めて質問させていただこうと思いますので
そのときはよろしくお願いします。
貴重な時間をさいての回答、ありがとうございました。

回答No.2

utun01

横やりになりますが。

まずはFirefoxのFirebugとかでステップ実行しましょう。
エラーが出ている個所が明確に分かるはずです。
その上で原因が分からない場合に、その現象が再現する最小単位でソースを切り出し、こちらに張り付けると、きっと良い回答がスパッっと出てきますよ。

ちなみにですが、エラーが出ている個所の直前でブレークして、エラーを吐くインスタンスの中身を見てみると、大抵の場合はその時点で問題点が発覚します。

お礼

お礼が遅れてしまい申しわけありません。
実はFireBugを使ったことがないのです。
だいたい、アラート表示を利用していました。
まず、FireBug に慣れてみたいと思います。
そのうえで簡単なコードを作成し
実行してみてわからないところは
ソースコードとともに質問させていただこうと
思いますので、そのときはよろしくお願いします。
貴重な時間をさいての回答、ありがとうございました。

回答No.1

神崎 渉瑠（@taloo）

質問文を見る限りでは、

コードは"belongTo"メソッドを生成、
エラーメッセージは"vtBelongTo"ですので、

継承部分ではなく、呼び出し部分でタイポ（スペルミス）してるように思えます。

それ以外に問題があるとすれば、実際のコードか現象を再現できる必要最低限のコードを提示していただかないとわかりませんが、
必要最低限のコードを作成すると、たいてい原因が分かると思います。

>HtPiece は div の height が少し大きめに描画されるようですが append できます。
margin、paddingの初期か忘れか、padding、borderWidthを含めずにheightを割り出したとか？

お礼

さっそく回答していただきありがとうございます。
エラーメッセージの件ですが
質問させていただいたときのものは
各ピースの独自のものだから
違う名前にして実行したものでした。
現在は各ピースはすべてbelongToという
メソッドをもっています。
そして、HtPiece　の belongTo だけ認識
されないみたいなのです。

そこで必要最低限のコードを
作成することに興味があるのですが
テスト用のスーパークラス、
テスト用のサブクラス
を定義して
メソッドはたとえば
alert を表示するだけのもの
を定義したとき
原因というのはわかるものなのでしょうか？

もしよければ教えていただけないでしょうか
よろしくお願いします。