- ベストアンサー
javascript バウンス
javascriptで、月と星を動かしたいのですが…… 星は動くけど、月が動きません。 初歩的なミスだと思いますし、いっぱい間違えてると思いますが… 助けて下さい！ <html> <head> <title>Ｍoon & Ｓtar</title> <style type="text/css"> div{font:30pt; color:white; z-index:2} div2{font:30pt; color:white; z-index:3} #box{position:absolute; left:50px; top:50px; width:400px; height:280px; background-color:black; z-index:1} #title{position:absolute; left:100px; top:100px} #title2{position:absolute; left:200px; top:200px} #star{position:absolute; left:50px; top:170px; z-index:3} #moon{position:absolute; left:200px; top:170px; z-index:3} </style> <script type="text/javascript"> var imgStar,imgMoon,timer,timer2; var x = 50; //星のX座標 var y = 170; //星のY座標 var dx = 6; //星が１ステップごとに動くXの長さ var dy = 4; //星が１ステップごとに動くYの長さ var syototsu = 0; //境界に衝突したら"1"、していなければ"0" var colorname="black"; //ボックスの背景色 var mx = 100; //月のX座標 var my = 170; //月のY座標 var mdx = 6; //月が１ステップごとに動くXの長さ var mdy = 4; //月が１ステップごとに動くYの長さ var msyototsu = 0; //月境界に衝突したら"1"、していなければ"0" function startMove(){ imgStar = document.getElementById("star"); //IDが"star"のオブジェクトを「imgStarオブジェクトに」 timer = setInterval("moveImg()",50); imgMoon = document.getElementById("moon"); //IDが"moon"のオブジェクトを「imgMoonオブジェクトに」 timer2 = setInterval("moveImg2()",60); } function moveImg(){ if(syototsu == 1) changecolor(); imgStar.style.left = x + "px"; //前回計算しておいた場所(x,y)に画像を表示 imgStar.style.top = y + "px"; //(単位をつけて代入していることに注意！) x = x + dx; y = y + dy; if(x<=50 || x>=410){ dx = -dx; //次のステップの場所がxの領域外であれば、xの移動方向を逆転 syototsu = 1; } if(y<=50 || y>=290){ dy = -dy; //次のステップの場所がyの領域外であれば、yの移動方向を逆転 syototsu = 1; } } function moveImg2(){ if(msyototsu == 1) changecolor2(); imgMoon.style.right = mx + "px"; //前回計算しておいた場所(x,y)に画像を表示 imgMoon.style.bottom = my + "px"; //(単位をつけて代入していることに注意！) mx = mx + dx; my = my + dy; if(mx<=50 || mx>410){ mdx = -dx; //次のステップの場所がxの領域外であれば、xの移動方向を逆転 msyototsu = 1; } if(my<=50 || my>=290){ mdy = -mdy; //次のステップの場所がyの領域外であれば、yの移動方向を逆転 msyototsu = 1; } } function changecolor(){ if(syototsu == 1){ colorname = "maroon"; } else { colorname = "black"; } document.getElementById("box").style.backgroundColor = colorname; syototsu = 0; } function changecolor2(){ if(msyototsu = 0){ colorname = "aqua"; } else { colorname = "black"; } document.getElementById("box").style.backgroundColor = colorname; msyototsu = 0; } function stopTimer(){ clearInterval(timer); } </script> </head> <body onload="startMove();startMove2();" onunload="stopTimer();"> <div id="box"></div> <div id="title">Star Light</div> <div id="title2">Moon Light</div> <div id="star"><img src="star.png" width="40" height="40"></div> <div id="moon"><img src="moon.png" width="40" height="40"></div> </body> </html>
- QPIE
- お礼率40% (8/20)
- JavaScript
- 回答数3
- ありがとう数6
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
たくさんありますが… 動かない直接の原因はstyle.rightとstyle.bottomで指定しているから。 そのほかにも、初期座標が違う、dxとmdxの混乱とかいろいろ… 背景色の変更をどの様にしたいのか不明（現状だと、changecolorは常にmaroonを指定し、changecolor2は常にblackを指定するようになっている） とりあえず、辺に衝突すると色を変えるのかなと、解釈してみました。 moonもstarも同じロジックのものなので（環境変数が違うだけ）、配列で処理するかオブジェクトにして処理すれば、同じスクリプトを繰り返さないですみますね。 以下、ご参考まで。 （処理のタイミングとかは微妙に変えてますが、基本的に同じ） （初期定義さえすれば、惑星の数が増えてもOK） <script> var xMin,xMax,yMin,yMax,timer,timer2; var moon = new $planet(); //月オブジェクト var star = new $planet(); //星オブジェクト moon.name='moon'; //moonエレメントのid star.name='star'; //starエレメントのid star.x=50; star.y=150; //初期定義と違う部分 star.color1='aqua'; star.dy=-3; function startMove(){ xMin= 50; xMax= 450; //全体(box)のx座標範囲 yMin= 50; yMax= 330; //全体(box)のy座標範囲 //インターバルを設定 timer = setInterval(function(){moon.move();},60); timer2 = setInterval(function(){star.move();},50); } //惑星オブジェクトの定義 function $planet(){ this.name = 'planet'; //id属性（名称） this.x = 200; this.y = 170; //x,y座標値 this.dx = 6; this.dy = 4; //デルタx,y this.width = 40; this.height = 40; //図形のサイズ(w,h) this.color = false; //現在の色(true:color1,false:color2) this.color1 = 'maroon'; this.color2 = 'black'; // 1回分の移動メソッド this.move = function(){ this.x += this.dx; this.y += this.dy; var flg = false; if (this.x<=xMin||this.x>=xMax-this.width) {this.dx *=-1; flg=true;} if (this.y<=yMin||this.y>=yMax-this.height) {this.dy *=-1; flg=true;} if (flg){ this.color = !this.color; document.getElementById('box').style.backgroundColor=(this.color)?this.color1:this.color2; } with (document.getElementById(this.name)){ style.left = this.x + 'px'; style.top = this.y + 'px'; } }; } </script>
その他の回答 (2)
- 15mm
- ベストアンサー率65% (65/100)
cssでは bottomよりtop、rightよりleftが優先されて描画されます。 <style>中では left:200px; top:170px; <script>中では imgMoon.style.right = ・・・ imgMoon.style.bottom = ・・・ と、指定方法がばらばらなのを直すとよいです。 どちらに統一するかはお任せですが、 style.top="auto";style.bottom=・・・ とすることでtop指定を取り消してbottom指定に切り替えることもできます。
- SortaNerd_
- ベストアンサー率59% (309/522)
rightやbottomなどというものはないのでは。
関連するQ&A
- Javascriptで星と月の２つの画像を動かしたいのですが…
星は動きますが、月が動いてくれません。どこが間違ってるのかわからないので、誰かわかる方、教えていただきたいです。よろしくお願いします；； <html> <head> <title>オブジェクトを動かす</title> <style type="text/css"> div {font:30pt ; color:white ; z-index:2} #box {position:absolute ; left:50px ; top:50px; width:400px;height:280px ; background-color:black ; z-index:1} #title1 {position:absolute; left:100px ; top:100px} #title2 {position:absolute; left:80px ; top:50px} #star {position:absolute; left:50px ; top:170px ; z-index:3} #moon {position:absolute; left:50px ; top:170px ; z-index:3} </style> <script type="text/javascript"> var imgStar; var imgMoon; var timerA; var timerB; var x = 50; var y = 170; var dx = 6; var dy = 4; var syototsu = 0; var colorname = "black"; function startMove() { imgStar = document.getElementById("star"); timerA = setInterval("moveImgA()", 50); } function startMoon() { imgMoon = document.getElementById("moon"); timerB = setInterval("moveImgB()", 50); } function moveImgA() { if(syototsu == 1) changecolor(); imgStar.style.left = x + "px"; imgStar.style.top = y + "px"; x = x + dx; y = y + dy; if(x<=50 || x >= 410) { dx = -dx; syototsu = 1; } if(y<=50 || y >= 290) { dy = -dy; syototsu = 1; } } function moveImgB() { if(syototsu == 1) changecolor(); imgMoon.style.left = x + "px"; imgMoon.style.top = y + "px"; x = x + dx; y = y + dy; if(x<=50 || x >= 410) { dx = -dx; syototsu = 1; } if(y<=50 || y >= 290) { dy = -dy; syototsu = 1; } } function changecolor(){ if(colorname == "black"){ colorname = "maroon"; } else { colorname = "black"; } document.getElementById("box").style.backgroundColor = colorname; syototsu = 0; } function stopTimerA(){ clearInterval(timerA); } function stopTimerB(){ clearInterval(timerB); } </script> </head> <body onload="startMove();" onunload="stopTimerA();"> <body onload="startMoon();" onunload="stopTimerB();"> <div id="box"></div> <div id="title1">StarLight</div> <div id="star"><img src="star.png" width="40" height="40"></div> <div id="title2">MoonLight</div> <div id="moon"><img src="moon.png" width="40" height="40"></div> </body> </html>
- ベストアンサー
- その他([技術者向] コンピューター)
- オブジェクトがぶつかった時の処理
<script type="text/javascript"> <!-- var imgStar ,imgMoon, timer; var dx = 6, dy = 4, x = 40, y = 160; function startMove(){ if (document.getElementById){ imgStar = document.getElementById("star"); imgMoon = document.getElementById("moon"); timer = setInterval("moveImg()",50); } } function moveImg(){ imgStar.style.left = x + "px"; imgStar.style.top = y + "px"; imgMoon.style.left = (440-x) + "px"; imgMoon.style.top = (320-y) + "px"; x = x + dx; y = y + dy; if (x<=40 || x >= 400) dx = -dx; if (y<=40 || y >= 280) dy = -dy; } function stopTimer() { if (window.clearInterval) clearInterval(timer); } //--> </script> 星と月がぶつかると、お互い逆方向にはね返るようにしたいのですが、この場合どうすれば良いでしょうか？
- 締切済み
- JavaScript
- 以下のJAVASCRIPTが、動作しないのですが、その原因がわかりませ
以下のJAVASCRIPTが、動作しないのですが、その原因がわかりません。助けてください <html> <head> <script type="text/javascript"> var x=200,y=100; var dx=10,dy=10; function move() { setTimeout("move()",100); var ball=document.getElementById("ball"); x+=dx; y+=dy; ball.style.left=x; ball.style.top=y; if (x<=50 || x+10>=450) dx=-dx; if (y<=50 || y+10>=450) dy=-dy; } </script> </head> <body onLoad="move()"> <img src="wall.png" style="position:absolute;left:46;top:46"> <img id="ball" src="ball.png" style="position:absolute;left:200;top:100"> </body> </html>
- 締切済み
- JavaScript
- javascriptで困っています。教えてください
javascript初心者です。以前javascriptでクラスについていろいろな方にアドバイスをいただき、疑問が解決しました。ありがとうございました。 そこで、そのクラスから作ったインスタンスを移動させようとしているのですが、うまくいきません。 html <body onload="init();"> <div id="a"></div> </body> css body{ position:relative; } #a{ width:100px; height:100px; position:absolute; background-color:#0F0; } javascript function Character(x,y){ this.ele = document.getElementById("a"); this.x = x; this.y = y; this.move = function () { this.x += 10; this.y += 10; this.ele.style.left = this.x+"px"; this.ele.style.top = this.y+"px"; } } function init(){ var cha = new Character(10,10); var timer; timer = setInterval("loop()",1000); } function loop(){ cha.move(); } としたら、緑の正方形がx方向、y方向に移動１秒毎に10pxずつ増えながら移動していくと思っていたのですが、うまくいきませんでした。 setIntervalを使わず、var cha = new Character(10,10);の後にcha.move();cha.move();cha.move();c1.move();cha.move();とすると、座標(60,60)に緑の正方形が現れます。 緑の正方形を移動させるにはどうしたらいいのでしょうか。教えてください。
- ベストアンサー
- JavaScript
- javascriptで困っています
初心者webプログラマーです javascriptでエンドロールのようなものを作ろうとしています。以下の１つのhtmlファイルで作ると動くのですが <html> <head> <title>エンドロール</title> <style type="text/css"> #txt{ position: absolute; top: 320px; } #container{ width:320px; height:320px; position:relative; top:0px; left:0px; overflow:hidden; } </style> </head> <body onLoad="setInterval('endroll()', 50);"> <script type="text/javascript"> var y = 320; function endroll(){ document.getElementById("txt").style.top = y; y -= 2; if(y<-400){y=320} } </script> <div id="container"> <div id="txt"> aaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbb ccccccccccccccccccccc ddddddddddddddddddddd eeeeeeeeeeeeeeeeeeeee fffffffffffffffffffff ggggggggggggggggggggg hhhhhhhhhhhhhhhhhhhhh iiiiiiiiiiiiiiiiiiiii </div> </div> </body> </html> これを、htmlファイル、cssファイル、jsファイルに分けてつくると、動かなくなります-----index.html---------------------------------------------------------------------- <html> <head> <link rel="stylesheet" href="endroll.css" type="text/css" /> <script src="endroll.js"></script> <title>エンドロール</title> </head> <body> <div id="container"> <div id="txt"> aaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbb ccccccccccccccccccccc ddddddddddddddddddddd eeeeeeeeeeeeeeeeeeeee fffffffffffffffffffff ggggggggggggggggggggg hhhhhhhhhhhhhhhhhhhhh iiiiiiiiiiiiiiiiiiiii </div> </div> </body> </html> -------endroll.css--------------------------------------------------------------- @charset "utf-8"; #txt{ position: absolute; top: 320px; } #container{ width:320px; height:320px; position:relative; top:0px; left:0px; overflow:hidden; } ---------endroll.js-------------------------------------------------------------- window.onload = function(){ start_endroll(); } var y = 320; // 繰り返し処理の内容 function endroll(){ document.getElementById("txt").style.top = y; y -= 2; if(y<-400){y=320} } // 繰り返し処理の開始 function start_endroll() { timerID = setInterval('endroll()',50); } いろいろ調べてみたのですが、解決できませんでした。長い質問になりましたが、どなたか教えていただければありがたいです。よろしくお願いします。
- 締切済み
- JavaScript
- javascript スライドバー
ダイナミックHTMLに掲載されている jsでのスライダーを同一ページで複数使いたいのですが どおうすればいいでしょうか？ <body onLoad="Init()">で読み込んでいます。 詳しい方がいましたらご教授お願い致します。 var iniX = 150; //バーの初期位置(x) var iniY = 0; //バーの初期位置(y) var dY = -45; //バーに対するスライダーの表示位置(y) var dX1 = 0; //バーに対するスライダーの表示位置(x,最も左) var dX2 = 330; //バーに対するスライダーの表示位置(x,最も右) var valx = -120; //バーに対する数値を表示する位置(x) var valy = -120; //バーに対する数値を表示する位置(y) var minValue = 0; //最小値 var maxValue = 1500; //最大値 var iniValue = 0; //初期値 var M_flag = false; var mdx,mdlayx,mmx,mmlayx; var xmax,xmin; function Init(){ dx = dX2 - dX1; x = dx * ((iniValue - minValue) / (maxValue - minValue)); xmin = iniX + dX1; xmax = iniX + dX2; if(document.all){ document.all("iLf").onmousedown = Mdown; document.onmouseup = Mup; document.onmousemove = Mmove; document.all("iLf").style.posLeft = xmin + x; document.all("iLf").style.posTop = iniY + dY; document.all("iLb").style.posLeft = iniX; document.all("iLb").style.posTop = iniY; document.all("iLv").style.posLeft = iniX + valx; document.all("iLv").style.posTop = iniY + valy; document.all("iLv").innerHTML = iniValue; }else if(document.layers){ }else if(document.getElementById){ document.getElementById("iLf").onmousedown = Mdown; document.onmouseup = Mup; document.onmousemove = Mmove; document.getElementById("iLf").style.left = xmin + x+"px"; document.getElementById("iLf").style.top = iniY + dY+"px"; document.getElementById("iLb").style.left = iniX+"px"; document.getElementById("iLb").style.top = iniY+"px"; document.getElementById("iLv").style.left = iniX + valx+"px"; document.getElementById("iLv").style.top = iniY + valy+"px"; document.getElementById("iLv").innerHTML = iniValue; document.testimg.width = iniValue/4.5; document.testimg.height = 35; } } function Mdown(e){ if(document.all){ mdx = event.x; mdlayx = document.all("iLf").style.posLeft; }else if(document.layers){ }else if(document.getElementById){ mdx = parseInt(e.pageX); mdlayx = parseInt(document.getElementById("iLf").style.left); } M_flag = true; return false; } function Mup(e){ M_flag = false; return false; } function Mmove(e){ if(document.all){ if(M_flag){ mmx = event.x; mmlayx = (mmx - mdx) + mdlayx; if(mmlayx < xmin) mmlayx = xmin; if(mmlayx > xmax) mmlayx = xmax; x = Math.floor((mmlayx - xmin) / dx * (maxValue - minValue) + minValue); document.all("iLf").style.posLeft = mmlayx; document.all("iLv").innerHTML = x; } event.returnValue = false; }else if(document.layers){ }else if(document.getElementById){ if(M_flag){ mmx = parseInt(e.pageX); mmlayx = (mmx - mdx) + mdlayx; if(mmlayx < xmin) mmlayx = xmin; if(mmlayx > xmax) mmlayx = xmax; x = Math.floor((mmlayx - xmin) / dx * (maxValue - minValue) + minValue); document.getElementById("iLf").style.left = mmlayx+"px"; document.getElementById("iLv").innerHTML = x; document.testimg.width = x/4.5; document.testimg.height = 35; } return false; } }
- 締切済み
- JavaScript
- javascriptで困っています。教えてください
javascriptでimgタグの位置を変更しようと考えています。上、下の表示（divタグ）をクリックして上下に10pxずつ移動させたいのですが、どのようにしていいのかよく分かりません。 document.getElementById("kt").style.top = document.getElementById("kt").style.top-10; の部分に無理があるのでしょうか？ 教えていただきたいと思い、投稿させていただきました。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=480"> <style type="text/css"> <!-- #wrapper{ width:640px; height:480px; position:relative; } #kt{ width:250px; height:250px; position:absolute; top:100px; left:100px; } #up{position:absolute; z-index: 1;top:0px;width:20px;height:20px;background-color:#F00;} #down{position:absolute; z-index: 2;top:30px;width:20px;height:20px;background-color:#F00;} --> </style> </head> <body> <div id="wrapper"> <div id="up">上</div> <div id="down">下</div> <img id="kt" src="kt.png"> </div> <script type="text/javascript"> var up_element = document.getElementById("up"); up_element.addEventListener("click", touchUp, false); function touchUp() { document.getElementById("kt").style.top = document.getElementById("kt").style.top-10; } var down_element = document.getElementById("down"); down_element.addEventListener("click", touchDown, false); function touchDown() { document.getElementById("kt").style.top = document.getElementById("kt").style.top+10; } </script> </body> </html>
- ベストアンサー
- JavaScript
- javascriptで困っています。教えてください
javascript初心者です。javascriptでクラスのようなものを扱えると知り、いろいろ調べながら取り組んでいます。 html <div id="a"></div> css #a{ width:100px; height:100px; background-color:#0F0; } javascriptでクラスを作って function Character(x,y){ this.ele = document.getElementById("a"); this.x = x; this.y = y; this.move = function () { this.x += 100; this.y += 100; this.ele.style.left = this.x; this.ele.style.top = this.y; } } var cha = new Character(10,10); cha.move(); としたら、緑の正方形が座標(100,100)あるのかと思っていたのですが、うまくいきませんでした。 javascriptのクラスとhtmlの要素を紐づけるにはどうしたらいいのでしょうか？教えてください。
- ベストアンサー
- JavaScript
- javascriptで困っています。教えてください
javascriptでimgタグの位置を変更しようと考えています。上、下の表示（divタグ）をクリックして上下に移動させたいのですが、上手くいきません。教えていただきたいと思い、投稿させていただきました。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=480"> <style type="text/css"> <!-- #wrapper{ width:640px; height:480px; position:relative; } #kt{ width:250px; height:250px; position:absolute; top:100px; left:100px; } #up{position:absolute; z-index: 1;top:0px;width:20px;height:20px;background-color:#F00;} #down{position:absolute; z-index: 2;top:30px;width:20px;height:20px;background-color:#F00;} --> </style> </head> <body> <div id="wrapper"> <div id="up">上</div> <div id="down">下</div> <img id="kt" src="kt.png"> </div> <script type="text/javascript"> var up_element = document.getElementById("up"); up_element.addEventListener("click", touchUp, false); function touchUp() { document.getElementById("kt").style.top = 50; } var down_element = document.getElementById("down"); down_element.addEventListener("click", touchDown, false); function touchDown() { document.getElementById("kt").style.top = 200; } </script> </body> </html>
- ベストアンサー
- JavaScript
- javascriptで困ってます
下記のスクリプトでcanvas上で四角を動かすアニメーションをさせたのですが、andoroidに標準のブラウザで見ると、最初の位置に四角が残ってしまいます。この残ってしまう四角を消したたいのですが、どのようにしたらよいのでしょうか、教えてください。よろしくお願いします。 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>canvasアニメーション</title> <script type="text/javascript"> // <![CDATA[ window.onload = function(){ var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "#ffffff"; var point = {x:0,y:0}; var par = {x:3,y:3}; var timer; var delay = 100; function draw(x,y){ ctx.clearRect(0,0,600,600); ctx.fillRect(x,y,50,50); } var loop = function(){ point.x = point.x + par.x; point.y = point.y + par.y; draw(point.x,point.y); clearTimeout(timer); timer = setTimeout(loop,delay); } loop(); } // ]]> </script> <style type="text/css" media="screen"> /* <![CDATA[ */ body{ background-color:#000000; } /* ]]> */ </style> </head> <body> <canvas id="canvas" width="600" height="600"></canvas> </body> </html>
- 締切済み
- JavaScript
