碰撞檢測

本文轉載自查看原文 2012-07-01 22:17 5849 javascript

碰撞檢測：
1、圓形與矩形的碰撞檢測

函數ComputeCollision，當相對距離小於圓形半徑的時候為碰撞。

　　參數介紹(w：矩形的寬，h：矩形的高，r：圓形半徑，rx：圓形中心與矩形中心相對坐標X，ry：圓形中心與矩形中心相對坐標Y）

        function ComputeCollision(w, h, r, rx, ry) {
            var dx = Math.min(rx, w * 0.5);
            var dx1 = Math.max(dx, -w * 0.5);
            var dy = Math.min(ry, h * 0.5);
            var dy1 = Math.max(dy, -h * 0.5);
            return (dx1 - rx) * (dx1 - rx) + (dy1 - ry) * (dy1 - ry) <= r * r;
        }

2、圓形坐標中心位置和矩形坐標中心位置
圓形坐標指鼠標的位置
修正圓形的位置，讓鼠標在圓心的中心位置

                //圓心坐標
                var radiusPosX = parseInt((event.clientX || event.x));
                var radiusPosY = parseInt((event.clientY || event.y));

                event = event || window.event;
                //讓鼠標在圓心的位置
                circle.style.left = parseInt(radiusPosX - radius) + "px";
                circle.style.top = parseInt(radiusPosY - radius) + "px";

矩形的長寬
矩形的中心位置是（相對距左+寬度，相對距頂+高度）。

                //矩形的長寬
                var rectW = rect.clientWidth;
                var rectH = rect.clientHeight;
                //矩形中心坐標
                var rectPosX = parseInt(rect.offsetLeft) + rectW / 2;
                var rectPosY = parseInt(rect.offsetTop) + rectH / 2;

<!DOCTYPE html> <html> <head> <title>碰撞檢測</title> <style type="text/css"> *{margin: 0px;padding: 0px;} #circle{width: 80px;height: 80px;border: 1px solid #FF0000;border-radius: 50px;background: #FF6600;position: absolute;left: 0px;top: 0px;} #rect{width: 150px;height: 150px;background: #00FF00;position: absolute;left: 200px;top: 50px;} </style> </head> <body> <div id="circle"><br /></div><div id="rect"><br /></div><script type="text/javascript"> //圓形與矩形的碰撞檢測 function ComputeCollision(w, h, r, rx, ry) { var dx = Math.min(rx, w * 0.5); var dx1 = Math.max(dx, -w * 0.5); var dy = Math.min(ry, h * 0.5); var dy1 = Math.max(dy, -h * 0.5); return (dx1 - rx) * (dx1 - rx) + (dy1 - ry) * (dy1 - ry) <= r * r; } window.onload = function () { document.onmousemove = function (event) { var circle = document.getElementById("circle"); //圓的半徑 var radius = circle.clientWidth / 2; //圓心坐標 var radiusPosX = parseInt((event.clientX || event.x)); var radiusPosY = parseInt((event.clientY || event.y)); event = event || window.event; //讓鼠標在圓心的位置 circle.style.left = parseInt(radiusPosX - radius) + "px"; circle.style.top = parseInt(radiusPosY - radius) + "px"; var rect = document.getElementById("rect"); //矩形的長寬 var rectW = rect.clientWidth; var rectH = rect.clientHeight; //矩形中心坐標 var rectPosX = parseInt(rect.offsetLeft) + rectW / 2; var rectPosY = parseInt(rect.offsetTop) + rectH / 2; //圓形中心與矩形中心相對坐標 var rx = radiusPosX - rectPosX; var ry = radiusPosY - rectPosY; //碰撞檢測 if (ComputeCollision(rectW, rectH, radius, rx, ry)) { rect.style.background = "#00F0FF"; } else { rect.style.background = "#00FF00"; } } } </script> </body> </html>

免責聲明！

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

猜您在找 pygame碰撞檢測 Unity 碰撞檢測碰撞檢測 Pygame碰撞檢測碰撞檢測系統碰撞檢測原理 AABB碰撞檢測 Java之碰撞檢測關於簡單的碰撞檢測 cocos creator 碰撞檢測