效果如下：
打磚塊
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;
// 計(jì)算磚塊的行數(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)
}
// 定義小球運(yùn)動(dòng)的x軸和y軸的速度
var speedX = 5; // 默認(rèn)向右移動(dòng)
var speedY = -5; // 默認(rèn)向上移動(dòng)
// 讓滑塊跟隨鼠標(biāo)在x軸移動(dòng)
brickBreaker.onmousemove = function(){
var e = window.event;
var x = e.pageX;
// 滑塊的left = 光標(biāo)位置 - 大盒子左間距 - 大盒子邊框厚度 - 滑塊的寬度/2
var l = x - this.offsetLeft - 1 - slider.offsetWidth/2;
// 限制l酱固，不能讓滑塊移動(dòng)到大盒子外面
if(l<0) l=0
if(l>this.clientWidth-slider.offsetWidth) l=this.clientWidth-slider.offsetWidth
// 將計(jì)算好的l設(shè)置給滑塊的left
slider.style.left = l + 'px'
}
// 點(diǎn)擊滑塊讓小球開始移動(dòng)
// 定義定時(shí)器變量
var timerId = null;
slider.onclick = function(){
// 獲取滑塊開始的left和top
var l = ball.offsetLeft;
var t = ball.offsetTop;
timerId = setInterval(function(){
// 如果小球撞墻了则果，就反彈 - 讓速度從正數(shù)變負(fù)數(shù)/從負(fù)數(shù)變正數(shù)
if(l<0){
speedX = -speedX
}
if(t<0){
speedY = -speedY
}
if(l>brickBreaker.clientWidth-ball.offsetWidth){
speedX = -speedX
}
// 如果撞到滑塊了碌嘀，就反方向移動(dòng)
if(collide(ball,slider)){
speedY = -speedY
}else{
// 如果沒有撞到滑塊，但是小球到了滑塊下了谓媒，相當(dāng)于沒有接住小球，游戲結(jié)束
if(ball.offsetTop + ball.offsetHeight > slider.offsetTop){
alert("GAME OVER")
clearInterval(timerId)
}
}
// 如果撞到磚塊了馁菜，就反方向移動(dòng)
// 遍歷所有磚塊
for(var i=0;i<bricks.children.length;i++){
if(collide(ball,bricks.children[i])){
speedY = -speedY
// 刪除撞到的這個(gè)磚塊
bricks.removeChild(bricks.children[i])
break;
}
}
// 給left和top計(jì)算移動(dòng)距離
l += speedX;
t += speedY;
// 將計(jì)算好的left和top設(shè)置給ball
ball.style.left = l + 'px'
ball.style.top = t + 'px'
},50)
}
// 判斷兩個(gè)標(biāo)簽是否相撞的函數(shù)
function collide(node1, node2){
// 標(biāo)簽1的左間距 + 標(biāo)簽1的寬度 <= 標(biāo)簽2的左間距 -- 沒有相撞
if(node1.offsetLeft + node1.offsetWidth <= node2.offsetLeft){
return false
}
// 標(biāo)簽1的左間距 >= 標(biāo)簽2的左間距 + 標(biāo)簽2的寬度 < -- 沒有相撞
if(node1.offsetLeft >= node2.offsetLeft + node2.offsetWidth){
return false
}
// 標(biāo)簽1的上間距 + 標(biāo)簽1的高度 <= 標(biāo)簽2的上間距 -- 沒有相撞
if(node1.offsetTop + node1.offsetHeight <= node2.offsetTop){
return false
}
// 標(biāo)簽1的上間距 >= 標(biāo)簽2的高度 + 標(biāo)簽2的上間距 -- 沒有相撞
if(node1.offsetTop >= node2.offsetHeight + node2.offsetTop){
return false
}
// 其他情況就是相撞
return true
}
// 設(shè)置樣式的函數(shù)
function setStyle(ele, styleObj){
for(var attr in styleObj){
ele.style[attr] = styleObj[attr];
}
}
// 獲取隨機(jī)顏色的函數(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
}
