jquery 挡板游戏

今天想写个挡板小游戏，经过一个上午的奋斗，终于完成了，测试地址：

以下为所有代码：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>jquery挡板游戏</title>
  6     <style type="text/css">
  7     html,body{background: #000;cursor:none;margin:0;}
  8     .paddle{position:fixed;bottom:12%;border:2px solid white;border-radius:8px;z-index:100;}
  9     .paddle {position:fixed;bottom:12%;border:2px solid white;border-radius:8px;z-index:100;overflow: hidden;}
 10     .block {float:left;box-shadow:inset 0 0 0 1px black,inset 0 0 0 2px white;border-radius:2px;width:10%;height:20px;color:white;}
 11     .blockact{float:left;width:10%;height:20px;border:0;background: transparent;}
 12     .block_box{overflow: hidden;}
 13     .wave {animation:wave .5s 1;}
 14     @keyframes wave {
 15       0%{box-shadow:0 0 0 0 transparent;}
 16       15% {box-shadow:0 0 0 10px;background:transparent;}
 17       100% {box-shadow:0 0 0 20px transparent;}
 18     }
 19     </style>
 20 </head>
 21 <body>
 22 <script type="text/javascript" src="js/jquery.js"></script>
 23 <script type="text/javascript">
 24     var ball,board,windowObj,H=0,ballX=0,ballY=0,moveX,moveY,blocks=20,blockwidth,blockheight,blockX,blockY;
 25     ball={"width":"25","speed":"1","borderRadius":"100%"};
 26     board={"width":"150",\'height\':"8"};
 27     windowObj={};
 28     $(\'body\').append(\'<div class="ball" style="width:\'+ball.width+\'px;height:\'+ball.width+\'px;border-radius:\'+ball.borderRadius+\';position:fixed"></div><div class="paddle" style="width:\'+board.width+\'px;height:\'+board.height+\'px;"></div>\');
 29     $(\'body\').append(\'<div class="block_box"></div>\');
 30     var h;
 31     for(i=0;i<blocks;i++){
 32         $(\'.block_box\').append(\'<div class="block"></div>\');
 33         h=i*100*Math.random();
 34         $(\'.block\')[i].style.background="hsla("+h+",100%,70%,1)";
 35     }
 36     setInterval(function(){
 37         $(\'.ball\').css({"background":"hsla("+H+",100%,70%,1)"});
 38         //H=Math.random()*360;
 39     },50);
 40     setInterval(function(){
 41         if(H<=360){
 42             H++;
 43         }else{
 44             H=0;
 45         }
 46     },25);
 47     $(document).bind(\'mouseenter touchstart\',function(e){
 48         e.preventDefault();
 49         $(this).bind(\'mousemove touchmove\',function(e){
 50             mouseX=e.originalEvent.pageX;
 51             $(\'.paddle\').css(\'left\',mouseX-parseInt(board.width/2)+\'px\');
 52         });
 53     });
 54     moveX=moveY=parseInt(ball.speed);
 55     setInterval(function(){
 56         var paddleX=Math.round($(\'.paddle\').position().left);
 57         var paddleY=Math.round($(\'.paddle\').position().top);
 58         width=$(window).width();
 59         height=$(window).height();
 60         ballX=ballX+(moveX);
 61         if(ballX>=(width-ball.width)){
 62             moveX=-parseInt(ball.speed);
 63         }else if(ballX<=0){
 64             moveX=+parseInt(ball.speed);
 65         }
 66         ballY=ballY+(moveY);
 67         if(ballY>= height-parseInt(ball.speed)){
 68             moveY=-parseInt(ball.speed);
 69         }else if(ballY<=0){
 70             moveY=+parseInt(ball.speed);
 71         }
 72         if(moveY>0 && ballY>=paddleY-parseInt(ball.width) && ballY<=paddleY+parseInt(board.height)){
 73             if (ballX>=paddleX-parseInt(ball.width) && ballX<=paddleX+parseInt(board.width)){
 74                 moveY=-parseInt(ball.speed);
 75                 $(\'.paddle\').addClass(\'wave\').css({
 76                     \'color\':\'hsla(\'+H+\',100%,70%,1)\',
 77                     \'border\':\'2px solid hsla(\'+H+\',100%,70%,1)\'
 78                 });
 79                 setTimeout(function(){
 80                     $(\'.wave\').removeClass(\'wave\');
 81                 },400);
 82             }
 83         }
 84         $(\'.ball\').css({
 85             \'-webkit-transform\':\'translate3D(\'+ballX+\'px,\'+ballY+\'px,0)\',
 86             \'-moz-transform\':\'translate3D(\'+ballX+\'px,\'+ballY+\'px,0)\'
 87         });
 88         if(moveY < 0 && ballY <=$(".block_box").height()){
 89             $(\'.block\').each(function(){
 90                 var blockWidth = $(this).width();
 91                 var blockHeight = $(this).height();
 92                 var blockX = Math.round($(this).position().left);
 93                 var blockY = Math.round($(this).position().top);
 94 
 95                 if (moveY < 0 && ballY >= blockY-parseInt(ball.width) && ballY <= blockY+blockHeight) {
 96                   if (ballX >= blockX-parseInt(ball.width) && ballX <= blockX+blockWidth) {
 97                     moveY = +parseInt(ball.speed);
 98                     $(this).addClass(\'wave\').css({\'background\':\'transparent\'}).delay(400).addClass(\'blockact\').removeClass(\'block\');
 99                   }
100                 }
101             });
102         }
103     },5);
104 </script>
105 </body>
106 </html>

这里面有以下几点需要注意：

1、如何判断小球与边界的问题；

2、如何判断小球与挡板的边界问题；

3、如何判断小球与“块”的边界问题；

4、如何解决“块"隐藏而不影响布局问题；

5、块颜色的随机变换；

6、块与小球触碰时的处理：我获取到block块的高度来判断，如果小球接近顶部块，则对顶部块进行each判断；（如果全局each判断使页面卡死。）