效果如下：

打磚塊

html結(jié)構(gòu)代碼：

<!-- 大盒子 -->
<div class="brickBreaker">
    <!-- 放所有磚塊的盒子 -->
    <div class="bricks"></div>
    <!-- 小球 -->
    <div class="ball"></div>
    <!-- 接小球的滑塊 -->
    <div class="slider"></div>
</div>

css樣式代碼：

.brickBreaker{
    width: 500px;
    height: 500px;
    border:1px solid #333;
    position:relative;
}
.bricks{
    width: 100%;
    height: 300px;
    position:absolute;
    left: 0;
    top: 0;
}
.ball{
    width: 28px;
    height: 28px;
    position:absolute;
    bottom: 30px;
    left: 235px;
    background-color: #0f0;
    border:1px solid #f00;
    border-radius:50%;
}
.slider{
    width: 198px;
    height: 28px;
    border-radius:10px;
    position:absolute;
    bottom: 0;
    left:150px;
    background-color: #aaa;
    border:1px solid #000;
}

js代碼：

// 獲取所有元素
var brickBreaker = document.querySelector('.brickBreaker');
var bricks = brickBreaker.querySelector('.bricks');
var ball = brickBreaker.querySelector('.ball');
var slider = brickBreaker.querySelector('.slider');
// 定義磚塊的大小
var brickWidth = 100;
var brickHeight = 30;
// 計算磚塊的行數(shù)和列數(shù)
var col = bricks.clientWidth / brickWidth
var row = bricks.clientHeight / brickHeight
// 創(chuàng)建磚塊并放在磚塊的盒子中
for(var i=0;i<row*col;i++){
    var div = document.createElement('div')
    setStyle(div,{
        width:brickWidth + 'px',
        height:brickHeight + 'px',
        backgroundColor:getColor(),
        position:"absolute",
        left:i%col*brickWidth + 'px',
        top:Math.floor(i/col)*brickHeight + 'px'
    })
    bricks.appendChild(div)
}
// 定義小球運動的x軸和y軸的速度
var speedX = 5; // 默認向右移動
var speedY = -5; // 默認向上移動
// 讓滑塊跟隨鼠標在x軸移動
brickBreaker.onmousemove = function(){
    var e = window.event;
    var x = e.pageX;
    // 滑塊的left = 光標位置 - 大盒子左間距 - 大盒子邊框厚度 - 滑塊的寬度/2
    var l = x - this.offsetLeft - 1 - slider.offsetWidth/2;
    // 限制l，不能讓滑塊移動到大盒子外面
    if(l<0) l=0
    if(l>this.clientWidth-slider.offsetWidth) l=this.clientWidth-slider.offsetWidth
    // 將計算好的l設置給滑塊的left
    slider.style.left = l + 'px'
}   
// 點擊滑塊讓小球開始移動
// 定義定時器變量
var timerId = null;
slider.onclick = function(){
    // 獲取滑塊開始的left和top
    var l = ball.offsetLeft;
    var t = ball.offsetTop;
    timerId = setInterval(function(){
        // 如果小球撞墻了，就反彈 - 讓速度從正數(shù)變負數(shù)/從負數(shù)變正數(shù)
        if(l<0){
            speedX = -speedX
         }
        if(t<0){
            speedY = -speedY
        }
        if(l>brickBreaker.clientWidth-ball.offsetWidth){
            speedX = -speedX
        }
        // 如果撞到滑塊了，就反方向移動
        if(collide(ball,slider)){
            speedY = -speedY
        }else{
            // 如果沒有撞到滑塊，但是小球到了滑塊下了，相當于沒有接住小球，游戲結(jié)束
            if(ball.offsetTop + ball.offsetHeight > slider.offsetTop){
                alert("GAME OVER")
                clearInterval(timerId)
            }
        }
        // 如果撞到磚塊了，就反方向移動
        // 遍歷所有磚塊
        for(var i=0;i<bricks.children.length;i++){
            if(collide(ball,bricks.children[i])){
                speedY = -speedY
                // 刪除撞到的這個磚塊
                bricks.removeChild(bricks.children[i])
                break;
            }
        }
        // 給left和top計算移動距離
        l += speedX;
        t += speedY;
        // 將計算好的left和top設置給ball
        ball.style.left = l + 'px'
        ball.style.top = t + 'px'
    },50)
}
// 判斷兩個標簽是否相撞的函數(shù)
function collide(node1, node2){
    // 標簽1的左間距 + 標簽1的寬度 <= 標簽2的左間距 -- 沒有相撞
    if(node1.offsetLeft + node1.offsetWidth <= node2.offsetLeft){
        return false
    }
    // 標簽1的左間距 >= 標簽2的左間距 + 標簽2的寬度 < -- 沒有相撞
    if(node1.offsetLeft >= node2.offsetLeft + node2.offsetWidth){
        return false
    }
    // 標簽1的上間距 + 標簽1的高度 <= 標簽2的上間距 -- 沒有相撞
    if(node1.offsetTop + node1.offsetHeight <= node2.offsetTop){
        return false
    }
    // 標簽1的上間距 >= 標簽2的高度 + 標簽2的上間距 -- 沒有相撞
    if(node1.offsetTop >= node2.offsetHeight + node2.offsetTop){
        return false
    }
    // 其他情況就是相撞
    return true
}
// 設置樣式的函數(shù)
function setStyle(ele, styleObj){
    for(var attr in styleObj){
        ele.style[attr] = styleObj[attr];
    }
}
// 獲取隨機顏色的函數(shù)
function getColor(){
    var color = '#';
    for(var i=0;i<3;i++){
        var hex = Math.floor(Math.random() * 256).toString(16)
        hex = hex.length === 1 ? '0' + hex : hex;
        color += hex;
    }
    return color
}