一文詳解Canvas實(shí)現(xiàn)打飛字游戲過程示例

更新時(shí)間：2023年04月04日 09:38:37 作者：forrest醬

這篇文章主要為大家介紹了Canvas實(shí)現(xiàn)打飛字游戲示例過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

打開游戲界面，看到一個(gè)畫面簡(jiǎn)潔、卻又富有挑戰(zhàn)性的游戲。屏幕上，有一個(gè)白色的矩形框，里面不斷下落著各種單詞，而我需要迅速地輸入這些單詞。如果我輸入的單詞與屏幕上的單詞匹配，那么我就可以獲得得分；如果我輸入的單詞錯(cuò)誤或者時(shí)間過長(zhǎng)，那么我就會(huì)輸?shù)粲螒?。游戲的?jié)奏非常快，每當(dāng)我輸入一個(gè)單詞，屏幕上就會(huì)有新的單詞出現(xiàn)，讓我不能有絲毫的懈怠。

在游戲中，我不斷地挑戰(zhàn)自己，不斷地提高自己的打字速度和準(zhǔn)確性。經(jīng)過一段時(shí)間的練習(xí)，我發(fā)現(xiàn)我的打字速度和準(zhǔn)確性都有了顯著的提高，這讓我非常開心。

一、游戲介紹

打字游戲使用Canvas和JavaScript實(shí)現(xiàn)。游戲的核心玩法是，玩家需要在字母下落到底部之前輸入相應(yīng)的單詞。如果玩家輸入正確，就會(huì)得到相應(yīng)的分?jǐn)?shù)。游戲中包含了許多有趣的功能，如隨機(jī)生成單詞、單詞下落、單詞匹配、得分計(jì)算等等。此外，游戲設(shè)計(jì)還考慮到了玩家的游戲體驗(yàn)，如游戲難度的調(diào)整、游戲音效的設(shè)置等等。如果你喜歡挑戰(zhàn)和打字游戲，那么這款游戲一定不容錯(cuò)過！

二、效果預(yù)覽

三、實(shí)現(xiàn)思路

在實(shí)現(xiàn)游戲時(shí)，主要包括以下幾個(gè)部分：

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

具體實(shí)現(xiàn)可以參考代碼中的注釋。

1. 搭建頁面結(jié)構(gòu)

使用Canvas和JavaScript實(shí)現(xiàn)的打字游戲的HTML模板。在這個(gè)HTML模板中，我們使用了canvas元素來顯示游戲畫面。此外，我們還添加了一個(gè)得分標(biāo)簽、一個(gè)文本輸入框和一個(gè)重置游戲按鈕。在游戲開始時(shí)，用戶需要點(diǎn)擊文本輸入框并輸入單詞。如果輸入的單詞與下落的單詞匹配，則會(huì)得到相應(yīng)的分?jǐn)?shù)。如果下落的單詞沒有被輸入，則游戲結(jié)束。用戶可以通過點(diǎn)擊重置游戲按鈕重新開始游戲。

<!DOCTYPE html>
<html>
<head>
    <title>Canvas打字游戲</title>
    <meta charset="UTF-8">
</head>
<body>
    <canvas id="gameCanvas" width="500" 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代碼

對(duì)于js代碼的編寫，我用ES6的class語法來進(jìn)行編寫。使用ES6中的class語法來定義一個(gè)游戲類，能夠利用class語法的面向?qū)ο筇匦詠磉M(jìn)行游戲邏輯的封裝和組織。使用class語法可以更加清晰地表達(dá)游戲的結(jié)構(gòu)和關(guān)系，將游戲的各個(gè)部分封裝在一個(gè)類中，可以更加方便地管理和維護(hù)代碼。

同時(shí)，使用class語法還可以更加方便地進(jìn)行繼承和多態(tài)的操作，方便擴(kuò)展和重用代碼。在實(shí)現(xiàn)游戲時(shí)，可能會(huì)有不同的游戲模式，或者需要對(duì)游戲進(jìn)行一些特殊的調(diào)整。使用class語法可以更加便捷地?cái)U(kuò)展和修改游戲的邏輯，提高代碼的可維護(hù)性和可擴(kuò)展性。

還可以更加方便地進(jìn)行代碼的組織和管理。游戲邏輯封裝在一個(gè)類中，可以更加清晰地表達(dá)游戲的結(jié)構(gòu)和關(guān)系，方便代碼的組織和管理。同時(shí)還可以更加方便地進(jìn)行代碼的測(cè)試和調(diào)試，提高代碼的質(zhì)量和可靠性。

