自己动手教你一步一步开发打砖块（小游戏）

来源：互联网发布：四川广电网络在线缴费编辑：程序博客网时间：2024/05/22 05:21

最近没事，业余时间开发了一个打砖块的小游戏。在这里和大家一起分享下，不足之处还望过路的各位大神多多指教。想详细了解源码的可以访问http://www.11what.com或者加群

188087193讨论

首先是要创建一个游戏面板。

对应的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";
     }
       }
   }

至此，简易版的打砖块就可以了。

过程描述的有些简单，望大神勿喷，不足之处请大家指出。

0 0