JavaScript 实现碰壁反弹

前言：碰壁反弹所要的效果就是一个小块在一个大的DIV里做X轴和Y轴的匀速运动，当碰到大DIV的边框时，反方向移动。

正文：

步骤1：首先来分析，怎么样才能使得小球动起来。

x += speedX;
y += speedY;
//判断小球是否碰到边界
if(x <= 0 || x > mainBox.offsetWidth - ball_.offsetWidth) {
speedX = -speedX
}
if(y <= 0 || mainBox.offsetHeight - ball_.offsetHeight <= y) {
speedY = -speedY
}
//改变小球的left和top值
ball_.style.left = x + 'px';
ball_.style.top = y + 'px';

步骤2：判断小球是否落到挡板上

//小球的偏移量
var l1 = ball_.offsetLeft;
var r1 = l1 + ball_.offsetWidth;
var t1 = ball_.offsetTop;
var b1 = t1 + ball_.offsetHeight;
//挡板的偏移量
var l2 = pai.offsetLeft;
var r2 = l2 + pai.offsetWidth;
var t2 = pai.offsetTop;
var b2 = t2 + pai.offsetHeight;
//判断小球是否落到挡板上
if(b1 >= t2 && r1 > l2 && r2 > l1) {
speedY = -speedY;
score++;
score_.innerHTML='分数:'+score+'分'
}
//小球未落到挡板上，游戏结束
if(b1-1> t2) {
clearInterval(timer);
zz.style.display = 'inline-block'
return;
}

步骤3：加入键盘事件，来控制挡板的移动

document.onkeydown = function() {
var event = window.event || event;
switch(event.keyCode) {
case 37:
//挡板不能超出左边界
if(pai.offsetLeft > 0) {
pai.style.left = pai.offsetLeft - aa + 'px'
}
break;
case 39:
//挡板不能超出右边界
if(pai.offsetLeft <= mainBox.offsetWidth - pai.offsetWidth - aa) {
pai.style.left = pai.offsetLeft + aa + 'px'
}
break;
default:
break;
}
}

下面附上效果图和源码下载地址

效果图：