class TypingGame {
  constructor() {
    this.canvas = document.getElementById("gameCanvas");
    this.context = this.canvas.getContext("2d");
    this.gameStatus = 'looping' // 游戲狀態(tài)，初始值為 '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() {
    // 隨機(jī)生成一些單詞
    this.generateRandomWords();
    // 綁定鍵盤輸入事件
    this.userInput.addEventListener("keypress", this.handleKeyPress);
    // 綁定重置游戲按鈕點(diǎn)擊事件
    this.resetButton.addEventListener("click", this.resetGame);
    // 添加第一個(gè)單詞
    this.addNewWord();
    // 開始游戲循環(huán)
    this.update();
  }
  /**
   * 隨機(jī)生成一些單詞
   */
  generateRandomWords() {
    for (let i = 0; i < 100; i++) {
      // 隨機(jī)生成一個(gè)指定長(zhǎng)度的單詞
      const word = this.getRandomString(Math.floor(Math.random() * 7) + 3);
      this.words.push(word);
    }
  }
  /**
   * 隨機(jī)生成一個(gè)字母
   */
  getRandomLetter() {
    const letters = "abcdefghijklmnopqrstuvwxyz";
    const index = Math.floor(Math.random() * letters.length);
    return letters[index];
  }
  /**
   * 隨機(jī)生成一個(gè)指定長(zhǎng)度的單詞
   */
  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);
  }
  /**
   * 隨機(jī)獲取一個(gè)單詞
   */
  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();
      }
    });
    // 請(qǐng)求下一幀動(dòng)畫
    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.value = "";
      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 =['你輸了，你這個(gè)菜雞,','恭喜你，雖敗猶榮，','真棒，我的寶子厲害，']
      let textSay=this.score>15?this.score>50?text[2]:text[1]:text[0];
      this.context.fillText(`${textSay}分?jǐn)?shù)${this.score}分`, this.canvas.width / 2 - 180, this.canvas.height / 2);
    }
  }
  /**
   * 重置游戲
   */
  resetGame() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    // 開始游戲循環(huán)
    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類是整個(gè)游戲的核心。在constructor方法中，首先初始化了一些游戲狀態(tài)和相關(guān)的變量，然后調(diào)用了init方法，對(duì)游戲進(jìn)行初始化。在init方法中，定義了一些事件處理方法，如鍵盤輸入事件處理方法、重置游戲按鈕點(diǎn)擊事件處理方法等等。在init方法中，還調(diào)用了addNewWord方法，添加了第一個(gè)單詞，并且開始游戲循環(huán)。在update方法中，主要是更新畫面的邏輯，如清空畫布、畫出單詞、處理已輸入單詞、處理未輸入單詞等等。在resetGame方法中，主要是重置游戲的狀態(tài)，如清空畫布、得分歸零、添加新的單詞等等。

整個(gè)游戲的實(shí)現(xiàn)比較簡(jiǎn)單，主要是依賴于Canvas和JavaScript。游戲中使用了一些Canvas的API，如context.fillText()方法、context.clearRect()方法等等，同時(shí)還使用了一些JavaScript的語言特性，如類、箭頭函數(shù)等等。如果你對(duì)游戲的實(shí)現(xiàn)過程感興趣，可以參考代碼中的注釋，了解游戲中每個(gè)方法的具體實(shí)現(xiàn)細(xì)節(jié)。

四、寫在最后

Canvas和JavaScript看似平凡無奇，卻能夠創(chuàng)造出令人驚嘆的數(shù)字世界。在這個(gè)數(shù)字化時(shí)代，掌握這些工具已經(jīng)成為了一種競(jìng)爭(zhēng)優(yōu)勢(shì)。本篇文章通過探索Canvas和JavaScript的世界來實(shí)現(xiàn)一個(gè)打字游戲，領(lǐng)略了兩者的神奇之處。

游戲的實(shí)現(xiàn)并不復(fù)雜，但卻需要運(yùn)用許多Canvas的API和JavaScript的語言特性。通過隨機(jī)生成單詞、讓單詞下落、根據(jù)用戶輸入判斷單詞是否匹配等等，我們成功實(shí)現(xiàn)了一個(gè)簡(jiǎn)單而有趣的游戲。在實(shí)現(xiàn)游戲的過程中，我們也學(xué)習(xí)了一些Canvas的API和JavaScript的語言特性，例如類、箭頭函數(shù)等等。

在這個(gè)數(shù)字化時(shí)代，技術(shù)的發(fā)展和創(chuàng)新是非常重要的。掌握Canvas和JavaScript，能夠讓我們創(chuàng)造出更加有趣和有用的應(yīng)用和游戲。讓我們繼續(xù)深入學(xué)習(xí)和探索，去創(chuàng)造出更加美好的數(shù)字世界吧！

以上就是Canvas實(shí)現(xiàn)打飛字游戲的詳細(xì)內(nèi)容，更多關(guān)于Canvas實(shí)現(xiàn)打飛字游戲的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: