首先是要创建一个游戏面板。
<div id="gamepanel">
</div>
对应的css为#gamepanel{position:absolute;left:50%;top:50%;width:732px;height:372px;background:#afdfe4;margin-left:-366px;margin-top:-186px;}
然后利用js创建砖块、球、以及板
//生成砖块
function proZK(){
var gamePanel = document.getElementById('gamepanel');
var l = 6;
var t = 20;
var initL = 6;
var row = 1;
var rowsuo = 60;
for(var i=1;i<=210;i++){
if(i==61||i==111||i==151||i==181||i==201){
l = initL+row*rowsuo;
t=t+12;
row = row+1;
}
eval('var zk'+i+'=document.createElement("zk")');
eval('zk'+i+'.className="zk"');
eval('zk'+i+'.setAttribute("name","zk")');
eval('zk'+i+'.id="zk'+i+'"');
eval('zk'+i+'.style.left="'+l+'px"');
eval('zk'+i+'.style.top="'+t+'px"');
eval('gamePanel.appendChild(zk'+i+')');
l=l+12;
}
t=t+60;
var rows = 4;
l = initL+5*rowsuo;
for(var i=211;i<=420;i++){
if(i==221||i==241||i==271||i==311||i==361){
l = initL+rows*rowsuo;
t=t+12;
rows = rows-1;
}
eval('var zk'+i+'=document.createElement("zk")');
eval('zk'+i+'.className="zk"');
eval('zk'+i+'.setAttribute("name","zk")');
eval('zk'+i+'.id="zk'+i+'"');
eval('zk'+i+'.style.left="'+l+'px"');
eval('zk'+i+'.style.top="'+t+'px"');
eval('gamePanel.appendChild(zk'+i+')');
l=l+12;
}
}
//生成板和球
function proBallAndPanel(){
var gamePanel = document.getElementById('gamepanel');
var panel = document.createElement("div");
panel.className="panel";
panel.id="panel";
panel.style.left="300px";
panel.setAttribute("name","panel");
gamePanel.appendChild(panel);
var ball = document.createElement("div");
ball.className="ball";
ball.name="ball";
ball.id="ball";
ball.style.left="360px";
ball.style.top=gamePanel.offsetHeight-17+"px";
ball.setAttribute("name","ball");
gamePanel.appendChild(ball);
}
球、板以及砖块的css
.panel{width:132px;height:5px;background:#000;position:absolute;bottom:0px;}
.ball{width:10px;height:10px;background:#000;border:1px solid #72baa7;position:absolute;border-radius:10px;}
.zk{width:10px;height:10px;background:#72baa7;border:1px solid #72baa7;position:absolute;}
板、球、砖块都有以后就要设计球的运动了。
上面的js中，设置球的absolute为position，这样就可以通过改变球的left和top属性，让球移动起来。
球每次移动时候left和top的长度可以根据数学函数sin和cos来确定，例如x=sin（2math.pi/360*和水平方向的角度） y=cos(2math.pi/360*和水平方向的角度)
我最开始做的时候是直接 让left和top是1:1增长的，这样简单。
球动起来之后，要判断球反弹以及游戏失败的集中情况：
//碰到上墙壁以及板的时候，改变球上下运动的方向
if(ball.offsetTop<=0||((gamePanel.offsetHeight-ball.offsetTop<=ball.offsetHeight+panel.offsetHeight)&&(ball.offsetLeft- panel.offsetLeft<panel.offsetWidth+ball.offsetWidth)&&(ball.offsetLeft-panel.offsetLeft>-ball.offsetWidth))){
pengTopflag = 'true';
}
//碰到左右墙壁的时候，改变球左右运动的方向
if(ball.offsetLeft<=0||(gamePanel.offsetWidth-ball.offsetLeft<=ball.offsetWidth)){
pengLeftflag = 'true';
}
//如果板未接住球，则游戏失败
if(gamePanel.offsetHeight-ball.offsetTop<ball.offsetHeight+panel.offsetHeight){
alert('游戏失败,请重新开始');
window.location.reload();
return;
}
上面的几种情况相对简单，最麻烦的是球和砖块的碰撞
在球移动的过程中，要循环每个砖块。判断球是否与他们相撞。
球和砖块相撞其实也不难，难的是不知道球从哪个方向过来。
以下是判断球和砖块相撞以及反弹方向的详细过程
首先取得下面的四个差值
//砖块的左边和球的右边的差
var zkL = zk[i].offsetLeft-ball.offsetWidth-ball.offsetLeft;
//砖块的右边和球的左边的差
var zkR = zk[i].offsetLeft+zk[i].offsetWidth-ball.offsetLeft;
//砖块的上边和球的下边的差
var zkT = zk[i].offsetTop-ball.offsetHeight-ball.offsetTop;
//砖块的下边和球的上边的差
var zkB = zk[i].offsetTop+zk[i].offsetHeight-ball.offsetTop;
当zkL<=0&&zkR>=0&&zkT<=0&&zkB>=0的时候，发生碰撞。
然后再根据ballleft和balltop的正负来判断球之前的运动方向。
如果是向上右移动的，那和球最先碰撞的只能是砖块的左下。然后再判断上面的左和下的差值谁最小就是碰撞的哪边，然后改变其运动方向。
//球和砖块重叠的时候
if(zkL<=0&&zkR>=0&&zkT<=0&&zkB>=0){
delZK(zk[i]);
count++;
scorecon.innerHTML=count;
if(ballleft>0&&balltop<0){
if(Math.abs(zkL)<=Math.abs(zkB)){
pengLeftflag = 'true';
}
if(Math.abs(zkL)>=Math.abs(zkB)){
pengTopflag = 'true';
}
}else if(ballleft>0&&balltop>0){
if(Math.abs(zkL)<=Math.abs(zkT)){
pengLeftflag = 'true';
}
if(Math.abs(zkL)>=Math.abs(zkT)){
pengTopflag = 'true';
}
}else if(ballleft<0&&balltop<0){
if(Math.abs(zkR)<=Math.abs(zkB)){
pengLeftflag = 'true';
}
if(Math.abs(zkR)>=Math.abs(zkB)){
pengTopflag = 'true';
}
}else if(ballleft<0&&balltop>0){
if(Math.abs(zkR)<=Math.abs(zkT)){
pengLeftflag = 'true';
}
if(Math.abs(zkR)>=Math.abs(zkT)){
pengTopflag = 'true';
}
}
}
最后是板的运动。板运动直接通过键盘事件：
//键盘事件
var ballFlag = "stop";
document.onkeydown=function(evt){
var gamePanel = document.getElementById('gamepanel');
evt = (evt) ? evt : ((window.event) ? window.event : "");
var keyCode = evt.keyCode ? evt.keyCode : (evt.which ? evt.which : evt.charCode);
//按下键盘空格键的时候
if(keyCode == 32){
if(ballFlag == 'stop'){
moveBall();
ballFlag = 'move';
}else if(ballFlag == 'move'){
stopBall();
ballFlag = 'stop';
}
}
//按下键盘左箭头
if(keyCode == 37){
//板
var panel = document.getElementById('panel');
panel.style.left = panel.offsetLeft-12+"px";
if(panel.offsetLeft < 0 ){
panel.style.left = gamePanel.offsetWidth-panel.offsetWidth+"px";
}
}
//按下键盘右箭头
if(keyCode == 39){
var panel = document.getElementById('panel');
panel.style.left = panel.offsetLeft+12+"px";
if(panel.offsetLeft > gamePanel.offsetWidth-panel.offsetWidth){
panel.style.left = 0+"px";
}
}
}
至此，简易版的打砖块就可以了。
过程描述的有些简单，望大神勿喷，不足之处请大家指出。