一个简单的打砖块游戏实现

最新推荐文章于 2023-03-23 00:05:02 发布

song_4

最新推荐文章于 2023-03-23 00:05:02 发布

阅读量1.7k

点赞数

分类专栏：网站小白文章标签：游戏 css jquery

本文链接：https://blog.csdn.net/song_4/article/details/42611907

版权

网站小白专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC >
<html lang="zh-CN">
<head>
<link href="bootstrap.css" type="text/css" rel="stylesheet" />
<style type="text/css">

#brick-wall{
  width: 600px;
  height: 500px;
  position:relative;
  margin:20px auto;
  background-color: white;
  position:relative; 
  border: 4px solid black;
  box-shadow: 0px 0px 10px #123456;
}

#ball{
  width: 20px;
  height: 20px;
  border-radius: 20px;
  background-color: #123456;
  position:relative;
}

#holder{
  width: 100px;
  height: 8px;
  background-color: #123456;
  position:relative;
}


.brick_1{  
    width:55px;
    height:20px;
    background-color: #FC2B06;
    position:absolute;  
}  

.brick_2{  
    width:55px;
    height:20px;
    background-color: #FC9206;
    position:absolute;  
} 

.brick_3{
    width:55px;
    height:20px;
    background-color: #FCCA06;
    position:absolute;  
}

.brick_4{
    width:55px;
    height:20px;
    background-color: #ECFC06;
    position:absolute;  
}

</style>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
    <body>
      <div id="brick-wall">
      </div>
    </body>
<script src="jquery.js"></script>
<script>

  for(var i=1;i<=8;i++){  
    for(var j=1;j<=9;j++){  
        var di = document.createElement("div");  
        di.id="div"+i+"_"+j;
        var dom=$(di);
        //di.className="brick";
        di.style.top = 1.8*i*15-20;
        di.style.left= j*65-57;
        if(i<=2)
          dom. ass("brick_4");
        else if(i<=4)
          dom.addClass("brick_3");
        else if(i<=6)
          dom.addClass("brick_2");
        else if(i<=8)
          dom.addClass("brick_1");
        $("#brick-wall").append(di); 
    }
  }


  var kflag=false;
  var qiu = document.createElement("div");  
  qiu.id="ball";
  qiu.style.top = 450;
  qiu.style.left= 280;
  $("#brick-wall").append(qiu); 
  
  var qiux=280;
  var qiuy=450;
  var zx=10;
  var zy=-10;
  var banleft=240;
  var rp=setInterval("qiu_move()",60);
  var qiu_move= function(){
    qiux+=zx;  
    qiuy+=zy; 
    qiu.style.left = qiux;     
    qiu.style.top = qiuy; 
    if(qiux>=567 || qiux<=0){
      zx=-zx;
    }
    if(qiuy<=0 || qiuy>=450){
      zy=-zy;
    }
    
    if(qiuy>=450&&(qiux<banleft||qiux>banleft+100)){
      clearInterval(rp);  
      qiu.style.top = 450;
      qiu.style.left= 280;
      ban.style.top = 450;
      ban.style.left= 240;
      qiux=280;
      qiuy=450;
      banleft=240;
      kflag=false;
    }
    else{

      loop1:
      for(var i=1;i<=8;i++){  
        for(var j=1;j<=9;j++){ 
          var obj = document.getElementById("div"+i+"_"+j);
          var obj_dom=$(obj);
          if(obj===null) continue;
          var r=10;
          var x=obj.style.left;
          var y=obj.style.top;
          var ranx=parseInt(x);
          var rany=parseInt(y);
          var ranx_right=ranx+50;
          var rany_bottom=rany+20;
          if(qiux>=ranx-r && qiux<= ranx_right+r && qiuy>= rany-r && qiuy<= rany_bottom + r ){

            var pattern=/\d+/;
            var s=obj.className;
            var a=s.match(pattern);
            if(rany -qiuy <=r && rany-qiuy >=0 || qiuy-rany_bottom<=r && qiuy-rany_bottom >=0){
              zy=-zy;
              }
            if(ranx-qiux <=r && ranx-qiux >=0 || qiux-ranx_right<=r && qiux-ranx_right>=0){
              zx=-zx;
              }
            if (a==1)
              obj.remove();
            if(a!=1){
              obj_dom.removeClass("brick"+"_"+a);
              a--;
              obj_dom.addClass("brick"+"_"+a);
              }
    
      }
    }
  }

  }
};

var ban = document.createElement("div");  
  ban.id="holder";
  ban.style.top = 450;
  ban.style.left= 240;
  $("#brick-wall").append(ban);
  

  var banleft = 240;
  var bs = 25;
  var kflag=false;
  $(document).keydown(function(e){
    var kcode = e.keyCode;
    switch(kcode){
      case 32: //开始结束

        if(!kflag){
          qiu_move();
          rp=setInterval("qiu_move()",60);
          kflag=true;
        }

        break;

      case 37: // left
        for(var i = 0;i<bs;i++){  
            if(banleft-1!=-1){  
              banleft-=1; 
              ban.style.left = banleft;
            }
        }
      break;

      case 39: // right
        for(var i = 0;i<bs;i++){  
            if(banleft+1!=494){  
                banleft+=1; 
                ban.style.left = banleft;
            }
        }
      break;
      }
  });

</script>
</html>

song_4

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
一个简单的打砖块游戏实现

#brick-wall{ width: 600px; height: 500px; position:relative; margin:20px auto; background-color: white; position:relative; border: 4px solid black; box-shadow: 0px 0px 10px #123456;}
复制链接

扫一扫