比较low的实现了一个简易的打方块游戏，记录一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{margin: 0;padding: 0;list-style: none;}
#container{
width:500px;
height:500px;
border:1px solid #ccc;
position: relative;
margin:0 auto;
}
#li_box{
width:500px;
height:500px;
}
li{position: absolute; width:100px; height:50px;}
#pand{ position: absolute;bottom:0px; left:50px; width:150px; height:10px; background:darkgreen; border-radius:5px;}
#ball{ position: absolute; bottom:10px; left:125px;border-radius:50%;background:darkslategray;height:20px;width:20px;}
#score{position: absolute; right:-80px;font-size:20px;color: cadetblue;font-weight: bold; top:0px;}
</style>
<div id="container">
<ul id="li_box">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div id="pand"></div>
<div id="ball"></div>
<div id="score">0</div>
</div>
</head>
<body>
<script>
function $( dom ) {
return document.getElementById(dom);
};
Block.prototype = {
init(){
let i = 0,tmpW = 0; tmpH = 0;
for(; i< this.len;i++){
this.lis[i].style.background = this.randColor();
if( i % 5 == 0 && i>0 ){
tmpW = 0;
tmpH+=this.h;
};
this.lis[i].style.left = tmpW+'px';
this.lis[i].style.top = tmpH +'px';
tmpW+=this.w;
};
},
randColor(){
return '#' + ( Math.random() * 0xffffff<<0 ).toString(16);
},move(){
this.pand = $('pand');
let thats = this;
document.addEventListener('keydown',function(e){
let keys = e.keyCode ,
pos = thats.pand.offsetLeft ,
step = thats.moveStep ,
pandW = thats.pand.offsetWidth;
if( pos <= step ){
pos = step;
}else if( pos >= thats.conW -pandW - step){
pos = thats.conW - pandW - step;
}
switch (keys) {
case 37:
thats.pand.style.left = pos - step + "px";
break;
case 39:
thats.pand.style.left = pos + step + "px";
default:
break;
}
});
},ballMove(){
let thats = this ,timer = null;
let
pandH = $('pand').offsetHeight,
pandW = $('pand').offsetWidth,
ballH = 20;
timer = setInterval(()=>{
let ballX = thats.ball.offsetLeft,
ballY = thats.ball.offsetTop,
pandX = $('pand').offsetLeft,
pandY = $('pand').offsetTop;
if( ballX >= thats.conW - $("ball").offsetWidth ){
thats.fX = -1;
}else if( ballX <= 0 ){
thats.fX = 1;
};
if( ballY >= thats.conH - ballH && thats.ball.offsetLeft >= pandX && thats.ball.offsetLeft <= pandW +pandX){
thats.fY = -1;
console.log('回弹');
}else if( ballY <= 0 ){
thats.fY = 1;
}else if( ballY >= thats.conH -ballH){
window.confirm('over，按f5刷新再来一次')
clearInterval(timer)
}
ballY+=thats.fY*thats.speed;
ballX+=thats.fX*thats.speed;
thats.ball.style.left = ballX+"px";
thats.ball.style.top = ballY+"px";
thats.blockChange();
},thats.duration);
},blockChange(){
let i = 0;
for( ; i < this.len ; i++ ){
let tmpDistanceY = this.lis[i].offsetHeight + this.lis[i].offsetTop,
tmpDistanceX = this.lis[i].offsetWidth + this.lis[i].offsetLeft,
tmpW = this.lis[i].offsetWidth,
ballLeft = this.ball.offsetLeft,
ballW = this.ball.offsetWidth,
ballTop = this.ball.offsetTop;
if( ballTop <= tmpDistanceY && ballLeft >= this.lis[i].offsetLeft && ballLeft <= tmpDistanceX){
this.lis[i].style.display = 'none';
this.fY = 1;
this.score+=1;
$('score').innerHTML = '得分：'+this.score;
}
}
}
}
function Block(param) {
this.duration = 20; //小球多久运行一次
this.moveStep = 15;
this.ball = $('ball');
this.speed = 10;
this.fX = 1;
this.fY = -1;
this.score = 0;
this.conW = $('container').clientWidth;
this.conH = $('container').clientHeight;
this.lis = document.querySelectorAll('li');
this.w = this.lis[0].offsetWidth;
this.h = this.lis[0].offsetHeight;
this.len = this.lis.length;
this.init();
this.move();
this.ballMove();
}
var block = new Block();
</script>
</body>
</html>
