* { | |
margin: 0; | |
padding: 0; | |
list-style: none; | |
} | |
body { | |
height: 100vh; | |
background-color: deepskyblue; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
background-image: url(../../img/bg.jpg); | |
background-repeat: no-repeat; | |
background-size: cover; | |
} | |
.container { | |
width: 600px; | |
height: 360px; | |
background-color: white; | |
border-radius: 4px; | |
position: relative; | |
background-image: url(../../img/tu.jpg); | |
background-repeat: no-repeat; | |
background-size: cover; | |
background-position: center center; | |
} | |
.container div { | |
background-color: deepskyblue; | |
} | |
.container .zhuan { | |
position: absolute; | |
width: 50px; | |
height: 10px; | |
} | |
.container .ball { | |
position: absolute; | |
width: 12px; | |
height: 12px; | |
border-radius: 50%; | |
} | |
.container .ban { | |
width: 60px; | |
height: 8px; | |
bottom: 10px; | |
left: 270px; | |
position: absolute; | |
} | |
var dContainer = document.querySelector('.container'); | |
var dBall = document.querySelector('.ball'); | |
var dBan = document.querySelector('.ban'); | |
var dZhuan = document.getElementById('zhuan'); | |
var timer = null; | |
var isLeft = false; | |
var isRight = false; | |
//添加砖 | |
function setZhuan() { | |
for (var i = 0; i < 6; i++) { | |
for (var j = 0; j < 10; j++) { | |
var d = document.createElement("div"); | |
d.className = "zhuan"; | |
d.style.left = 25 + j * 56 + 'px'; | |
d.style.top = 30 + i * 15 + 'px'; | |
dZhuan.appendChild(d); | |
} | |
} | |
} | |
//设置小球 | |
function setBall() { | |
dBall.style.left = dBan.offsetLeft + (dBan.offsetWidth - dBall.offsetWidth) / 2 + 'px'; | |
dBall.style.top = dBan.offsetTop - dBall.offsetHeight + 'px'; | |
dBall.sx = Math.random() > 0.5 ? rand(3, 8) : -1 * rand(3, 8); | |
dBall.sy = -1 * rand(3, 8); | |
} | |
//小球运动 | |
function ballMove () { | |
dBall.style.left = dBall.offsetLeft + dBall.sx + 'px'; | |
dBall.style.top = dBall.offsetTop + dBall.sy + 'px'; | |
dBall.style.backgroundColor = randColor(); | |
if (dBall.offsetLeft <=0 || dBall.offsetLeft >= 588) { | |
dBall.sx *= -1; | |
} | |
if (dBall.offsetTop <=0) { | |
dBall.sy *= -1; | |
} | |
if (dBall.offsetTop >= 348) { | |
//停止游戏 | |
clearInterval(timer); | |
//去掉转 | |
dZhuan.innerHTML = ""; | |
//重新开始 | |
start(); | |
} | |
} | |
//挡板 状态 | |
window.onkeydown = function (e) { | |
if (e.keyCode === 37) { | |
isLeft = true; | |
} | |
if (e.keyCode === 39) { | |
isRight = true; | |
} | |
} | |
window.onkeyup = function (e) { | |
if (e.keyCode === 37) { | |
isLeft = false; | |
} | |
if (e.keyCode === 39) { | |
isRight = false; | |
} | |
} | |
function banMove() { | |
var left = dBan.offsetLeft; | |
if (isLeft) { left -= 12 } | |
if (isRight) { left += 12 } | |
left = left < 0 ? 0 : left; | |
left = left > 540 ? 540 : left; | |
dBan.style.left = left + 'px'; | |
} | |
//碰撞检测 | |
function check () { | |
//1. ban与ball | |
if(isCrash(dBall,dBan)) { | |
dBall.style.top = dBan.offsetTop - dBall.offsetHeight + 'px'; | |
dBall.sy *= -1; | |
} | |
//2.ball与砖 | |
var zs = dZhuan.children; | |
for (var i=0; i | |
if(isCrash(zs[i],dBall)) { | |
//小球继续运动 | |
dBall.sy *= -1; | |
// 删除砖 | |
dZhuan.removeChild(zs[i]); | |
i --; | |
} | |
} | |
} | |
//开始 | |
function start() { | |
setZhuan(); | |
setBall(); | |
//开启计时器 | |
timer = setInterval(function () { | |
// 1.挡板运动 | |
banMove(); | |
// 2.小球运动 | |
ballMove(); | |
// 3.碰撞检测 | |
check(); | |
}, 30) | |
} | |
start(); | |
//随机函数 | |
function rand(min, max) { | |
return Math.round(Math.random() * (max - min) + min); | |
} | |
//碰撞检测 | |
function isCrash (a,b) { | |
var l1 = a.offsetLeft; | |
var t1 = a.offsetTop; | |
var r1 = l1 + a.offsetWidth; | |
var b1 = t1 + a.offsetHeight; | |
var l2 = b.offsetLeft; | |
var t2 = b.offsetTop; | |
var r2 = l2 + b.offsetWidth; | |
var b2 = t2 + b.offsetHeight; | |
if (r2 | |
return false; | |
}else { | |
return true; | |
} | |
} | |
//随机颜色 | |
function randColor() { | |
return `rgb(${rand(0,255)},${rand(0,255)},${rand(0,255)})`; | |
} | |
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)