記錄--Canvas實作打飛字游戲-有解無憂

這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

打開游戲界面，看到一個畫面簡潔、卻又富有挑戰性的游戲，螢屏上，有一個白色的矩形框，里面不斷下落著各種單詞，而我需要迅速地輸入這些單詞，如果我輸入的單詞與螢屏上的單詞匹配，那么我就可以獲得得分；如果我輸入的單詞錯誤或者時間過長，那么我就會輸掉游戲，游戲的節奏非常快，每當我輸入一個單詞，螢屏上就會有新的單詞出現，讓我不能有絲毫的懈怠，

在游戲中，我不斷地挑戰自己，不斷地提高自己的打字速度和準確性，經過一段時間的練習，我發現我的打字速度和準確性都有了顯著的提高，這讓我非常開心，

一、游戲介紹

打字游戲使用Canvas和JavaScript實作，游戲的核心玩法是，玩家需要在字母下落到底部之前輸入相應的單詞，如果玩家輸入正確，就會得到相應的分數，游戲中包含了許多有趣的功能，如隨機生成單詞、單詞下落、單詞匹配、得分計算等等，此外，游戲設計還考慮到了玩家的游戲體驗，如游戲難度的調整、游戲音效的設定等等，如果你喜歡挑戰和打字游戲，那么這款游戲一定不容錯過！

二、效果預覽

體驗鏈接：打飛字游戲 - 碼上掘金 (juejin.cn)

打飛字.gif

三、實作思路

在實作游戲時，主要包括以下幾個部分：

隨機生成單詞
添加新的單詞
更新畫面
畫出單詞
處理已輸入單詞
處理未輸入單詞
重置游戲

具體實作可以參考代碼中的注釋，

1. 搭建頁面結構

使用Canvas和JavaScript實作的打字游戲的HTML模板，在這個HTML模板中，我們使用了canvas元素來顯示游戲畫面，此外，我們還添加了一個得分標簽、一個文本輸入框和一個重置游戲按鈕，在游戲開始時，用戶需要點擊文本輸入框并輸入單詞，如果輸入的單詞與下落的單詞匹配，則會得到相應的分數，如果下落的單詞沒有被輸入，則游戲結束，用戶可以通過點擊重置游戲按鈕重新開始游戲，

<!DOCTYPE html>
<html>
<head>
    <title>Canvas打字游戲</title>
    <meta charset="UTF-8">
</head>
<body>
    <canvas id="gameCanvas"  height="400"></canvas>
    <p>得分: <span id="score">0</span></p>
    <input type="text" id="userInput" autofocus>
    <button id="resetButton">重新開始</button>
</body>
</html>

2. 美化界面

canvas {
  border: 1px solid black;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#gameCanvas {
  margin: 20px;
}

input[type=text] {
  margin: 20px;
  font-size: 20px;
  padding: 10px;
  border: none;
  border-bottom: 2px solid gray;
}

#score {
  font-size: 20px;
  margin: 20px;
}

#resetButton {
  margin: 20px;
  font-size: 20px;
  padding: 10px;
  border: none;
  background-color: #4CAF50;
  color: white;
  border-radius: 5px;
}

#resetButton:hover {
  background-color: #3E8E41;
}

3. 撰寫JavaScript代碼

對于js代碼的撰寫，我用ES6的class語法來進行撰寫，使用ES6中的class語法來定義一個游戲類，能夠利用class語法的面向物件特性來進行游戲邏輯的封裝和組織，使用class語法可以更加清晰地表達游戲的結構和關系，將游戲的各個部分封裝在一個類中，可以更加方便地管理和維護代碼，

同時，使用class語法還可以更加方便地進行繼承和多型的操作，方便擴展和重用代碼，在實作游戲時，可能會有不同的游戲模式，或者需要對游戲進行一些特殊的調整，使用class語法可以更加便捷地擴展和修改游戲的邏輯，提高代碼的可維護性和可擴展性，

還可以更加方便地進行代碼的組織和管理，游戲邏輯封裝在一個類中，可以更加清晰地表達游戲的結構和關系，方便代碼的組織和管理，同時還可以更加方便地進行代碼的測驗和除錯，提高代碼的質量和可靠性，

