前言
今天来使用js实现一下小球碰壁反弹的动画
提示:以下是本篇文章正文内容,下面案例可供参考
1.静态代码
html代码
代码如下(示例):
<div id="inner">
<div id="outer"></div>
</div>
<button id="start">开始</button><button id="pause">暂停</button>
css代码
代码如下(示例):
* {
margin: 0;
padding: 0;
}
#inner {
position: relative;
width: 800px;
height: 600px;
border: 10px solid red;
}
#outer {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: coral;
}
button {
padding: 20px 50px;
}
2.js部分
代码如下(示例):
var inner = document.getElementById('inner')
var outer = document.getElementById('outer')
var start = document.getElementById('start')
var pause = document.getElementById('pause')
//全局定义
var timer = null
var leftStyle = 0
var topStyle = 0
//假设小球正方向
var directionX = true
var directionY = true
//点击开始按钮
start.onclick = function () {
this.disabled = true
pause.disabled = false;
timer = setInterval(move, 1)
}
//点击暂停按钮
pause.onclick = function () {
this.disabled = true
start.disabled = false;
clearInterval(timer)
}
function move() {
// console.log(1);
var maxX = inner.clientWidth - outer.clientWidth
var maxY = inner.clientHeight - outer.clientHeight
if (directionX) {
leftStyle += 1
if (leftStyle >= maxX) {
directionX = false
}
} else {
leftStyle -= 1
if (leftStyle <= 0) {
directionX = true
}
}
if (directionY) {
topStyle += 1
if (topStyle >= maxY) {
directionY = false
}
} else {
topStyle -= 1
if (topStyle <= 0) {
directionY = true
}
}
outer.style.left = leftStyle + 'px'
outer.style.top = topStyle + 'px'
}