js小球重力和碰撞效果

你猜我叫啥發表於2018-05-29

最近在玩小程式中一個比較火的遊戲，最！強！彈！一！彈！！！，真的是超級模型的一款小遊戲，打發時間堪比抖音。。。。。。，今天就來研究下關於小球如何有重力效果和互相碰撞反彈的效果。

1. 重力效果實現

首先我們當然是要先畫個球球啦！

.ball {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #ff5532;
    position: absolute;
}
複製程式碼

然後我們需要給小球規定一個初始的X,Y上的速度和一個讓小球運動起來的定時器timer。

var speedX = 6;
var speedY = 0;
var timer = null;
複製程式碼

定義小球在X,Y上可以移動的最大距離。

//document.documentElement.clientHeight(螢幕高度)
//ball.offsetHeight（小球的高度）
var maxMoveH = document.documentElement.clientHeight - ball.offsetHeight;
var maxMoveW = document.documentElement.clientWidth - ball.offsetWidth;
複製程式碼

如果達到最小或最大距離，折返運動。

//y軸橫向移動超過做大可移動高度，就反彈折回。 
if(ballMoveY >= maxMoveH || ballMoveY <= 0){
    speedY = -speedY;
    ballMoveY = maxMoveH;
}
//x軸橫向移動超過做大可移動寬度，就反彈折回。
if(ballMoveX >= maxMoveW){
    speedX = -speedX;
    //定死最大寬度
    ballMoveX = maxMoveW;
    speedX = speedX*0.95;
}
//移動到右邊邊界就自動折返。
if(ballMoveX <= 0){
    speedX = -speedX;
    speedX = speedX*0.95;
}
複製程式碼

為了防止小球不在彈起後，還在x軸上移動。

if(Math.abs(speedX) < 0.2 && ballMoveY >= maxMoveH){
    clearInterval(timer);
}
複製程式碼

下面是完整程式碼。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        .ball {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: #ff6632;
            position: absolute;
        }
    </style>
</head>
<body>
    <button id="moveStart">點選觸發</button>
    <div id="ball" class="ball"></div>
</body>
<script>
    window.onload = function() {
        var ball = document.getElementById("ball");
        var moveStart = document.getElementById("moveStart");
        moveStart.onclick = function() {
            var speedX = 6;
            var speedY = 0;
            var timer = null;
            moveStart();
            function moveStart() {
                clearInterval(timer);
                timer = setInterval(function(){ 
                    var ballMoveY, ballMoveX;
                    var maxMoveH = document.documentElement.clientHeight - ball.offsetHeight;
                    var maxMoveW = document.documentElement.clientWidth - ball.offsetWidth;
                    speedY += 6;
                    //橫向移動會有能量損耗
                    speedX = speedX*0.99;

                    ballMoveY = ball.offsetTop + speedY;
                    ballMoveX = ball.offsetLeft + speedX;

                    if(ballMoveY >= maxMoveH || ballMoveY <= 0){
                        speedY = -speedY;
                        ballMoveY = maxMoveH;
                    }

                    //x軸橫向移動超過做大可移動寬度，就反彈折回
                    if(ballMoveX >= maxMoveW){
                        speedX = -speedX;
                        ballMoveX = maxMoveW;
                        speedX = speedX*0.95;
                    }


                    if(ballMoveX <= 0){
                        speedX = -speedX;
                        speedX = speedX*0.95;
                    }

                    //如果速度小於0.2且小球不在彈起，則不讓小球在移動了
                    if(Math.abs(speedX) < 0.2 && ballMoveY >= maxMoveH){
                        clearInterval(timer);
                    }

                    ball.style.top = ballMoveY + 'px';
                    ball.style.left = ballMoveX + 'px';
                },30) 
            }
        }
    }
</script>
</html>
複製程式碼

上述大概就是簡單的一個js仿重力的簡單實現。

現在我們來看一看神奇的碰撞效果。

首先，我們需要知道實現小球碰撞需要哪些方法。

隨機生成方法。