class TypingGame {
  constructor() {
    this.canvas = document.getElementById("gameCanvas");
    this.context = this.canvas.getContext("2d");
    this.gameStatus = 'looping' // 游戲狀態，初始值為 'looping'
    this.blinkInterval = null;
    this.score = 0 // 得分，初始值為 0
    this.wordList = [];
    this.SPEED = 1; // 字符下落速度
    this.ANGLE = Math.PI / 2;
    this.words = ['apple', 'orange', 'banana', 'pear', 'grape'];
    this.userInput = document.getElementById("userInput");
    this.resetButton = document.getElementById("resetButton");
    this.addNewWord = this.addNewWord.bind(this);
    this.handleKeyPress = this.handleKeyPress.bind(this);
    this.resetGame = this.resetGame.bind(this);
    this.update = this.update.bind(this);
    this.drawWord = this.drawWord.bind(this);
    this.handleWordMatch = this.handleWordMatch.bind(this);
    this.handleWordMiss = this.handleWordMiss.bind(this);
    this.init();
  }

  /**
   * 初始化游戲
   */
  init() {
    // 隨機生成一些單詞
    this.generateRandomWords();
    // 系結鍵盤輸入事件
    this.userInput.addEventListener("keypress", this.handleKeyPress);
    // 系結重置游戲按鈕點擊事件
    this.resetButton.addEventListener("click", this.resetGame);
    // 添加第一個單詞
    this.addNewWord();
    // 開始游戲回圈
    this.update();
  }

  /**
   * 隨機生成一些單詞
   */
  generateRandomWords() {
    for (let i = 0; i < 100; i++) {
      // 隨機生成一個指定長度的單詞
      const word = this.getRandomString(Math.floor(Math.random() * 7) + 3);
      this.words.push(word);
    }
  }

  /**
   * 隨機生成一個字母
   */
  getRandomLetter() {
    const letters = "abcdefghijklmnopqrstuvwxyz";
    const index = Math.floor(Math.random() * letters.length);
    return letters[index];
  }

  /**
   * 隨機生成一個指定長度的單詞
   */
  getRandomString(length) {
    let result = "";
    for (let i = 0; i < length; i++) {
      result += this.getRandomLetter();
    }
    return result;
  }

  /**
   * 添加新的單詞
   */
  addNewWord() {
    // 獲取單詞的寬度
    const wordWidth = this.context.measureText(this.getRandomWord()).width;
    const word = {
      word: this.getRandomWord(),
      x: Math.max(wordWidth, Math.random() * (this.canvas.width - wordWidth)),
      y: 0,
      angle: this.ANGLE,
    };
    this.wordList.push(word);
  }

  /**
   * 隨機獲取一個單詞
   */
  getRandomWord() {
    const index = Math.floor(Math.random() * this.words.length);
    return this.words[index];
  }

  /**
   * 更新畫面
   */
  update() {
    if (this.gameStatus !== 'looping') return;
    // 清慷訓布
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    this.wordList.forEach((word, i) => {
      word.y += this.SPEED;
      word.x += Math.sin(word.angle);
      word.angle += Math.random() * 0.1 - 0.05;
      const x = word.x - this.context.measureText(word.word).width / 2;
      // 畫出單詞
      this.drawWord(word.word, x, word.y);

      if (word.x < 0 || word.x > this.canvas.width) {
        word.angle = -word.angle;
      }

      if (word.y > this.canvas.height) {
        // 處理未輸入單詞
        this.handleWordMiss(word);
        this.wordList.splice(i, 1);
        // 添加新的單詞
        this.addNewWord();
      }
    });
    // 請求下一幀影片
    requestAnimationFrame(this.update);
  }

  /**
   * 畫出單詞
   */
  drawWord(word, x, y) {
    this.context.font = "30px Arial";
    this.context.fillText(word, x, y);
  }

  /**
   * 處理已輸入單詞
   */
  handleKeyPress(event) {
    if (event.keyCode === 13) {
      const userWord = this.userInput.value;
      this.userInput.valuehttps://www.cnblogs.com/smileZAZ/p/= "";

      this.wordList.forEach((word, idx) => {
        if (word.word === userWord) {
          // 處理已輸入單詞
          this.handleWordMatch(word, idx);
        }
      });
    }
  }

