前端有趣的案例之HTML+CSS+JS-实现弹球

效果图：

 功能描述：

        点击开始游戏就可以玩碰碰球小游戏啦，若小球碰到下边框时，游戏结束。需要刷新页面后重新开始游戏。

index.HTML

<div id="contain">
  <div id="box">
    <div class="board"></div>
    <div class="ball"></div>
  </div>
  <button>开始游戏</button><br>
  <span>Score：</span>
  <span class="score">0</span> 
</div>

CSS样式

        1）contain选择器 的作用是使游戏布局在整个浏览器的中心
        2）box选择器 划定游戏区域的样式设计
        3）类选择器 board 和类选择器 ball 分别代表碰撞板和球的样式设计

<style>
  *{
    margin: 0;
    padding: 0;
  }
  #contain {
    width: 500px;
    height: 480px;
    margin: 0 auto;
    margin-top: 100px;
  }
  #box {
    width: 500px;
    height: 400px;
    margin: 0 auto;
    /* 子绝父相 */
    position:relative ;
    border: 1px solid #ccc;
  }
  .board {
    width: 100px;
    height: 10px;
    background-color: black;
    /* 子绝父相 */
    position:absolute;
    /* board水平居中 */
    left:200px;
    top: 80%;
  }
  .ball {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: coral;
    /* 子绝父相 */
    position: absolute;
    left:242px;
    top:76%;
  }
  button {
    width: 100px;
    background-color: dodgerblue;
    border-radius: 10%;
    color: white;
    padding: 4px 0;
    margin: 5px 0;
  }
</style>

JS代码：

<script src="../jquery.js"></script> 
<script>
//获取各所需元素
  var contain = document.getElementById("contain");
  var box = document.getElementById("box");
  var board = document.getElementsByClassName("board")[0];
  var ball = document.getElementsByClassName("ball")[0];
  var btn = document.getElementsByTagName("button")[0];
  var score = document.getElementsByClassName("score")[0];
  //分别代表board左距离、右距离；ball左距离、右距离
  var board_left,board_top,ball_left,ball_top ;
  var interval,flag=1,sum=0; 
  
  //设置小球的速度
  var speedX = -1,speedY = -1;
   
  //监听鼠标进入box
   box.onmousemove = function() {
     //事件对象(兼容)
    var e = event || window.event; 
    //更改board的left和top
    board_left = event.pageX - box.offsetLeft -50;
    board_top = event.pageY - box.offsetTop;  
    //检测board是否超出边框并更改board和ball位置
    
    if(board_left>=0 && board_left<=400) {
      board.style.left = board_left + "px";
      //flag的作用是防止点击按钮后再次进入Box后球的位置再变化
      if(flag) {
        ball_left = board_left + 45;
        ball.style.left = ball_left + "px";
      }  
    }  
    if(board_top>=0 && board_top<=390){
      board.style.top =  board_top + "px";
      if(flag) {
        ball_top = board_top - 15;
        ball.style.top = ball_top +"px";
      }
   } 
   
  }
  
  //监听按钮点击事件
  btn.onclick = function() {
    //清除定时器,防止定时器重叠
    clearInterval(interval);
    //flag=0后ball不再随board位置变化
    flag=0;
    //设置定时器
    interval =  setInterval(function(){   
      ball_left += speedX;
      ball_top += speedY;

      if(ball_left>=0 && ball_left<=485){
        ball.style.left = ball_left + "px";
      }
      if(ball_top>=0 && ball_top<=385){
        ball.style.top = ball_top + "px";
      }

      //球的方向改变
      //撞d到左边右边边框
      if(ball_left<0|| ball_left>485 ){
        speedX = -speedX;  
      }else if(ball_top<0){//撞到上边边框边框
        speedY = -speedY; 
      }  
     
      //检测ball碰到board
      if((ball_top+15) >= board_top && ball_left>=board_left && ball_left <= (board_left+50)){
        speedX = -speedX; 
        speedY = -speedY;
        //分数改变
        sum+=5;
        score.innerHTML = sum;

      }
      //游戏结束
      if(ball_top>385 ){
        alert("游戏结束，刷新后重新开始");
        clearInterval(interval);
      }
    },5)    
  }
