JS制作蔡徐坤打籃球小游戲(雞你太美？)

　一、前提：

　　和我之前寫的 QT小球游戲 差不多（指的是實現方法）。

　　感謝大佬的 Github：https://github.com/kasuganosoras/cxk-ball 外加游戲網頁：https://cxk.ssrr.one/

　　更新：

　　　　應網友要求，更新了背景音樂：只因你太美（雞你太美）.mp3 + 其他小更新部分。

　　背景音樂（若打開無音樂，請刷新重試）：

　　 

　　整體界面(index.html)

　　

　二、解析：

　　1：Game.js:

　　　　11.包括背景圖的繪制，磚塊，積分榜

　　　　

// 繪制分數
    this.context.fillText(obj.text + obj.allScore, obj.x, obj.y)
// 繪制關卡
    this.context.fillText(obj.textLv + obj.lv, this.canvas.width - 100, obj.y)

　　

　　　　12.游戲晉級+下一關+判斷通關條件

　　　失敗：

 this.context.fillText('蔡徐坤，你球掉了！', 404, 226)

　　下一關:

　　

 // 繪制提示文字
    this.context.font = '32px Microsoft YaHei'
    this.context.fillStyle = '#000'
    this.context.fillText('蔡徐坤，下一關！', 308, 226)

　　 通關成功：

　　　

 // 當磚塊數量為0時，挑戰成功
      if (blockList.length == 0) {
        if (main.LV === main.MAXLV) { // 最后一關通關
          // 升級通關
          g.state = g.state_UPDATE
          // 挑戰成功，渲染通關場景
          g.finalGame()
        } else { // 其余關卡通關
          // 升級通關
          g.state = g.state_UPDATE
          // 挑戰成功，渲染下一關卡場景
          g.goodGame()
        }
      }

　　游戲結束：

　　　　

 // 判斷游戲是否結束
      if (g.state === g.state_GAMEOVER) {
        g.gameOver()
      }
      // 判斷游戲開始時執行事件
      if (g.state === g.state_RUNNING) {
        g.checkBallBlock(g, paddle, ball, blockList, score)
        // 繪制游戲所有素材
        g.draw(paddle, ball, ballshadow, blockList, score)
      } else if (g.state === g.state_START){
        // 繪制游戲所有素材
        g.draw(paddle, ball, ballshadow, blockList, score)
      }
    }, 1000/g.fps)

　　　　13.對按鍵的基本操作：包括開始、暫停游戲、和左右移動（AD,<-,->鍵）.

　　2：common.js,main.js,scene.js都是對場景的基本修飾:

　　3.　index.html:

　　　　里面我加入了音樂播放的基本功能（簡約版，若沒有音樂，可以多刷新一下）：

　　　　

        <audio src="./test.mp3" preload="meta" loop autoplay id="bgmusic"></audio>
        <script>
		var bgmusic = document.getElementById('bgmusic');
            bgmusic.addEventListener('canplay', function(){
                this.play();
            }, false);
            window.addEventListener('load', function(){
                window.addEventListener('touchstart', once, false);
            }, false);
            function once(){
                bgmusic.play();
                window.removeEventListener('touchstart', once, false);
            }
        </script>

　　三：總結：

　　　　較麻煩的地方就是場景的渲染了，然后就是通過判斷了，最后一些細節需要注意。

　　　　鏈接: https://pan.baidu.com/s/1UOHNK-tCWNerMOgFB_qmMg 提取碼: x7sd 復制這段內容后打開百度網盤手機App，操作更方便哦