因爲疫情快五個月沒見女朋友了，寫個小遊戲讓她開心一下

掐掐手指一算，這個寒假可有四個多月長了！！！而且都快五個月沒見到女朋友了！！！突發奇想，寫個小遊戲讓她開心開心。
雖然可以搜得到很多大佬寫的小遊戲，但覺得自己寫的會更有意義！

一、遊戲描述

點擊開始遊戲就可以玩碰碰球小遊戲啦
若小球碰到下邊框時，遊戲結束。需要刷新頁面後重新開始遊戲

二、遊戲展示

三、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核心代碼

1、全部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>

2、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";
      }
   } 
   
  }

3、JS核心代碼解析----監聽遊戲開始按鈕點擊事件

（1）首先要清除定時器，防止出現定時器重疊現象
（2）特別不要忘了 flag變量 ，進入點擊事件立即將flag變量 置零 （建議結合上一目錄監聽鼠標移入同時分析）

 //清除定時器,防止定時器重疊
clearInterval(interval);
 //flag=0後ball不再隨board位置變化
flag=0;

4、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);
}

歐啦！！代碼拿去哄女朋友叭！！不用謝嘿嘿
另外代碼還有很多需要改進的地方，希望各位大佬多多提點！！！