前言:碰壁反弹所要的效果就是一个小块在一个大的DIV里做X轴和Y轴的匀速运动,当碰到大DIV的边框时,反方向移动。
正文:
步骤1:首先来分析,怎么样才能使得小球动起来。
a、给小球一个绝对定位absolute,通过每秒改变它的left和top的值来使它移动。在这儿,我们设定两个速度变量speedX=2和speedY=2.以及偏移量x,y.通过定时器,来使x+=speedX,y+=speedY,使得小球移动。同时加入判断,防止小球出边界。
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;
}
}