简单前端——圆与圆碰撞检测

来源：互联网发布：电信网络诈骗立案标准编辑：程序博客网时间：2024/04/28 00:38

只是没什么做搞个来玩玩，顺便练练手

鼠标按着红球，就可以移动红球，如果以黄球发生碰撞，红球就变为绿球，否则颜色不变。

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>#a , #b {width: 100px;height: 100px;position: absolute;border-radius: 50%;}#a{left: 0;top: 0;background-color: red;z-index: 1;}#b {left: 0;top: 0;right: 0;bottom: 0;margin: auto;background-color: yellow;}</style></head><body><div id="a"></div><div id="b"></div><script>var a = document.getElementById('a');  var b = document.getElementById('b');a.onmousedown = function (ev) { aX = ev.clientX - a.offsetLeft;  aY = ev.clientY - a.offsetTop;document.onmousemove = function (ev) {var t1 = a.offsetTop;  var l1 = a.offsetLeft;var t2 = b.offsetTop;  var l2 = b.offsetLeft; if (Math.sqrt(Math.pow(t1 - t2, 2) + Math.pow(l1 - l2, 2)) <= 100) {  // 如果两圆的圆心距小于或等于两圆半径和则认为发生碰撞  a.style.background = 'green';}else{a.style.background = 'red';}a.style.left = ev.clientX - aX +'px';  a.style.top = ev.clientY - aY +'px';  }document.onmouseup = function () {  document.onmousemove = null;  document.onmouseup = null;  }  return false;  }</script></body></html>

0 0