打砖块

效果如下：

打砖块

html结构代码：

<!-- 大盒子 -->
<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;
// 计算砖块的行数和列数
var col = bricks.clientWidth / brickWidth
var row = bricks.clientHeight / brickHeight
// 创建砖块并放在砖块的盒子中
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(){
        // 如果小球撞墙了，就反弹 - 让速度从正数变负数/从负数变正数
        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<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)
}
// 判断两个标签是否相撞的函数
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
}
// 设置样式的函数
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
}