function random(type) {
    switch(type){
        case 'color': 
            return 'rgb(' + Math.floor(Math.random()*255) + ',' +  Math.floor(Math.random()*255) + ',' +  Math.floor(Math.random()*255) + ')';
        case 'top':
            return Math.floor(Math.random()*280) + 'px';
        case 'left':
            return Math.floor(Math.random()*280) + 'px';
        case 'speed':
            return Math.floor((Math.random() - 0.5)*20);
        default: 
            return false;
    }
}
複製程式碼

定義一個碰撞區域。

 #content {
    width: 300px;
    height: 300px;
    border: 1px solid #f00;
    position: relative;
}
複製程式碼

建立小球。

function createBall(num){
    var p = null;
    for(var i=0; i < num; i++){
        p = document.createElement('p');
        p.innerHTML = i + 1;
        p.style.background = random('color');
        p.style.color = '#fff';
        p.style.top = random('top');
        p.style.left = random('left');
        p.style['textAlign'] = 'center';
        p.id = 'ball' + i;
        content.appendChild(p);
        ballList.push(p);
        moveBall(p);
    }
}
複製程式碼

小球移動。

function moveBall(ball, startSX, startSY) {
    var speedX = random('speed'),
        speedY = random('speed'),
        ballMoveX = null,
        speedObj = {},
        ballMoveY = null;
    timer = setInterval(function(){
        ballMoveY = ball.offsetTop + speedY;
        ballMoveX = ball.offsetLeft + speedX;
        if(ballMoveX >= maxMoveX || ballMoveX <= 0){
            speedX = -speedX;
        }
        if(ballMoveY >= maxMoveY || ballMoveY <= 0){
            speedY = -speedY;
        }
        ball.style.top = ballMoveY + 'px';
        ball.style.left = ballMoveX + 'px';

        speedObj = crashBall(ball, speedX, speedY);
        speedX = speedObj.speedX;
        speedY = speedObj.speedY;
    }, 30)
}
複製程式碼

小球碰撞。

存在8種位置碰撞的情況。

function crashBall(ball, speedX, speedY) {
    var speedObj = {};
    for(var i = 0; i<ballList.length; i++){
        //自己不跟自己比較
        if(ball.id !== ballList[i].id && Math.abs(ball.offsetLeft - ballList[i].offsetLeft) <= 20 && Math.abs(ball.offsetTop - ballList[i].offsetTop) <= 20){
            //**********物件小球在碰撞小球方位的8個情況***********
            //左上方
            if(ball.offsetLeft < ballList[i].offsetLeft && ball.offsetTop < ballList[i].offsetTop){
                speedX > 0 && (speedX = -speedX);
                speedY > 0 && (speedY = -speedY);
            }
            //正上方（不會影響水平運動的速度）
            if(ball.offsetLeft === ballList[i].offsetLeft && ball.offsetTop < ballList[i].offsetTop){
                speedY > 0 && (speedY = -speedY);
            }
            //右上方
            if(ball.offsetLeft > ballList[i].offsetLeft && ball.offsetTop < ballList[i].offsetTop){
                speedX < 0 && (speedX = -speedX);
                speedY > 0 && (speedY = -speedY);
            }
            //正右方
            if(ball.offsetLeft > ballList[i].offsetLeft && ball.offsetTop === ballList[i].offsetTop){
                speedX < 0 && (speedX = -speedX);
            }
            //右下方
            if(ball.offsetLeft > ballList[i].offsetLeft && ball.offsetTop > ballList[i].offsetTop){
                speedX < 0 && (speedX = -speedX);
                speedY < 0 && (speedY = -speedY);
            }
            //正下方
            if(ball.offsetLeft === ballList[i].offsetLeft && ball.offsetTop > ballList[i].offsetTop){
                speedY < 0 && (speedY = -speedY);
            }
            //左下方
            if(ball.offsetLeft < ballList[i].offsetLeft && ball.offsetTop > ballList[i].offsetTop){
                speedX > 0 && (speedX = -speedX);
                speedY < 0 && (speedY = -speedY);
            }
            //正左方
            if(ball.offsetLeft < ballList[i].offsetLeft && ball.offsetTop === ballList[i].offsetTop){
                speedX > 0 && (speedX = -speedX);
            }
        }
    }
    speedObj.speedX = speedX;
    speedObj.speedY = speedY;
    return speedObj;
}
複製程式碼

