<!-- HTML結構 -->
<div class="content">
    <div class="game"></div>
    <div class="container">
      <h3>打磚塊小游戲</h3>
      <hr />
      <center>
        <button id="start"
          >開始游戲</button>
      </center>
      <div ></div>
      <center>
        <button id="reset"
          >再來一局</button>
      </center>
      <center>
        <!-- 分數 -->
        <div id="score"></div>
      </center>
    </div>

  </div>

<!-- CSS樣式 -->
<style>
    * {
      padding: 0;
      margin: 0;
    }

    /* body>div {
      width: 550px;
      height: 520px;
      display: flex;
      margin: 20px auto;
    } */

    .container {
      width: 220px;
      height: 500px;
      border: 1px solid rgba(145, 146, 146, 0.918);
      margin-top: 20px;
      margin-right: 120px;
    }

    h3 {
      text-align: center;
      font-size: 26px;
      color: rgba(145, 146, 146, 0.918);
      margin-bottom: 2px;
    }

    .content {
      position: relative;
      width: 800px;
      height: 600px;
      margin: 0 auto;
      overflow: hidden;
      display: flex;
    }

    .game {
      position: relative;
      width: 456px;
      height: 500px;
      border: 1px solid rgba(145, 146, 146, 0.918);
      margin: 20px auto 0;
    }

    .brick {
      position: absolute;
      width: 50px;
      height: 20px;
      background-color: rgb(238, 17, 28);
    }

    /* 畫擋板 */
    .flap {
      position: absolute;
      width: 120px;
      height: 10px;
      bottom: 0;
      left: 0;
      background-color: royalblue;
    }

    .ball {
      position: absolute;
      width: 20px;
      height: 20px;
      bottom: 10px;
      left: 52px;
      border-radius: 50%;
      background-color: blue;
    }

    #score {
      width: 100px;
      height: 30px;
      right: 0;
      top: 10%;
      color: rgba(145, 146, 146, 0.918);
    }
  </style>