</script>

JS代码详解：

        1、JS核心代码解析----监听鼠标移入
                1）事件对象要使用兼容写法用事件对象是为了获取 board 左距离,右距离和 ball 左距离,右距离,方便改动 board 和 ball 的位置,不了解事件对象的可看JS事件对象
                2） board_left = event.pageX - box.offsetLeft -50; 这句代码中 board_left 之所以 -50 是为了实现鼠标移动时指向的是 *board* 的正中间，更加美观
                3）在两个 if语句 中嵌套使用了 if语句，并且使用了一个标志 变量 flag。外层 if语句 目的是限制 *board* 能移动的范围，内层 if语句 和 变量 flag 是为了防止点击了游戏开始按钮后，在游戏过程中出现当鼠标再进入游戏区域时出现小球运动错误的bug（有兴趣可以试试替换成下面的代码会出现什么情况）

if(board_left>=0 && board_left<=400) {
   board.style.left = board_left + "px";
   ball_left = board_left + 45;
   ball.style.left = ball_left + "px";
}  
    
if(board_top>=0 && board_top<=390){
   board.style.top =  board_top + "px";
   ball_top = board_top - 15;
   ball.style.top = ball_top +"px";
}

以下为 监听鼠标移入的正确代码展示

 //监听鼠标进入box
   box.onmousemove = function() {
     //事件对象(兼容)
    var e = event || window.event; 
    //更改board的left和top
    board_left = event.pageX - box.offsetLeft -50;
    board_top = event.pageY - box.offsetTop;  
    //检测board是否超出边框并更改board和ball位置
    
    if(board_left>=0 && board_left<=400) {
      board.style.left = board_left + "px";
      //flag的作用是防止点击按钮后再次进入Box后球的位置再变化
      if(flag) {
        ball_left = board_left + 45;
        ball.style.left = ball_left + "px";
      }  
    }  
    
    if(board_top>=0 && board_top<=390){
      board.style.top =  board_top + "px";
      if(flag) {
        ball_top = board_top - 15;
        ball.style.top = ball_top +"px";
      }
   } 
   
  }

        2、JS核心代码解析----监听游戏开始按钮点击事件

                1）清除定时器，防止出现定时器重叠现象
                2）不要忘了 flag变量 ，进入点击事件立即将flag变量 置零（建议结合上一目录监听鼠标移入同时分析）

 //清除定时器,防止定时器重叠
clearInterval(interval);
 //flag=0后ball不再随board位置变化
flag=0;

3、JS核心代码解析----监听球的碰撞

        1）球碰到上边界、左右边界时，要改变运动方向，即要考虑在什么情况下将speedX或speedY改为相反数
        2）球碰到碰撞板时speedX和speedY都要改为相反数，相应的游戏分数要改变
        3）当球碰到下边界时提示游戏结束，清除定时器

if(ball_left>=0 && ball_left<=485){
    ball.style.left = ball_left + "px";
 }
if(ball_top>=0 && ball_top<=385){
    ball.style.top = ball_top + "px";
 }
 //球的方向改变
//撞到左边右边边框
if(ball_left<0|| ball_left>485 ){
    speedX = -speedX;  
}else if(ball_top<0){//撞到上边边框边框
   speedY = -speedY; 
 }  
     
//检测ball碰到board
if((ball_top+15) >= board_top && ball_left>=board_left && ball_left <= (board_left+50)){
    speedX = -speedX; 
    speedY = -speedY;
//分数改变
    sum+=5;
    score.innerHTML = sum;

      }
//游戏结束
if(ball_top>385 ){
    alert("游戏结束，刷新后重新开始");
    clearInterval(interval);
}