  /**
   * 處理已輸入單詞
   */
  handleWordMatch(word, idx) {
    // 增加得分
    this.score++;
    // 更新得分顯示
    document.getElementById("score").innerText = this.score;
    const x = word.x - this.context.measureText(word.word).width / 2;
    const y = word.y;
    let isWhite = true;
    let blinkCount = 0;
    // 單詞閃爍
    this.blinkInterval = setInterval(() => {
      if (isWhite) {
        this.context.fillStyle = "white";
      } else {
        this.context.fillStyle = "black";
      }
      this.context.fillText(word.word, x, y);
      isWhite = !isWhite;
      blinkCount++;
      if (blinkCount >= 10) {
        this.context.fillStyle = "black";
        this.context.fillText(word.word, x, y);
        this.wordList.splice(idx, 1)
        // 添加新的單詞
        this.addNewWord()
        clearInterval(this.blinkInterval);
      }
    }, 100);
  }

  /**
   * 處理未輸入單詞
   */
  handleWordMiss(word) {
    if (word.y > this.canvas.height) {
      clearInterval(this.blinkInterval);
      this.gameStatus = 'pause';
      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
      this.context.font = "30px Arial";
      let text =['你輸了，你這個菜雞,','恭喜你，雖敗猶榮，','真棒，我的寶子厲害，']
      let textSay=this.score>15?this.score>50?text[2]:text[1]:text[0];
      this.context.fillText(`${textSay}分數${this.score}分`, this.canvas.width / 2 - 180, this.canvas.height / 2);

    }
  }

  /**
   * 重置游戲
   */
  resetGame() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    // 開始游戲回圈
    requestAnimationFrame(this.update);
    clearInterval(this.blinkInterval);
    this.gameStatus='looping';
    this.score = 0;
    // 更新得分顯示
    document.getElementById("score").innerText = this.score;
    this.wordList = [];
    // 添加新的單詞
    this.addNewWord();
  }
}

const typingGame = new TypingGame();

TypingGame類是整個游戲的核心，在constructor方法中，首先初始化了一些游戲狀態和相關的變數，然后呼叫了init方法，對游戲進行初始化，在init方法中，定義了一些事件處理方法，如鍵盤輸入事件處理方法、重置游戲按鈕點擊事件處理方法等等，在init方法中，還呼叫了addNewWord方法，添加了第一個單詞，并且開始游戲回圈，在update方法中，主要是更新畫面的邏輯，如清慷訓布、畫出單詞、處理已輸入單詞、處理未輸入單詞等等，在resetGame方法中，主要是重置游戲的狀態，如清慷訓布、得分歸零、添加新的單詞等等，

整個游戲的實作比較簡單，主要是依賴于Canvas和JavaScript，游戲中使用了一些Canvas的API，如context.fillText()方法、context.clearRect()方法等等，同時還使用了一些JavaScript的語言特性，如類、箭頭函式等等，如果你對游戲的實作程序感興趣，可以參考代碼中的注釋，了解游戲中每個方法的具體實作細節，

四、寫在最后

Canvas和JavaScript看似平凡無奇，卻能夠創造出令人驚嘆的數字世界，在這個數字化時代，掌握這些工具已經成為了一種競爭優勢，本篇文章將帶領讀者一起探索Canvas和JavaScript的世界，通過實作一個打字游戲，領略這些工具的神奇之處，

游戲的實作并不復雜，但卻需要運用許多Canvas的API和JavaScript的語言特性，通過隨機生成單詞、讓單詞下落、根據用戶輸入判斷單詞是否匹配等等，我們成功實作了一個簡單而有趣的游戲，在實作游戲的程序中，我們也學習了一些Canvas的API和JavaScript的語言特性，例如類、箭頭函式等等，

本文轉載于:

https://juejin.cn/post/7217704608034193468

如果對您有所幫助，歡迎您點個關注，我會定時更新技術檔案，大家一起討論學習，一起進步，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/549070.html

標籤：HTML5

上一篇：了解 HTTP 看這一篇就夠

下一篇：生產事故-走近科學之消失的JWT