移動量を変化させながらバウンドする画像
四辺に突き当たると、横方向/縦方向の移動量を再計算し、ランダムな量に変化させる。
四辺に突き当たると、横方向/縦方向の移動量を再計算し、ランダムな量に変化させる。
Sample Source......................................................................>>>
<script language="JavaScript"><!--
var x = 100; //ﾎﾞｰﾙの現在X座標
var y = 100; //ﾎﾞｰﾙの現在Y座標
var dx = 6; //ﾎﾞｰﾙの横方向の増分(減分)
var dy = 8; //ﾎﾞｰﾙの縦方向の増分(減分)
var timerID;
function Move(){
var obj = document.all.pic; //動かす対象ｵﾌﾞｼﾞｪｸﾄ
var bodyCW = document.body.clientWidth; //WWWﾌﾟﾗｳｻﾞの横幅
var bodyCH = document.body.clientHeight; //WWWﾌﾟﾗｳｻﾞの縦幅
var bodySCL = document.body.scrollLeft; //WWWﾌﾟﾗｳｻﾞの左端X座標
var bodySCT = document.body.scrollTop; //WWWﾌﾟﾗｳｻﾞの上端Y座標
//bodySCLとbodySCTは、WWWﾌﾟﾗｳｻﾞの上下左右ｽｸﾛｰﾙで変化する
x += dx; //X座標方向を増やす(減らす)
y += dy; //Y座標方向を増やす(減らす)
if((x+obj.offsetWidth >= bodyCW+bodySCL)||(x <=
bodySCL)){
//ﾎﾞｰﾙがWWWﾌﾟﾗｳｻﾞｳｨﾝﾄﾞｳの右端||左端に達したとき
ChangeDelay(1); //dx/dyの値を再計算し変化させる。
if(x <= bodySCL){
x = bodySCL; //ﾎﾞｰﾙの位置をWWWﾌﾟﾗｳｻﾞの左端に合わす
}else{
x = bodyCW - obj.offsetWidth + bodySCL;
//ﾎﾞｰﾙの位置をWWWﾌﾟﾗｳｻﾞの右端に合わす
}
}
if((y+obj.offsetHeight >= bodyCH+bodySCT)||(y <=
bodySCT)){
//ﾎﾞｰﾙがWWWﾌﾟﾗｳｻﾞｳｨﾝﾄﾞｳの下端||上端に達したとき
ChangeDelay(2);
//dx/dyの値を再計算し変化させる。
if(y <= bodySCT)y = bodySCT;
else y = bodyCH - obj.offsetHeight + bodySCT;
}
obj.style.posLeft = x; //ﾎﾞｰﾙのleft位置を設定
obj.style.posTop = y; //ﾎﾞｰﾙのtop位置を設定
}
function ChangeDelay(n){
delayX = Math.round(Math.random()*12);//0〜12のﾗﾝﾀﾞﾑ整数値を返す。
delayY = Math.round(Math.random()*16);//0〜16のﾗﾝﾀﾞﾑ整数値を返す。
if(n == 1){
//dxの符号反転(増分と減分を切り替える)
//dyの符号はそのまま
if(dx < 0)dx = delayX;
else dx = -delayX;
if(dy < 0)dy = -delayY;
else dy = delayY;
}
if(n == 2){
//dyの符号反転(増分と減分を切り替える)
//dxの符号はそのまま
if(dx < 0)dx = -delayX;
else dx = delayX;
if(dy < 0)dy = delayY;
else dy = -delayY;
}
}
function OnOff(){
if(bt.innerText == "Move"){
bt.innerText = "Stop";
bt.style.backgroundColor = "lime";
timerID=setInterval('Move()',40);
}else{
bt.innerText = "Move";
bt.style.backgroundColor = "";
clearInterval(timerID);
}
}
//--></script>
</head>
<body>
<button id="bt" onclick="OnOff()">Move</button>
end(最終更新:12/11/12)