JavaScriptについて

フォーラム(掲示板)ルール
フォーラム(掲示板)ルールはこちら  ※コードを貼り付ける場合は [code][/code] で囲って下さい。詳しくはこちら
アバター
パコネコ
記事: 139
登録日時: 9年前
住所: 大阪

JavaScriptについて

#1

投稿記事 by パコネコ » 8年前

現在javascriptを勉強しているのですが、どうやら何かミスをしてしまったようなのですが、現在わからなくて困ってます。
現在のプログラム

コード:

// JavaScript Document
function GameMain() {
	ImgPlsPos("ImgBall",100,100);
}
////////////////////////////////////////////////////
//Img:レイヤーの指定、x:座標,y:座標
//指定したレイヤーの画像をx,y座標に移動させる。
function ImgSetPos(Img,x,y){
	if ( GetBrverNN6() ){
		document.getElementById( Img ).style.left = x;
		document.getElementById( Img ).style.top = y;
	}
	if ( GetBrverIE5() ) { 
		document.getElementById( Img ).style.pixelLeft = x; 
		document.getElementById( Img ).style.pixelTop = y; 
	}
}
//引数:上に同じ
//指定したレイヤーの座標にx,y移動させる。//ミス:座標をx,yの分だけ移動させる
function ImgPlsPos(Img,x,y){
	var BallX = ( ImgGetPosX(Img) + x);
	var BallY = ( ImgGetPosY(Img) + y);
	//ImgSetPos(Img,(BallX),(BallY)); //処理がちゃんとされてない?
	ImgSetPos(Img,(BallX),(0)); // 0のみ処理される。
//	alert("_"+ BallX);
}
////////////////////////////////////////////////////
//レイヤーの座標習得
function ImgGetPosX(Img){
	if ( GetBrverNN6() ){
		return( parseInt( document.getElementById( Img ).style.left ) );
	}
	if ( GetBrverIE5() ) {
		return( parseInt( document.getElementById( Img ).style.pixelLeft ) );
	}
	return( 0 );
}
function ImgGetPosY( Img ) {
	if ( GetBrverNN6() ) {
		return( parseInt( document.getElementById( Img ).style.top ) ); 
	} 
	if ( GetBrverIE5() ) { 
		return( parseInt( document.getElementById( Img ).style.pixelTop ) ); 
	} 
	return( 0 ); 
} 
//////////////////////////////////////////////////////
function GetBrverNN6(){
	// ブラウザバージョンセット
	var brver;
	// ブラウザのバージョン
	var NN6;// NN6.0以上ならtrue
	brver = eval(0 + navigator.appVersion.charAt(0));
	NN6 = (brver >= 5 && navigator.appName=="Netscape");
	return NN6;
}
function GetBrverIE5(){
	// ブラウザバージョンセット
	var brver;
	// ブラウザのバージョン
	var IE5;// IE5.0以上ならtrue
	brver = eval(0 + navigator.appVersion.charAt(0));
	IE5 = (brver >= 4 && navigator.userAgent.indexOf("MSIE")!=-1);
	return IE5;
}
////////////////////////////////////////////////////////
というコードとなっております。
23,24行目が問題の場所で、
ここの引数を定数(直接、数字)を書き込んだ場合処理をしてくれるのですが、
そうでない場合(変数を引数に指定した場合)は処理をしてくれません。
(しても結果は無視される。)
どうやらImgSetPos内で、変数の場合は代入に失敗しているようなのですが、対処法がわかりません。
(もしかしたら他がダメなのかな?)

もしかしたら私がいろいろ処理を勘違いしてる可能性もあるのですが、
ここ違うんじゃね?っと思った方がいらっしゃいましたら、アドバイスください。
お願いします。

念のためHTMLも
貼っておきます。

コード:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />

<title>javasqriptゲームページ</title>

<script type="text/javascript" src="Game_0.js"></script>

</head>

<body>
<div id="ImgBall" style="position:absolute; left:128px; top:128px;">
<img src="img/bb01.gif"> 
</div>
<a href="JavaScript:GameMain()">[スタート]</a> 
</body>
</html>

画像データは申し訳ありませんが、適当なものを使用してください。

///////////////******************////////////////////
忘れていたので
私が勉強させていただいているサイト様です。
ゼロから始める「ゲームの作り方」http://www.bluefoun.pos.to/games/howto/howto.html
//////////////
またまた失礼
どうなったら成功なのか書き忘れてました。
申し訳ありません。
ボール(レイヤー)を引数の値に応じて移動させるのが目的です。
今回書いている値ではxに100。
yに100動かしたいです。
(今は)24行目に
ImgSetPos(Img,(BallX),(0)); // 0のみ処理される。
と書いているのでx座標が100プラスされれば成功なのですが...
ニャン!!\(゜ロ\)(/ロ゜)/

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 9年前
住所: 東海地方
連絡を取る:

Re: JavaScriptについて

#2

投稿記事 by softya(ソフト屋) » 8年前

FirefoxのfirebugやIE8以降のF12で使えるデバッガは活用されていますか?
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

アバター
asd
記事: 318
登録日時: 9年前

Re: JavaScriptについて

