JavaScript 实现碰壁反弹

前言：碰壁反弹所要的效果就是一个小块在一个大的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;
        }
    }

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

效果图：

源码下载地址