效果如下：
打砖块
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
}
