js實現小球碰撞遊戲
阿新 • • 發佈：2018-11-22
效果圖：
效果圖消失只是截的gif圖的問題
原始碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小球碰撞遊戲</title> <style type="text/css"> *{ margin: 0; padding: 0; } #area{ width: 600px; height: 500px; border: 1px solid black; margin: 100px auto; position: relative; } #ball{ width: 40px; height: 40px; border-radius: 20px; background-color: red; position: absolute; } </style> <!--<script src="../jquery/jquery-3.3.1.min.js"></script>--> </head> <body> <div id="area"> <div id="ball"></div> </div> <script type="text/javascript"> var ballX = 0;//小球X軸初始位置 var ballY = 0;//小球Y軸初始位置 directX= 1;//小球X軸方向 directY = 1;//小球Y軸方向 speed = 2;//小球運動速度 //封裝獲取id函式 function $(id){ return document.getElementById(id); } function move(){ ballX += directX*speed; ballY += directY*speed; $("ball").style.left = ballX+directX+"px"; $("ball").style.top = ballY+directY+"px"; maxWidth = $("area").offsetWidth - $("ball").offsetWidth; maxHeight = $("area").offsetHeight - $("ball").offsetHeight; if(ballX >= maxWidth || ballX<=0){ directX = -directX; } if(ballY >= maxHeight ||ballY<=0){ directY = -directY; } } setInterval("move()",10) </script> </body> </html>