#3

投稿記事 by asd » 8年前

使用しているブラウザが分かりませんが、Firefox9.0.1で確認したところ、228pxのように単位まで含めて指定
しないと無効な指定と取られてしまうようでした。

コード:

////////////////////////////////////////////////////
//Img:レイヤーの指定、x:座標,y:座標
//指定したレイヤーの画像をx,y座標に移動させる。
function ImgSetPos(Img,x,y){
    if ( GetBrverNN6() ){
        document.getElementById( Img ).style.left = x+"px";//単位を追加して文字列として格納
        document.getElementById( Img ).style.top = y+"px";//単位を追加して文字列として格納
    }
    if ( GetBrverIE5() ) { 
        document.getElementById( Img ).style.pixelLeft = x; 
        document.getElementById( Img ).style.pixelTop = y; 
    }
}
これでFirefox9.0.1とIE8でスタートをクリックするたびに、画像が右下へ移動するようになりました。
Advanced Supporting Developer
無理やりこじつけ(ぉ

アバター
パコネコ
記事: 139
登録日時: 9年前
住所: 大阪

Re: JavaScriptについて

#4

投稿記事 by パコネコ » 8年前

>ソフト屋さん
普段からFirefoxを使用しており、ツール→エラーコンソールは確認したのですが、デバッガは活用していませんでした。
(ちなみに警告は出てましたw)
調べてみたら無料で使える便利な拡張機能なんですね。
早速取り入れてみます。
ありがとうございました。
>asdさん
なるほど。変数を代入する場合は文字列として代入する必要があるんですね。
試してみたらたしかに期待したとおりに動いてくれました。
ありがとうございました。

お二人のおかげで、次のステップへ進めます。
次からはまずはデバッガを使ってみてから、それでもわからなければまた質問させて頂きます。
ありがとうございました。
ニャン!!\(゜ロ\)(/ロ゜)/

アバター
asd
記事: 318
登録日時: 9年前

Re: JavaScriptについて

#5

投稿記事 by asd » 8年前

パコネコ さんが書きました: >asdさん
なるほど。変数を代入する場合は文字列として代入する必要があるんですね。
試してみたらたしかに期待したとおりに動いてくれました。
無事に動いたようでよかったです。
必ずしも文字列で代入する必要があるというよりはブラウザによりけりといったところでしょうか。
(IEでは数値のまま動作しています。むしろ文字列にするとエラーになってました)

Firefox上でFirebugを使用して、実行前の「document.getElementById( Img ).style.left」の値を見たところ
「"128px"」となっていたため"px"まで入れた文字列にすればいけるんじゃないかと推察した次第です。

やはりデバッガは偉大ですね(*´ヮ`)

---
編集:引用部分の不要な部分を削除
Advanced Supporting Developer
無理やりこじつけ(ぉ

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 9年前
住所: 東海地方
連絡を取る:

Re: JavaScriptについて

#6

投稿記事 by softya(ソフト屋) » 8年前

私もゲーム用としてはjavascriptを使ったことがなかったのでfirefoxではpxが必要なんですね。なるほど~。
ブラウザごとの互換性の無さが困りものですね。
こんどjavascriptで大きめなツール作ろうと思っていたんですが私も苦労しそうです。
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

ISLe
記事: 2648
登録日時: 9年前
連絡を取る:

Re: JavaScriptについて

#7

投稿記事 by ISLe » 8年前

(エレメント).style.leftってスタイルシートのleftプロパティのことですからスタイルシートとして正しい記述をしないとダメですね。

手元の資料だとIE4以降は対応していることになっているんですけどエラーになるのは知らなかったです。
IEではどうやって単位を指定するのでしょうね。
pixelLeftプロパティはピクセル単位ですし数値しかダメですけど。

アバター
asd
記事: 318
登録日時: 9年前

Re: JavaScriptについて

#8

投稿記事 by asd » 8年前

softya(ソフト屋) さんが書きました:私もゲーム用としてはjavascriptを使ったことがなかったのでfirefoxではpxが必要なんですね。なるほど~。
ブラウザごとの互換性の無さが困りものですね。
こんどjavascriptで大きめなツール作ろうと思っていたんですが私も苦労しそうです。
スタイルシートやjavascriptはブラウザ依存な部分がありますからね。
Firefoxでは平気なのにIEだとおかしいなんてざらにあって、何度泣きをみたことか(ノ∀`)
でも苦労した分だけ成長できると思えばきっと乗り越えられるかと思います。
ISLe さんが書きました: 手元の資料だとIE4以降は対応していることになっているんですけどエラーになるのは知らなかったです。
IEではどうやって単位を指定するのでしょうね。
pixelLeftプロパティはピクセル単位ですし数値しかダメですけど。
上記でエラーになった云々はpixelLeftプロパティにも「x+"px"」と文字列を入れようとしていたために起きていました。
念のためIE9でもstyle.eftプロパティに単位付きで入れてみたところ、問題なく動作しました。
誤解を招いてしまったみたいで申し訳ないです。
Advanced Supporting Developer
無理やりこじつけ(ぉ

閉鎖

“C言語何でも質問掲示板” へ戻る