ボールを動かす

with コメントはまだありません

サンプル:http://aka-iro.jp/jtest/ball.html

<style type=”text/css”>
#wrap {
width:100%;
height:100%;
position:absolute;
overflow:hidden;
}
div#ball {
width: 100px;
height: 100px;
border-radius: 50px;
background: #000;
left: 0px;
top: 0px;
position: absolute;
}
</style>
<script type=”text/javascript”>

$(function(){

var elem = $(‘#ball’);

var speedx = 10;
var speedy = 10;

var windowW = $(window).on(“resize load”);//window幅
var windowH = $(window).on(“resize load”);//window高さ

var ballW = elem.width();
var ballH = elem.height();

function move() {

//位置
var posX = parseFloat(elem.css(‘left’));
var posY = parseFloat(elem.css(‘top’));

//移動
posX += speedx;
posY += speedy;

//反転
if(posX <= 0 || posX >= windowW.width() – ballW){
speedx *= -1;
}
if(posY <= 0 || posY >= windowH.height() – ballH){
speedy *= -1;
}

//新しい位置
elem.css({left:posX, top:posY});

setTimeout(move, 50);
}
move();

});
</script>
</head>
<body style=”padding:0; margin:0;”>
<div id=”wrap”>
<div id=”ball”></div>
</div>
</body>

ウィンドウ内をバウンドします。
ウィンドウサイズを変更してもいけます。

現状は、ウィンドウの端にぶつかると反転しますが、
途中に障害物をおいても反転するように今度してみます。

Leave a Reply