- ベストアンサー
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などというものはないのでは。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_1_thumbnail_img_sm.png)
