下面是我寫(xiě)的純代碼，有注釋嘹裂，可以直接在Google上面運(yùn)行
CSS部分：
? ?body{
? ? ?position: relative;
? ?}
? ? ?.box{
? ? ? ?position: absolute;
? ? ?}
? ? ?.b1{
? ? ? ?width: 100px;
? ? ? ?height: 100px;
? ? ? ?border-radius: 100px;
? ? ? ?background: green;
? ? ? ?left: 100px;
? ? ? ?top: 100px;
? ? ?}
? ? ?.b2{
? ? ? ?width: 100px;
? ? ? ?height: 100px;
? ? ? ?border-radius: 150px;
? ? ? ?background: green;
? ? ? ?top: 500px;
? ? ? ?left: 500px;
? ? ?}
JS部分：
? ?var boxs = document.getElementsByClassName('box'); ?// 因?yàn)樾∏蚩梢杂卸鄠€(gè)盲泛，所以獲取的是它的父級(jí)數(shù)組
? ?for (var i = 0; i < boxs.length; i++) {
? ? ?boxs[i].onmouseup = boxUp;
? ? ?boxs[i].onmousedown = boxDown;
? ? ?boxs[i].onmousemove = boxMove;
? ?}
? ?var moveFlag = false; //小球初始狀態(tài)是靜止的
? ?var offsetLeft= ?0; //小球初始位置距離瀏覽器左邊的偏移量
? ?var offsetTop = 0; //小球初始位置距離瀏覽器上邊的偏移量
//鼠標(biāo)的按下事件
? ?function boxDown(event) {
? ? ?event = event || window.event; // IE瀏覽器
? ? ?console.log(event);
? ? ?moveFlag = true;
? ? ?offsetLeft = event.clientX - this.offsetLeft;
? ? ?offsetTop = event.clientY - this.offsetTop;
? ? ?// this.style.boxShadow = '3px 3px 10px gray';
? ?}
//鼠標(biāo)抬起事件
? ?function boxUp(event) {
? ? ?event = event || window.event;
? ? ?moveFlag = false;
? ?}
//小球的移動(dòng)事件
? ?function boxMove(event) {
? ? ?event = event || window.event;
? ? ?if (moveFlag) {
? ? ? ?this.style.left = event.clientX - offsetLeft + 'px';
? ? ? ?this.style.top = event.clientY - offsetTop + 'px';
? ? ?}
? ? ?for (var i = 0; i < boxs.length; i++) {
? ? ? ?if (this == boxs[i]) {
? ? ? ? ?continue;
? ? ? ?}
//計(jì)算兩個(gè)小球的圓心距
? ? ? ?var distanceX = this.offsetLeft + this.offsetWidth / 2 - (boxs[i].offsetLeft + boxs[i].offsetWidth / 2);
? ? ? ?var distanceY = this.offsetTop + this.offsetTop / 2 - (boxs[i].offsetTop + boxs[i].offsetTop / 2);
? ? ? ?var distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY)
? ? ? ?if (distance <= (this.offsetWidth + boxs[i].offsetWidth) / 2) {
? ? ? ? ?boxs[i].style.background = 'red'; //如果碰撞小球的背景色發(fā)生變化
? ? ? ?}else {
? ? ? ? ?boxs[i].style.background = 'green';
? ? ? ?}
? ? ?}
? ?}
時(shí)候不早了濒持，大家要早睡
?
? ? ?
? ? ?
