こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

javascript バウンス

javascriptで、月と星を動かしたいのですが……
星は動くけど、月が動きません。
初歩的なミスだと思いますし、いっぱい間違えてると思いますが…
助けて下さい!

<html>
<head>
<title>Moon & Star</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; //星が1ステップごとに動くXの長さ
var dy = 4; //星が1ステップごとに動くYの長さ
var syototsu = 0; //境界に衝突したら"1"、していなければ"0"
var colorname="black"; //ボックスの背景色
var mx = 100; //月のX座標
var my = 170; //月のY座標
var mdx = 6; //月が1ステップごとに動くXの長さ
var mdy = 4; //月が1ステップごとに動く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>

投稿日時 - 2009-02-03 19:09:39

QNo.4686467

すぐに回答ほしいです

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

たくさんありますが…
動かない直接の原因は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>

投稿日時 - 2009-02-03 22:42:27

このQ&Aは役に立ちましたか?

6人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.2

cssでは bottomよりtop、rightよりleftが優先されて描画されます。
<style>中では left:200px; top:170px;
<script>中では
imgMoon.style.right = ・・・
imgMoon.style.bottom = ・・・
と、指定方法がばらばらなのを直すとよいです。

どちらに統一するかはお任せですが、
style.top="auto";style.bottom=・・・
とすることでtop指定を取り消してbottom指定に切り替えることもできます。

投稿日時 - 2009-02-03 21:30:42

ANo.1

rightやbottomなどというものはないのでは。

投稿日時 - 2009-02-03 20:25:52

あなたにオススメの質問