今日练习
利用面向对象编程,实现碰撞检测
图用的昨天那个代码的图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.move {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background-color: red;
}
.fix {
margin-left: 300px;
margin-top: 200px;
width: 300px;
height: 300px;
background-color: slateblue;
}
</style>
</head>
<body>
<div class="move"></div>
<div class="fix"></div>
<script>
function ax() {
this.oDiv = document.getElementsByTagName("div");
var that = this;
this.oDiv[0].onmousedown = function (ev) {
that.dow();
document.onmouseup = function () {
document.onmousemove = null;
}
return false;
}
this.dow = function (ev) {
var ev = window.event || ev;
that.mouseL = ev.clientX - that.oDiv[0].offsetLeft;
that.mouseT = ev.clientY - that.oDiv[0].offsetTop;
document.onmousemove = function (ev) {
that.mov();
}
}
this.mov = function (ev) {
var ev = window.event || ev;
console.log(this);
this.oDiv[0].style.left = ev.clientX - this.mouseL + "px";
this.oDiv[0].style.top = ev.clientY - this.mouseT + "px";
if (this.oDiv[0].offsetTop + this.oDiv[0].offsetHeight > this.oDiv[1].offsetTop
&& this.oDiv[0].offsetTop < this.oDiv[1].offsetTop + this.oDiv[1].offsetHeight
&& this.oDiv[0].offsetLeft + this.oDiv[0].offsetWidth > this.oDiv[1].offsetLeft
&& this.oDiv[0].offsetLeft < this.oDiv[1].offsetLeft + this.oDiv[1].offsetWidth) {
this.oDiv[1].style.backgroundColor = "red";
} else {
this.oDiv[1].style.backgroundColor = "slateblue";
}
}
}
new ax()
</script>
</body>
</html>