引用JavaScript html css 實現圓的碰撞
阿新 • • 發佈：2021-12-05
我們要實現的效果是當紅球碰到黃球時，黃球變黑色。
第一：先通過html 和頭部css實現兩個球，一個是紅球，一個是黃球。
程式碼效果如下：
<style> #div1 { width: 100px; height: 100px; background: red; position: absolute; left:400px; top: 50px; border-radius: 50%; } #div2{ width: 100px; height: 100px; background: yellow; position: absolute; left: 500px; top: 200px; border-radius: 50%; } </style> </head> <body> <div id="div1"></div> <div id="div2"></div> </body>
第二：通過JavaScript實現效果。
1.定義一下div1 與div2
var div1 = document.getElementById('div1') const div2=document.getElementById('div2')
2.定義一個當滑鼠按下與不點選紅球所能實現的函式。
div1.onmousedown = function (event) {//點選時實現的效果document.onmouseup=function(){//不點選時的效果 document.onmousemove=null; };
}
3.在函式內實現點選移動紅球顯示紅球相對於黃球當前的top left 和半徑的值
console.log(event.clientX); console.log(div1.offsetLeft); var chaX = event.clientX - div1.offsetLeft; var chaY = event.clientY - div1.offsetTop; document.onmousemove = function (event) { div1.style.left = event.clientX - chaX + "px"; div1.style.top = event.clientY - chaY + "px"; console.log(div1.offsetWidth / 2, div2.offsetWidth / 2, "半徑"); console.log(div2.offsetLeft - div1.offsetLeft, "left"); console.log(div2.offsetTop - div1.offsetTop, "top");}
4.通過if語句實現如果紅球碰到黃球，黃球變黑要實現的效果。
if ( (div1.offsetWidth / 2 + div2.offsetWidth / 2) * (div1.offsetWidth / 2 + div2.offsetWidth / 2) > (div2.offsetLeft - div1.offsetLeft) * (div2.offsetLeft - div1.offsetLeft) + (div2.offsetTop - div1.offsetTop) * (div2.offsetTop - div1.offsetTop) ) { div2.style.background = "black"; } else { div2.style.background = ""; }
最終如下圖：