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>
お礼
ありがとうございます。 対象は左右と下のbody枠だけにするので、 バネとして処理したいと思います。 今ちょうどバネの位置エネルギーとか調べてました！