質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

434閲覧

スクリプトでのレイヤの移動

Mariot

総合スコア12

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2017/08/15 13:23

以下のコードを試したところずっとx座標10, y座標10と表示されるんですが、原因がわかりません。
座標を表示してそこに移動するようにしたいのですがどうすれば良いのでしょう?
ブラウザはGoogleChromeを使っています。

javascript

1<html> 2<head> 3</head> 4 5<body> 6 <div id="lyrball" style="position:absolute; left:10px; top:10px;"> 7 <img src="bb01.gif"> 8 </div> 9 10<script type="text/JavaScript"> 11// ブラウザバージョンセット 12var brver; // ブラウザのバージョン 13var NN6; // NN6.0以上なら true 14brver = eval(0 + navigator.appVersion.charAt(0)); 15NN6 = (brver >= 5 && navigator.appName=="Netscape"); 16 17function lyrSetPos( lyr , x , y ) { 18document.getElementById( lyr ).style.left = x; 19document.getElementById( lyr ).style.top = y; 20} 21 22function lyrGetLeft( lyr ){ 23return( parseInt( document.getElementById( lyr ).style.left )); 24} 25 26function lyrGetTop( lyr ){ 27return( parseInt( document.getElementById( lyr ).style.top ) ); 28} 29 30function gameBody() { 31lyrSetPos( "lyrball" , 10 , 10 ); // レイヤーの座標を設定 32for(var i=0; i<200; i++){ 33 for(var j=0; j<200; j++){ 34var ballx; // ボールのX(左)座標 35var bally; // ボールのY(上)座標 36ballx = lyrGetLeft( "lyrball" ); // ballx にレイヤーのX座標を代入 37bally = lyrGetTop( "lyrball" ); // bally にレイヤーのY座標を代入 38alert( "X座標ballx= "+ ballx); 39alert( "Y座標bally=" + bally); 40lyrSetPos( "lyrball" , ballx , bally ); 41 42 ballx = ballx + i; 43 bally = bally + j; 44} 45} 46} 47setInterval("gameBody()", 1000); 48 49</script> 50</body> 51</html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

s8_chu

2017/08/15 13:43

「座標を表示してそこに移動する」とはどういう意味でしょうか?質問者さんが実現したいことをもう少し詳しく追記していただけませんか?
guest

回答1

0

ベストアンサー

的外れかもしれませんが、質問者さんが想像している動作は以下のような動作ではないでしょうか?

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>タイトル</title> 6 <style type="text/css"> 7 #lyrball { 8 position: absolute; 9 left: 10px; 10 top: 10px; 11 } 12 </style> 13</head> 14<body> 15<div id="lyrball"> 16 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=bb01.gif"> 17</div> 18<script> 19 var brver = eval(0 + navigator.appVersion.charAt(0)); 20 var NN6 = (brver >= 5 && navigator.appName === "Netscape"); 21 22 function lyrSetPos(lyr, x, y) { 23 document.getElementById(lyr).style.left = x + "px"; 24 document.getElementById(lyr).style.top = y + "px"; 25 } 26 27 function lyrGetLeft(lyr) { 28 return ( parseInt(document.getElementById(lyr).style.left) ); 29 } 30 31 function lyrGetTop(lyr) { 32 return ( parseInt(document.getElementById(lyr).style.top) ); 33 } 34 35 function gameBody() { 36 var ballx; 37 var bally; 38 ballx = lyrGetLeft("lyrball"); 39 bally = lyrGetTop("lyrball"); 40 41 lyrSetPos("lyrball", ballx + 1, bally + 1); 42 } 43 44 lyrSetPos("lyrball", 10, 10); 45 setInterval("gameBody()", 100); 46</script> 47</body> 48</html>

投稿2017/08/15 13:54

s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Mariot

2017/08/15 13:59

まさにこれです。ありがとうございます。 参考にさせていただきます。
s8_chu

2017/08/15 14:07

もし質問が解決した場合はベストアンサーを選択して質問を解決済みにしてください。
Mariot

2017/08/15 14:07

自分が未熟なために、ループが無いように見えるのですが、どこがそれに当たるのでしょう?
s8_chu

2017/08/15 14:11 編集

setIntervalメソッドです。setIntervalメソッドを使用することで指定時間毎に特定の処理を行うことが可能です。
Mariot

2017/08/15 14:11

わかりました。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問