JavaScriptミニゲーム作成中にわからないところが出てきましたので質問させていただきます
- JavaScriptで1から25までの数字が正方形を25個に分割した小さな正方形にランダムに配置されたものをクリックしていく、というミニゲームをオブジェクト指向っぽく作っている
- ゲームの初期設定、処理を担当するのはGAMEクラスのインスタンスであり、FieldPartクラスのインスタンスを配置している
- Pieceクラスの各サブクラスへの継承の記述の順番に問題がある可能性があり、IEでVtPieceのbelongToの実行時にエラーメッセージが表示される
- ベストアンサー
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' プロパティまたはメソッドをサポートしていません。] というエラーメッセージが表示される原因としては どのようなものが考えられるのでしょうか？ ご存知の方、教えていただけないでしょうか？ よろしくお願いします。
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
>そこで必要最低限のコードを >(snip) >原因というのはわかるものなのでしょうか？ 原因を見つけるための方法（の１つ）が、最低限のコードを作ることですから、 それでわからなければお手上げです。 プロパティ/メソッドを定義しているにもかかわらず、そのプロパティ/メソッドがないというエラーが出るのは、 そのオブジェクトや、thisキーワードが指している内容が、コーダーが思ったものとは違うものになっている場合だと思います。
その他の回答 (2)
- utun01
- ベストアンサー率40% (110/270)
横やりになりますが。 まずはFirefoxのFirebugとかでステップ実行しましょう。 エラーが出ている個所が明確に分かるはずです。 その上で原因が分からない場合に、その現象が再現する最小単位でソースを切り出し、こちらに張り付けると、きっと良い回答がスパッっと出てきますよ。 ちなみにですが、エラーが出ている個所の直前でブレークして、エラーを吐くインスタンスの中身を見てみると、大抵の場合はその時点で問題点が発覚します。
お礼
お礼が遅れてしまい申しわけありません。 実はFireBugを使ったことがないのです。 だいたい、アラート表示を利用していました。 まず、FireBug に慣れてみたいと思います。 そのうえで簡単なコードを作成し 実行してみてわからないところは ソースコードとともに質問させていただこうと 思いますので、そのときはよろしくお願いします。 貴重な時間をさいての回答、ありがとうございました。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2281)
質問文を見る限りでは、 コードは"belongTo"メソッドを生成、 エラーメッセージは"vtBelongTo"ですので、 継承部分ではなく、呼び出し部分でタイポ（スペルミス）してるように思えます。 それ以外に問題があるとすれば、実際のコードか現象を再現できる必要最低限のコードを提示していただかないとわかりませんが、 必要最低限のコードを作成すると、たいてい原因が分かると思います。 >HtPiece は div の height が少し大きめに描画されるようですが append できます。 margin、paddingの初期か忘れか、padding、borderWidthを含めずにheightを割り出したとか？
お礼
さっそく回答していただきありがとうございます。 エラーメッセージの件ですが 質問させていただいたときのものは 各ピースの独自のものだから 違う名前にして実行したものでした。 現在は各ピースはすべてbelongToという メソッドをもっています。 そして、HtPiece の belongTo だけ認識 されないみたいなのです。 そこで必要最低限のコードを 作成することに興味があるのですが テスト用のスーパークラス、 テスト用のサブクラス を定義して メソッドはたとえば alert を表示するだけのもの を定義したとき 原因というのはわかるものなのでしょうか？ もしよければ教えていただけないでしょうか よろしくお願いします。
関連するQ&A
- JavaScript FireFoxでのdiv
こんにちは。趣味でプログラミングをしているものです。 JavaScriptで1から25までの数字が 正方形を２５個に分割した小さな正方形に ランダムに配置されたものをクリックしていく、 というミニゲームを作っているのですが、 数字のピースの表示でつまづいています。 以下に質問の内容を説明をさせていただきますので よろしくお願いします。 ソースコードの全文は載せられないので おおかたは、抜粋となりますが、 よろしくおねがいします。 (1)正方形を２５個に分けたときの各部分を表すクラスです。 var FieldPart = function( x, y, width, height, bordervalue, pnode ) { SpanBox.apply( this, arguments ); //SpanBoxというクラスの拡張 this.occupy = new Array( 0, 0, 0, 0 ); }; (2)クリックするための数字をあらわすクラスです。 var Piece = function( number, width, height, bordervalue, judgeman ) { //this.x = //this.y = this.number = number; this.width = width; this.height = height; //this.pobj = pobj; // ここではjudgemanのふるまいは関係ないので省略です。 this.judgeman = judgeman; this.span = null; this.border = bordervalue; }; var LPiece = function ( number, width, height, bordervalue, judgeman ) { //Piece.apply( this, number, width, height, bordervalue, pobj, judgeman ); Piece.apply( this, arguments ); }; * LPiece, FieldPart ともに親クラスからのメソッドの * 継承はうまくいっているようです。 (3) body 抜粋 html5用のサウンドを除けばこれだけです。 <body> <div id="stage"> <img "bgimage"> <input type="button" onclic="test2()"> <input type="button" onclic="test3()"> </div> </body> (4) 関数 test2 抜粋 for( i=0; i<5; i++) { for( j=0; j<5; j++ ) { FieldList[ 5*i + j ] = new FieldPart( 80*j, 80*i, 4, 4, "2px solid #ddffee", "stage" ); } } for( i=0; i<FieldList.length; i++ ) FieldList[ i ].setSpan(); で予定の位置にdivタグ(spanではありません)を描画し setIntervalで80pxまで拡大 (5) 関数 test3 抜粋 LList = new Array(); if( typeof judgeman == 'object' ) { for( i=1; i<=25; i++ ) { LList.push( new LPiece( i, 80, 80, "2px solid #ddffee", judgeman ) ); } for( i=0; i<25; i++ ) LList[i].belongTo( FieldList[i] ); } alert( "Piece.height :" + LList[0].height ); // alert の height の値は80です。 (6)LPieceのメソッドbelongTo です。 LPiece.prototype.belongTo = function( pobj ) { this.span = document.createElement( 'div' ); this.span.style.width = this.width; this.span.style.height = this.height; this.span.style.border = this.border; var elm = this.span; pobj.span.appendChild( elm ); // フォント等の設定 スーパーで定義するか？ this.span.style.fontFamily = 'century'; this.span.style.fontWeight = 'bold'; this.span.style.fontSize = '22px'; this.span.style.color = '#00ff00'; this.span.style.paddingTop = 27; this.span.style.textAlign = 'center'; this.setTextNode( this.number ); var poccupy = [1,1,1,1]; pobj.setOccupyArray( poccupy ); //this.span.onclick = function(){ this.mouseAct(); }; }; このように記述して実行した場合、 IE9だと期待通りの表示がされるのですが、 firefoxだとLPieceのdivのborderの部分だけ （と推測するのですが、） y軸方向に一定の値だけずれて 表示されてしまいます。 （というのも,ピースで定義した数字が パーツの中央あたりに表示されているからです。） インスタンスのメソッドから インスタンスフィールドのdivにdivをappendせず、 同様の動作をする関数だと だいたい、期待通りのいちにappendされます。 (firefoxはPieceがx方向y方向に1,2ピクセルずれる感じです。） 正しい位置に表示される方法をご存知の方、 教えていただけないでしょうか？ よろしくお願いします。
- ベストアンサー
- JavaScript
- Ruby 特異メソッドのnewが先に実行？
Rubyのインスタンス生成について質問があります。 通常クラスを定義する場合は class Hoge ; def hello(); pirnt "hello"; end であると思います。 ただ Hoge = Class.new(); でもクラスは定義できるとききました。 ただこの場合Hogeクラスに定義できるのは HogeというClassクラスから作られた特異クラスとしてのHogeに 特異メソッドのみを定義できるということですよね？ 通常のインスタンスメソッドは定義できませんよね？ ではでは、 hoge = Class.new(); とした場合はどうなるのでしょうか？ この場合は Classクラスの純粋なインスタンスとなるのでしょうか？ 前者の定義とおなじ仕方ですが代入先が、通常の変数です。 この場合は、クラスオブジェクトとして生成されるのですか？ オンラインマニュアルをみたところ 「新しく名前の付いていない superclass のサブクラスを生成します。 superclass が省略された時にはObject のサブクラスを生成します。 名前のないクラスは、最初に名前を求める際に代入されている定数名を検索し、見つかった定数名をクラス名とします。」 とあります。 上記内容は Classクラスの特異クラスとして定義されている特異メソッド(new)です。 これは Class.new()で作られたインスタンスを代入する先が定数であればその定数名と同じクラスを定義しつつそのClassクラスのクラスオブジェクトを生成するという意味合いでまちがいないでしょうか？ 上記のとおりであれば hoge =Class.new()の場合は、やはりhogeというクラスを定義することになるのでしょうか？ クラス定義は定数でなければならないはずですよね。 ただ実際、 p hoge;として出力すると＃とひょうじされています。これはhogeがクラスオブジェクトではなく ただのインスタンスであるということでしょうか？ であるならばこの hoge = Class.new()の式のnewはClassクラスオブジェクトに定義された特異メソッドではなく Classクラスに定義されたnewメソッド・・・・・つまりClassクラスに定義されたインスタンスメソッドの方のnewメソッドだとおもうのですが・・・・・・。 つまりこちらのメソッドですね。 「new( ... ) クラスのインスタンスを生成して返します。このメソッドの引数はブロック引数も含め initialize に渡されます。」 ※オンラインリファレンスから参照しました。 しかし 通常メソッドの検索は特異メソッドからはじまりその後クラスのインスタンスメソッド->親クラスのメソッドと 検索して行くとあります。 必ず先に、特異メソッドを実行しているはずだと思うのですが・・・。 やはり特異メソッドnewを実行しているのでしょうか？ 長々すみませんが、ご教授ください。
- ベストアンサー
- Ruby
- super( )メソッドについて質問です
サブクラスのコンストラクタの定義をするときにsuper()メソッドを使うときはどういうときですか？また、どうしてsuper()メソッドを使って、スーパークラスのインスタンスを作成しないといけないのですか？教えてください。
- ベストアンサー
- Java
- 継承について
下の質問の回答、間違ってませんか？ -------------------------------------------- 親クラスのフィールドをメソッドを全て継承することになります。よって、サブクラス2は、サブクラス1とスーパークラスのメンバーを全て持つことになります。サブクラス2をインスタンス化すると、サブクラス1とスーパークラスが全てインスタンス化（コンピューターのメモリ上等に配置）されます。 ただ、可視性というものがあり、サブクラスから親クラスのメンバーを直接取り扱えない場合があります。privateや可視性修飾子無しの場合、サブクラスから直接取り扱えません。ただ、継承はされているので、インスタンスとしては存在します。例えば、 class スーパークラス{ private int abc; public int getAbc(){ return this.abc; } というクラスがあり、これを継承したサブクラスがあったとします。 サブクラスからは、privateなメンバー変数abcは直接取り扱うことができません。ただ、publicなgetAbcメソッドはサブクラスから取り扱えます。これで何が分かるかといいますと、privateなメンバーでもサブクラスに継承されるのです。単に可視性の問題で直接取り扱えないだけなのです。 また、オーバーライドされたメソッドがあったとしても、super.メソッド()で親のメソッドも呼べますので、これも継承されているのです。
- 締切済み
- Java
- 【Ruby】Protectedの確認プログラム
こんにちは、Ruby初学者です。 以下の問題が解けずに困っています。「protectedが、メソッドをクラス内部から使えるようにする。また、同一クラス内ではインスタンスメソッドとしても使えるようにする。」という教科書的な内容は理解しているつもりでプログラムを書くのですが、どうも上手くいきません。 ヒントだけでも構いませんので、諸兄姉の知識をお貸しいただければ幸いです。 「protectedと宣言されたメソッドは、そのメソッドが定義されているクラスのサブクラスで定義されているメソッドから、メッセージの送信元とは異なるオブジェクトに対しても呼び出せることを確認するプログラムを作成し、結果を説明せよ。」 よろしくおねがいいたします。
- ベストアンサー
- Ruby
- AS3.0のクラス定義に関して質問です。
クラス定義についていまいちしっくりこないというか、完全に理解しきれていません。 僕が悩んでいるのは、以下の事です。 ステージ上のインスタンス１個１個に、全く別のクラスをそれぞれ定義したいのですが、その方法がわかりません。 そのインスタンスを配置しているレイヤーのタイムラインに直接コードを書くと、「未定義である可能性が高いメソッド addFrameScript の呼び出しです。 」とでてしまい、コードを適用できません。 今はMain.asというASファイルを作り、プロパティのクラスというところ（こういうのがドキュメントクラス？）に『Main』と入力して、そのFLASH上のインスタンス１個だけに対して定義しています。 そのほかのインスタンスにも違う名前で違う処理のASファイルをクラス定義する方法が知りたいです。 何分AS3.0初心者なものですので、とんちんかんなことを言ってるかも知れませんが、 何卒ご教示のほどお願い申し上げます。
- 締切済み
- Flash
- AS3.0のクラス定義に関して質問です。
クラス定義についていまいちしっくりこないというか、完全に理解しきれていません。 僕が悩んでいるのは、以下の事です。 ステージ上のインスタンス１個１個に、全く別のクラスをそれぞれ定義したいのですが、その方法がわかりません。 そのインスタンスを配置しているレイヤーのタイムラインに直接コードを書くと、「未定義である可能性が高いメソッド addFrameScript の呼び出しです。 」とでてしまい、コードを適用できません。 今はMain.asというASファイルを作り、プロパティのクラスというところ（こういうのがドキュメントクラス？）に『Main』と入力して、そのFLASH上のインスタンス１個だけに対して定義しています。 そのほかのインスタンスにも違う名前で違う処理のASファイルをクラス定義する方法が知りたいです。 何分AS3.0初心者なものですので、とんちんかんなことを言ってるかも知れませんが、 何卒ご教示のほどお願い申し上げます。
- 締切済み
- Flash
- javaで、オブジェクトを生成しないとメソッドは使えないんですか？
javaで、オブジェクトを生成しないとメソッドは使えないんですか？ そのように習ったのですが、サブクラスのメソッド定義の中で、オブジェクトを生成せずにスーパークラスのメソッドを使える例（下に簡単に書きました）をみて、分からなくなってしまいました。 おしえてください、よろしくおねがいします。 ------------------------------- class superclass { method_a(){ ~~~~ } } --------------------------- class subclass { method_b(){ super.method_a(); }
- ベストアンサー
- Java
- クラスの継承の仕方
後学のため、JavaScriptについて勉強しています。 JavaScriptでもクラス（のようなもの）を定義してオブジェクトを作成できるようですが、サブクラスを定義する方法が分かりません。メソッドやコンストラクタはどのように継承すればよいのでしょうか。 お分かりの方おられましたら、ご教授のほどお願い致します。
- ベストアンサー
- JavaScript
- javascript new演算子について質問があります。
javascript new演算子について質問があります。 只今javascript勉強中なのですが、どこかのサイトでnew演算子は悪いパーツとの 記事を読みました。 そこでnew演算子を使用せずにオブジェクト生成の方法を試行錯誤考えてみたのですが (IE用に__proto__もなしで)例えば以下コードはアリなコードでしょうか？？ あるいはありえない感じでしょうか？？ またnewが悪なのはインスタンスを作る時にnewを付け忘れると、 グローバルな汚染をしてしまうということだけなのでしょうか？？ オブジェクトとプロトタイプの理解に苦しんでいるところなので 色々と曖昧なのですが、どなたかどうぞご教授お願い致します。 var obj = {}; obj.method = function(){ this.prop1 = "hoge" return this; }; obj.method.prototype = obj.method(); obj.method.prototype.prop2 = "fuga"; var obj2 = obj.method(); console.log(obj2)
- ベストアンサー
- JavaScript
お礼
お礼が遅れてしまい申しわけありません いったん質問を打ち切らせていただき 改めて質問させていただこうと思いますので そのときはよろしくお願いします。 貴重な時間をさいての回答、ありがとうございました。