完整程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        html,body {
            margin: 0;
            padding: 0;
        }

        #content {
            width: 300px;
            height: 300px;
            border: 1px solid #f00;
            position: relative;
        }

        #content p {
            position: absolute;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            margin: 0;
        }

    </style>
</head>
<body>
    <div id="content"></div>
</body>
<script>
    window.onload = function() {
        var content = document.getElementById('content');
        var maxMoveX = content.clientWidth - 20;
        var maxMoveY = content.clientHeight - 20;
        var timer = null;
        var ballList = [];
        //0. 公共方法(隨機建立)
        function random(type) {
            switch(type){
                case 'color': 
                    return 'rgb(' + Math.floor(Math.random()*255) + ',' +  Math.floor(Math.random()*255) + ',' +  Math.floor(Math.random()*255) + ')';
                case 'top':
                    return Math.floor(Math.random()*280) + 'px';
                case 'left':
                    return Math.floor(Math.random()*280) + 'px';
                case 'speed':
                    return Math.floor((Math.random() - 0.5)*20);
                default: 
                    return false;
            }
        }
        //1. 建立小球
        function createBall(num){
            var p = null;
            for(var i=0; i < num; i++){
                p = document.createElement('p');
                p.innerHTML = i + 1;
                p.style.background = random('color');
                p.style.color = '#fff';
                p.style.top = random('top');
                p.style.left = random('left');
                p.style['textAlign'] = 'center';
                p.id = 'ball' + i;
                content.appendChild(p);
                ballList.push(p);
                moveBall(p);
            }
        }
        //2. 移動小球
        function moveBall(ball, startSX, startSY) {
            var speedX = random('speed'),
                speedY = random('speed'),
                ballMoveX = null,
                speedObj = {},
                ballMoveY = null;
            timer = setInterval(function(){
                ballMoveY = ball.offsetTop + speedY;
                ballMoveX = ball.offsetLeft + speedX;
                if(ballMoveX >= maxMoveX || ballMoveX <= 0){
                    speedX = -speedX;
                }
                if(ballMoveY >= maxMoveY || ballMoveY <= 0){
                    speedY = -speedY;
                }
                ball.style.top = ballMoveY + 'px';
                ball.style.left = ballMoveX + 'px';

                speedObj = crashBall(ball, speedX, speedY);
                speedX = speedObj.speedX;
                speedY = speedObj.speedY;
            }, 30)
        }
        //3. 處理小球間的碰撞
        function crashBall(ball, speedX, speedY) {
            var speedObj = {};
            for(var i = 0; i<ballList.length; i++){
                //自己不跟自己比較
                if(ball.id !== ballList[i].id && Math.abs(ball.offsetLeft - ballList[i].offsetLeft) <= 20 && Math.abs(ball.offsetTop - ballList[i].offsetTop) <= 20){
                    //**********物件小球在碰撞小球方位的8個情況***********
                    //左上方
                    if(ball.offsetLeft < ballList[i].offsetLeft && ball.offsetTop < ballList[i].offsetTop){
                        speedX > 0 && (speedX = -speedX);
                        speedY > 0 && (speedY = -speedY);
                    }
                    //正上方（不會影響水平運動的速度）
                    if(ball.offsetLeft === ballList[i].offsetLeft && ball.offsetTop < ballList[i].offsetTop){
                        speedY > 0 && (speedY = -speedY);
                    }
                    //右上方
                    if(ball.offsetLeft > ballList[i].offsetLeft && ball.offsetTop < ballList[i].offsetTop){
                        speedX < 0 && (speedX = -speedX);
                        speedY > 0 && (speedY = -speedY);
                    }
                    //正右方
                    if(ball.offsetLeft > ballList[i].offsetLeft && ball.offsetTop === ballList[i].offsetTop){
                        speedX < 0 && (speedX = -speedX);
                    }
                    //右下方
                    if(ball.offsetLeft > ballList[i].offsetLeft && ball.offsetTop > ballList[i].offsetTop){
                        speedX < 0 && (speedX = -speedX);
                        speedY < 0 && (speedY = -speedY);
                    }
                    //正下方
                    if(ball.offsetLeft === ballList[i].offsetLeft && ball.offsetTop > ballList[i].offsetTop){
                        speedY < 0 && (speedY = -speedY);
                    }
                    //左下方
                    if(ball.offsetLeft < ballList[i].offsetLeft && ball.offsetTop > ballList[i].offsetTop){
                        speedX > 0 && (speedX = -speedX);
                        speedY < 0 && (speedY = -speedY);
                    }
                    //正左方
                    if(ball.offsetLeft < ballList[i].offsetLeft && ball.offsetTop === ballList[i].offsetTop){
                        speedX > 0 && (speedX = -speedX);
                    }
                }
            }
            speedObj.speedX = speedX;
            speedObj.speedY = speedY;
            return speedObj;
        }
        createBall(3);
    }