<!-- JS結構 -->
  <script>
    /*
    // 獲取canvas元素
    const canvas = document.getElementById('canvas');
    // 獲取到上下文，創建context對象
    const ctx = canvas.getContext('2d');
    let raf;
    // 定義一個小球
    const ball = {
      x: 100,  // 小球的 x 坐標
      y: 100,  // 小球的 y 坐標
      raduis: 20, // 小球的半徑
      color: 'blue', // 小球的顏色
      vx: 3, // 小球在 x 軸移動的速度
      vy: 2, // 小球在 y 軸移動的速度
      // 繪制方法
      draw: function () {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.raduis, Math.PI * 2, false);
        ctx.closePath();
        ctx.fillStyle = this.color;
        ctx.fill();
      }
    }
    // 該函數為繪制函數：主要邏輯就是清空畫布，重新繪制小球
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ball.draw();
      // 進行邊界的判斷
      if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
        ball.vy = -ball.vy;
      }
      if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
        ball.vx = -ball.vx;
      }
      ball.x += ball.vx;
      ball.y += ball.vy;
      raf = window.requestAnimationFrame(draw);
    }
    raf = window.requestAnimationFrame(draw);
    */
    // 加載窗口 = init
    window.onload = init;
    function init() {
      // 獲取元素
      let gameArea = document.getElementsByClassName("game")[0];
      // 設置10列
      let rows = 10;
      // 設置8行
      let cols = 8;
      // 磚塊與磚塊之間的寬度
      let b_width = 58;
      // 磚塊與磚塊之間的高度
      let b_height = 28;
      // 用數組的形式來裝磚塊
      let bricks = [];
      // 小球的X軸方向（上下左右來回的運動）
      let speedX = 5;
      // 小球Y軸方向（上下左右來回的運動）
      let speedY = -5;
      // 在內部里，小球上下左右來回的運動，【小球碰撞到磚塊 = null】
      let interId = null;
      // 左邊距離為0
      let lf = 0;
      // 上邊距離為0
      let tp = 0;
      // 擋板
      let flap;
      // 擋板上面的小球
      let ball;
      // 分數記錄（初始值為0）
      let n = 0;
      // 獲取開始游戲按鈕的元素
      let st = document.getElementById("start");
      // 獲取再來一局（重新渲染）按鈕的元素
      let rt = document.getElementById("reset");
      // 獲取分數記錄的元素
      let score = document.getElementById("score");
      score.innerHTML = "分數：" + n;
      // 提供（渲染）Dom[渲染磚塊] 方法
      renderDom();
      // 鍵盤的操作（A與D;askm查詢：A：65，需-32，D：68，需+32）方法
      bindDom();
      // 進行渲染磚塊
      function renderDom() {
        getBrick();
        // 畫磚塊
        function getBrick() {
          for (let i = 0; i < rows; i++) {
            let tp = i * b_height;
            let brick = null;
            for (let j = 0; j < cols; j++) {
              let lf = j * b_width;
              brick = document.createElement("div");
              brick.className = "brick";
              brick.setAttribute("style", "top:" + tp + "px;left:" + lf + "px;");
              // 獲取背景的顏色
              brick.style.backgroundColor = getColor();
              bricks.push(brick);
              gameArea.appendChild(brick);
            }
          }
        }
        //添加擋板
        flap = document.createElement("div");
        flap.className = "flap";
        gameArea.appendChild(flap);
        //添加擋板+小球
        ball = document.createElement("div");
        ball.className = "ball";
        gameArea.appendChild(ball);
      }
      // 鍵盤的操作
      function bindDom() {
        flap = document.getElementsByClassName("flap")[0];
        window.onkeydown = function (e) {
          let ev = e || window.event;
          // 左邊移動
          let lf = null;
          // A鍵往左移動
          if (e.keyCode == 65) {
            lf = flap.offsetLeft - 32;
            if (lf < 0) {
              lf = 0;
            }
            flap.style.left = lf + "px";
            // D鍵往右移動
          } else if (e.keyCode == 68) {
            lf = flap.offsetLeft + 32;
            if (lf >= gameArea.offsetWidth - flap.offsetWidth) {
              lf = gameArea.offsetWidth - flap.offsetWidth
            }
            flap.style.left = lf + "px";
          }
        }
        // 為開始游戲按鈕添加點擊事件
        st.onclick = function () {
          // 實現小球上下左右不斷移動
          ballMove();
          st.onclick = null;
        }
        // 為再來一局按鈕添加點擊事件
        rt.onclick = function () {
          window.location.reload();
        }
      }
      // 獲得磚塊的顏色 rgb ===>>> 隨機顏色；random() = 隨機數方法
      function getColor() {
        let r = Math.floor(Math.random() * 256);
        let g = Math.floor(Math.random() * 256);
        let b = Math.floor(Math.random() * 256);
        return "rgb(" + r + "," + g + "," + b + ")";
      }
      // 實現小球上下左右不斷移動
      function ballMove() {
        ball = document.getElementsByClassName("ball")[0];
        interId = setInterval(function () {
          // 左邊（X軸方向）的移動速度
          lf = ball.offsetLeft + speedX;
          // 上邊（Y軸方向）的移動速度
          tp = ball.offsetTop + speedY;
          // 用for（）{}循環實現小球與磚塊碰撞后從而消失
          for (let i = 0; i < bricks.length; i++) {
            let bk = bricks[i];
            // if進行判斷，判斷小球與磚塊接觸 【若：接觸到：面板的寬度：offset ===>>> 抵消的意思，使它/2，簡單的說就是：X軸=寬，Y軸=高，邊距：上邊offsetTop；左邊offsetLeft.從什么地方反回到某一個地方接觸一次則記為碰撞一次，從而進行讓磚塊抵消】
            if ((lf + ball.offsetWidth / 2) >= bk.offsetLeft && (lf + ball.offsetWidth / 2) <= (bk.offsetLeft + bk.offsetWidth) && (bk.offsetTop + bk.offsetHeight) >= ball.offsetTop) {
              // 執行時 = none時 ===>>> 消失 
              bk.style.display = "none";
              // Y軸的移動速度
              speedY = 5;
              // 小球與磚塊碰撞抵消后，分數+1（n++）
              n++;
              score.innerHTML = "分數:" + n;
            }
          }

          if (lf < 0) {
            speedX = -speedX;
          }
          if (lf >= (gameArea.offsetWidth - ball.offsetWidth)) {
            speedX = -speedX;
          }
          if (tp <= 0) {
            speedY = 5;
          } else if ((ball.offsetTop + ball.offsetHeight) >= flap.offsetTop && (ball.offsetLeft + ball.offsetWidth / 2) >= flap.offsetLeft && (ball.offsetLeft + ball.offsetWidth / 2) <= (flap.offsetLeft + flap.offsetWidth)) {
            speedY = -5;
          } else if (ball.offsetTop >= flap.offsetTop) {
            // 游戲結束
            gameOver();
          }
          ball.style.left = lf + 'px';
          ball.style.top = tp + "px";
          // 讓小球移動是時間參數隨便給
        }, 40)
      }

      //判斷游戲是否結束
      function gameOver() {
        // 彈框提示游戲該結束
        alert("游戲結束！" + "\n" + score.innerHTML);
        // 清除間隔
        clearInterval(interId);
      }
    }
  </script>