上午：初始位置 位移 新位置
下午：鼠标初始位置（mousedown）mousemove(结束减起始) mouseup 清除移动
案例：小球与方块碰撞（难点碰撞的3个条件）
我要评论<!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>
#box {
width: 400px;
height: 400px;
border: 1px solid #000;
margin: 50px auto;
position: relative;
}
#ball {
height: 40px;
width: 40px;
border-radius: 50%;
background-color: red;
position: absolute;
left: 0;
top: 0;
}
#block {
width: 100px;
height: 20px;
position: absolute;
left: 150px;
bottom: 0;
background-color: black;
}
#count {
color: #ff0000;
font-size: 18px;
position: absolute;
width: 20px;
height: 20px;
left: -20px;
top: 0;
}
</style>
</head>
<body>
<!-- 判断小球什么时候会撞上：3个条件 -->
<div id="box">
<div id="count">0</div>
<div id="ball"></div>
<div id="block"></div>
</div>
<script>
var oBox = document.querySelector('#box');
var oBall = document.querySelector('#ball');
var oBlock = document.querySelector('#block');
var oCount = document.querySelector('#count');
var maxLeft = oBox.clientWidth - oBall.offsetWidth;
var maxTop = oBox.clientHeight - oBall.offsetHeight;
var max = oBox.clientWidth - oBlock.offsetWidth;
var speedBlock = 5;
var speedX = 3;
var speedY = 4;
// 小球
setInterval(function () {
// 初始值
var left = oBall.offsetLeft;
var top = oBall.offsetTop;
// 位移
left += speedX;
top += speedY;
// 临界值
if (left < 0 || left > maxLeft) {
speedX = -speedX
}
if (top < 0 || top > maxTop) {
speedY = -speedY; //转向
}
// 小球什么时候会撞上
var r = oBall.offsetWidth / 2; //圆的半径
if (left > oBlock.offsetLeft - r && //左边线碰撞条件
left < oBlock.offsetLeft - r + oBlock.offsetWidth && // 右边线碰撞条件
top > maxTop - oBlock.offsetHeight // 下边线碰撞条件
) {
speedY = -speedY; //反向
oCount.innerHTML=oCount.innerHTML*1+1;
}
// 新位置
oBall.style.left = left + 'px';
oBall.style.top = top + 'px';
}, 50)
// 方块
document.onkeydown = function (e) {
var e = event || e
var keyCode = e.keyCode || e.which;
// 初始值
var left = oBlock.offsetLeft;
// 位移 我们需要左右2个方向 所以这里用到keyCode值
if (keyCode == 37) {
left -= speedBlock;
}
if (keyCode == 39) {
left += speedBlock;
}
// 临界值 这里不需要反弹是需要停止 所以我们是分开写的
if (left < 0) {
left = 0;
}
if (left > max) {
left = max;
}
// 新位置
oBlock.style.left = left + 'px';
}
</script>
</body>
</html>
案例：随机位置滑动解锁（重点封装一个随机函数）
<!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>
* {
margin: 0;
padding: 0;
}
#box {
width: 650px;
height: 400px;
margin: 50px auto;
border: 1px solid red;
position: relative;
}
#content {
width: 650px;
height: 350px;
position: relative;
background-image: url(lvyou_03.png);
background-size: 650px 350px;
}
#shadow {
height: 40px;
width: 40px;
position: absolute;
left: 0;
top: 0;
background-color: aliceblue;
}
#block {
height: 40px;
width: 40px;
position: absolute;
left: 0;
top: 355px;
background-image: url(lvyou_03.png);
background-size: 650px 350px;
}
#tip {
height: 40px;
width: 40px;
position: absolute;
left: 0;
top: 0;
background-image: url(lvyou_03.png);
background-size: 650px 350px;
}
</style>
</head>
<body>
<div id="box">
<div id="content">
<div id="shadow"></div>
<div id="tip"></div>
</div>
<div id="block"></div>
</div>
<script>
var oContent = document.querySelector('#content');
var oShadow = document.querySelector('#shadow');
var oTip = document.querySelector('#tip');
var oBlock = document.querySelector('#block');
var maxLeft = oContent.clientWidth - oBlock.offsetWidth;
var maxTop = oContent.clientHeight - oBlock.offsetHeight;
setPosition();
// 鼠标事件
oBlock.addEventListener('mousedown', function (e) {
var ev = event || e;
var startX = e.clientX;
document.addEventListener('mousemove', function (e) {
var ev = event || e;
var endX = e.clientX;
var left = endX - startX;
if (left < 0) {
left = 0;
}
if (left > maxLeft) {
left = maxLeft;
}
oBlock.style.left = left + 'px';
oTip.style.left = left + 'px';
})
oBlock.addEventListener('mouseup',function (){
document.onmousemove=null;
if (oShadow.offsetLeft == oTip.offsetLeft) {
alert('great');
} else {
oBlock.style.left = 0;
oTip.style.left = 0;
setPosition();
}
})
})
// 封装一个随机位置函数
function setPosition() {
var x = Math.round(Math.random() * maxLeft);
var y = Math.round(Math.random() * maxTop);
oShadow.style.left = x + 'px';
oShadow.style.top = y + 'px';
oTip.style.top = y + 'px';
oBlock.style.backgroundPosition = `-${x}px -${y}px`;
oTip.style.backgroundPosition = `-${x}px -${y}px`;
}
</script>
</body>
</html>
本文地址：https://blog.csdn.net/weixin_48651630/article/details/107330138
如对本文有疑问， 点击进行留言回复！！
Agora 开源 | 一个 Demo，帮你快速实现社交直播四大场景
vuejs （2）- Vue 生命周期 和 VueJS ajax
网友评论