打砖块

效果如下：

打砖块

html结构代码：

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;
// 计算砖块的行数和列数
var col = bricks.clientWidth / brickWidth
var row = bricks.clientHeight / brickHeight
// 创建砖块并放在砖块的盒子中
for(var i=0;ithis.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(){
        // 如果小球撞墙了，就反弹 - 让速度从正数变负数/从负数变正数
        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{
            // 如果没有撞到滑块，但是小球到了滑块下了，相当于没有接住小球，游戏结束
            if(ball.offsetTop + ball.offsetHeight > slider.offsetTop){
                alert("GAME OVER")
                clearInterval(timerId)
            }
        }
        // 如果撞到砖块了，就反方向移动
        // 遍历所有砖块
        for(var i=0;i= 标签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
}
// 设置样式的函数
function setStyle(ele, styleObj){
    for(var attr in styleObj){
        ele.style[attr] = styleObj[attr];
    }
}
// 获取随机颜色的函数
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
}