</script>
</html>
複製程式碼

關鍵的地方是要向清楚，兩個小球間碰撞後的運動方向，和碰到方框以後的碰撞方向。

好啦，上面就是今天的全部內容啦。

end。。。

ccf碰撞的小球（100分）
2020-09-27
CCF-CSP 20180302:小球碰撞
2020-11-27
Three.js 進階之旅：物理效果-碰撞和聲音 ?
2023-02-15
JS
HTML5畫布-小球碰撞
2024-05-20
HTML
canvas小球碰壁效果
2018-06-02
Canvas
JavaScript之多小球非對心彈性碰撞
2019-03-03
JavaScript
canvas小球擺動效果
2018-03-15
Canvas
css3小球上下移動效果
2024-10-12
CSSS3
CSS3小球靜態環繞效果
2018-11-22
CSSS3
用JS實現方塊碰撞
2021-12-06
JS
重力感應控制物件的旋轉和方向
2018-05-17
物件
JS和Css實現紅包雨的效果
2019-12-19
JSCSS
原生JS拖拽效果
2019-09-20
JS
js閃爍效果
2018-12-28
JS
JS寫的不咋地的碰撞檢測
2019-01-14
JS
密碼學系列之:碰撞抵禦和碰撞攻擊collision attack
2021-06-03
密碼學
【h5遊戲開發】egret引擎p2物理引擎（2） - 小球碰撞地面搞笑的物理現象
2022-02-08
H5遊戲開發
Three.js進階篇之6 - 碰撞檢測
2018-03-15
JS
js實現打字效果
2021-09-09
JS
canvas小球亂撞
2018-07-02
Canvas
小球彈彈樂
2020-11-26
Three.js中實現對InstanceMesh的碰撞檢測
2023-09-20
JS
js之滑鼠的拖曳效果
2020-12-29
JS
原生js實現一個DIV的碰撞反彈運動
2018-06-28
JS
JavaScript小球碰壁詳解
2018-09-08
JavaScript
CSS + JS 實現打字機效果
2024-03-24
CSSJS
js 實現程式碼雨效果
2024-08-23
JS
js五子棋效果
2024-10-24
JS
【Demllie航天】重力轉彎與閉環控制
2021-01-03
win10平板重力感應失效怎麼辦_win10平板重力感應失靈如何修復
2020-02-13
Win10
用js（hover ）+css實現下拉框效果（有效果圖）
2019-01-16
JSCSS
mpvue: vuejs和小程式碰撞出來的火花
2018-05-21
VueJS
小球運動-常規1
2019-03-31
奇妙的canvas：彈跳小球
2018-11-03
Canvas
JS實現彈幕效果（10.11—10.17）
2020-10-17
JS
雜湊碰撞
2024-10-22
碰撞檢測
2024-06-17
世界碰撞演算法原理和總結（sat gjk）
2020-10-29
演算法

js小球重力和碰撞效果

1. 重力效果實現

上述大概就是簡單的一個js仿重力的簡單實現。

現在我們來看一看神奇的碰撞效果。

完整程式碼如下：

關鍵的地方是要向清楚，兩個小球間碰撞後的運動方向，和碰到方框以後的碰撞方向。

相關文章