JavaScriptで25個の数字をランダムな配置で表示する方法

2012/05/10 20:07

このQ&Aのポイント

JavaScriptで1から25までの数字がランダムに配置されたミニゲームを作成していますが、数字のピースの表示で問題が発生しています。
特にFirefoxでは、数字のピースが正しい位置に表示されず、y軸方向にずれて表示されます。
正しい位置に数字のピースを表示する方法を教えていただきたいです。

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ピクセルずれる感じです。）正しい位置に表示される方法をご存知の方、教えていただけないでしょうか？よろしくお願いします。

noname#173931

JavaScript
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

神崎渉瑠（@taloo）
ベストアンサー率44% (1016/2280)

2012/05/11 13:55 回答No.1

特定のブラウザだけ数ピクセルずれるというのは、ほとんどの場合デフォルトスタイルが原因だと思います。 *{margin:0;padding:0;} としておいて、必要なタグにmargin、paddingを付け直していくと、たいてい直ります。それで直らなければ、.some div{margin:1px;}などの記述がどこかにあると思いますので、スクリプトでspan.style.margin="0";などを指定し直していけば、直ると思います。 ------ applyの第二引数のargumentsは使えません。（ブラウザ拡張／独自実装、JavaScriptの新しいバージョンなどでは使えるかもしれませんが、そこまで調べていません。） arguments.lengthがあるのでArrayのように見えますが、argumentsはArrayではありませんので、Arrayに変換する必要があります。 SpanBox.apply( this, Array.prototype.slice.call(arguments) ); （第二引数以降がないので、callでもapplyでも、どちらでもかまいません。） >//Piece.apply( this, number, width, height, bordervalue, pobj, judgeman ); こういう書き方をする場合は、callしてください。 Piece.call( this, number, width, height, bordervalue, probj, judgeman ); apply(this, arguments)のサポートをしているかどうかの違いのようにも思えますけどね。 IEはサポートしているから"2px solid #ddffee"が機能する、Firefoxはサポートしていない（Array変換が必要）からborderが0になっている、、、とか。ご参考まで。

質問者

お礼 2012/05/12 18:47

丁寧に解説していただきありがとうございます。ご指摘のapply, callを中心に見直させていただきます。わからないところが、あればまた、質問させていただくこともあるかと思いますが、そのときはよろしくおねがいします。なお、お礼が遅れてしまい、大変申しわけありません。貴重な時間を割いての回答、ありがとうございました。

質問者