一文詳解Canvas實現(xiàn)打飛字游戲過程示例
正文
打開游戲界面，看到一個畫面簡潔、卻又富有挑戰(zhàn)性的游戲。屏幕上，有一個白色的矩形框，里面不斷下落著各種單詞，而我需要迅速地輸入這些單詞。如果我輸入的單詞與屏幕上的單詞匹配，那么我就可以獲得得分；如果我輸入的單詞錯誤或者時間過長，那么我就會輸?shù)粲螒?。游戲的?jié)奏非常快，每當我輸入一個單詞，屏幕上就會有新的單詞出現(xiàn)，讓我不能有絲毫的懈怠。
在游戲中，我不斷地挑戰(zhàn)自己，不斷地提高自己的打字速度和準確性。經(jīng)過一段時間的練習，我發(fā)現(xiàn)我的打字速度和準確性都有了顯著的提高，這讓我非常開心。
一、游戲介紹
打字游戲使用Canvas和JavaScript實現(xiàn)。游戲的核心玩法是，玩家需要在字母下落到底部之前輸入相應的單詞。如果玩家輸入正確，就會得到相應的分數(shù)。游戲中包含了許多有趣的功能，如隨機生成單詞、單詞下落、單詞匹配、得分計算等等。此外，游戲設計還考慮到了玩家的游戲體驗，如游戲難度的調(diào)整、游戲音效的設置等等。如果你喜歡挑戰(zhàn)和打字游戲，那么這款游戲一定不容錯過！
二、效果預覽
三、實現(xiàn)思路
在實現(xiàn)游戲時，主要包括以下幾個部分：
- 隨機生成單詞
- 添加新的單詞
- 更新畫面
- 畫出單詞
- 處理已輸入單詞
- 處理未輸入單詞
- 重置游戲
具體實現(xiàn)可以參考代碼中的注釋。
1. 搭建頁面結(jié)構(gòu)
使用Canvas和JavaScript實現(xiàn)的打字游戲的HTML模板。在這個HTML模板中，我們使用了canvas元素來顯示游戲畫面。此外，我們還添加了一個得分標簽、一個文本輸入框和一個重置游戲按鈕。在游戲開始時，用戶需要點擊文本輸入框并輸入單詞。如果輸入的單詞與下落的單詞匹配，則會得到相應的分數(shù)。如果下落的單詞沒有被輸入，則游戲結(jié)束。用戶可以通過點擊重置游戲按鈕重新開始游戲。
<!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代碼
對于js代碼的編寫，我用ES6的class語法來進行編寫。使用ES6中的class語法來定義一個游戲類，能夠利用class語法的面向?qū)ο筇匦詠磉M行游戲邏輯的封裝和組織。使用class語法可以更加清晰地表達游戲的結(jié)構(gòu)和關(guān)系，將游戲的各個部分封裝在一個類中，可以更加方便地管理和維護代碼。
同時，使用class語法還可以更加方便地進行繼承和多態(tài)的操作，方便擴展和重用代碼。在實現(xiàn)游戲時，可能會有不同的游戲模式，或者需要對游戲進行一些特殊的調(diào)整。使用class語法可以更加便捷地擴展和修改游戲的邏輯，提高代碼的可維護性和可擴展性。
還可以更加方便地進行代碼的組織和管理。游戲邏輯封裝在一個類中，可以更加清晰地表達游戲的結(jié)構(gòu)和關(guān)系，方便代碼的組織和管理。同時還可以更加方便地進行代碼的測試和調(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() {
// 隨機生成一些單詞
this.generateRandomWords();
// 綁定鍵盤輸入事件
this.userInput.addEventListener("keypress", this.handleKeyPress);
// 綁定重置游戲按鈕點擊事件
this.resetButton.addEventListener("click", this.resetGame);
// 添加第一個單詞
this.addNewWord();
// 開始游戲循環(huán)
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.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 =['你輸了，你這個菜雞,','恭喜你，雖敗猶榮，','真棒，我的寶子厲害，']
let textSay=this.score>15?this.score>50?text[2]:text[1]:text[0];
this.context.fillText(`${textSay}分數(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類是整個游戲的核心。在constructor方法中，首先初始化了一些游戲狀態(tài)和相關(guān)的變量，然后調(diào)用了init方法，對游戲進行初始化。在init方法中，定義了一些事件處理方法，如鍵盤輸入事件處理方法、重置游戲按鈕點擊事件處理方法等等。在init方法中，還調(diào)用了addNewWord方法，添加了第一個單詞，并且開始游戲循環(huán)。在update方法中，主要是更新畫面的邏輯，如清空畫布、畫出單詞、處理已輸入單詞、處理未輸入單詞等等。在resetGame方法中，主要是重置游戲的狀態(tài)，如清空畫布、得分歸零、添加新的單詞等等。
整個游戲的實現(xiàn)比較簡單，主要是依賴于Canvas和JavaScript。游戲中使用了一些Canvas的API，如context.fillText()方法、context.clearRect()方法等等，同時還使用了一些JavaScript的語言特性，如類、箭頭函數(shù)等等。如果你對游戲的實現(xiàn)過程感興趣，可以參考代碼中的注釋，了解游戲中每個方法的具體實現(xiàn)細節(jié)。
四、寫在最后
Canvas和JavaScript看似平凡無奇，卻能夠創(chuàng)造出令人驚嘆的數(shù)字世界。在這個數(shù)字化時代，掌握這些工具已經(jīng)成為了一種競爭優(yōu)勢。本篇文章通過探索Canvas和JavaScript的世界來實現(xiàn)一個打字游戲，領略了兩者的神奇之處。
游戲的實現(xiàn)并不復雜，但卻需要運用許多Canvas的API和JavaScript的語言特性。通過隨機生成單詞、讓單詞下落、根據(jù)用戶輸入判斷單詞是否匹配等等，我們成功實現(xiàn)了一個簡單而有趣的游戲。在實現(xiàn)游戲的過程中，我們也學習了一些Canvas的API和JavaScript的語言特性，例如類、箭頭函數(shù)等等。
在這個數(shù)字化時代，技術(shù)的發(fā)展和創(chuàng)新是非常重要的。掌握Canvas和JavaScript，能夠讓我們創(chuàng)造出更加有趣和有用的應用和游戲。讓我們繼續(xù)深入學習和探索，去創(chuàng)造出更加美好的數(shù)字世界吧！
以上就是Canvas實現(xiàn)打飛字游戲的詳細內(nèi)容，更多關(guān)于Canvas實現(xiàn)打飛字游戲的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要給大家介紹了js鼠標坐標獲取常用的三個方法,在 JavaScript中當事件發(fā)生時獲取鼠標的位置是件很重要的事件,需要的朋友可以參考下2023-09-09
用了一年時間的TypeScript了,下面這篇文章主要給大家介紹了關(guān)于TypeScript中互斥類型實現(xiàn)的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-04-04
Actionscript與javascript交互實例程序(修改)
這篇文章主要介紹了Actionscript與javascript交互實例程序(修改)的相關(guān)資料,本文介紹的非常詳細，具有參考借鑒價值，需要的朋友可以參考下2016-09-09
JavaScript使用prototype原型實現(xiàn)的封裝繼承多態(tài)示例
這篇文章主要介紹了JavaScript使用prototype原型實現(xiàn)的封裝繼承多態(tài),涉及javascript prototype與面向?qū)ο蟪绦蛟O計相關(guān)操作技巧,需要的朋友可以參考下2018-08-08
本文主要介紹了JS模擬百度搜索框和選項卡的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-03-03
layui的布局和表格的渲染以及動態(tài)生成表格的方法
今天小編就為大家分享一篇layui的布局和表格的渲染以及動態(tài)生成表格的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
js實現(xiàn)hashtable的賦值、取值、遍歷操作實例詳解
這篇文章主要介紹了js實現(xiàn)hashtable的賦值、取值、遍歷操作,結(jié)合實例形式分析了哈希表的原理、哈希鍵值對操作相關(guān)技巧,需要的朋友可以參考下2016-12-12
Bootstrap時間選擇器datetimepicker和daterangepicker使用實例解析
這篇文章主要為大家詳細解析了Bootstrap時間選擇器datetimepicker和daterangepicker使用實例,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
基于js里調(diào)用函數(shù)時,函數(shù)名帶括號和不帶括號的區(qū)別
下面小編就為大家?guī)硪黄趈s里調(diào)用函數(shù)時,函數(shù)名帶括號和不帶括號的區(qū)別。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
JavaScript在ES6版本后提供了一些更加便捷的方法供開發(fā)者使用,實現(xiàn)原理其實是在對應的構(gòu)造函數(shù)原型提供方法,下面這篇文章主要給大家介紹了關(guān)于es6中some和every方法使用的相關(guān)資料,需要的朋友可以參考下2023-04-04