js實現小球碰撞游戲

本文轉載自查看原文 2018-11-22 16:35 931 js

效果圖：

效果圖消失只是截的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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js實現小球的彈性碰撞。 JS-小球碰撞反彈 JS (canvas) 兩個小球碰撞 pygame系列_小球完全彈性碰撞游戲_源碼下載 Canvas+Js制作動量守恆的小球碰撞 python開發_tkinter_小球完全彈性碰撞游戲_源碼下載 Unity射擊游戲實例—物理碰撞的實現 QT---實現小球游戲（零基礎入門）【C++】CCFCSP201803-2碰撞的小球用js實現圖片（小球）在屏幕上上下左右移動