一文詳解Canvas實(shí)現(xiàn)打飛字游戲過(guò)程示例
正文
打開游戲界面，看到一個(gè)畫面簡(jiǎn)潔、卻又富有挑戰(zhàn)性的游戲。屏幕上，有一個(gè)白色的矩形框，里面不斷下落著各種單詞，而我需要迅速地輸入這些單詞。如果我輸入的單詞與屏幕上的單詞匹配，那么我就可以獲得得分；如果我輸入的單詞錯(cuò)誤或者時(shí)間過(guò)長(zhǎng)，那么我就會(huì)輸?shù)粲螒?。游戲的?jié)奏非?？欤慨?dāng)我輸入一個(gè)單詞，屏幕上就會(huì)有新的單詞出現(xiàn)，讓我不能有絲毫的懈怠。
在游戲中，我不斷地挑戰(zhàn)自己，不斷地提高自己的打字速度和準(zhǔn)確性。經(jīng)過(guò)一段時(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ò)過(guò)！
二、效果預(yù)覽
三、實(shí)現(xiàn)思路
在實(shí)現(xiàn)游戲時(shí)，主要包括以下幾個(gè)部分：
- 隨機(jī)生成單詞
- 添加新的單詞
- 更新畫面
- 畫出單詞
- 處理已輸入單詞
- 處理未輸入單詞
- 重置游戲
具體實(shí)現(xiàn)可以參考代碼中的注釋。
1. 搭建頁(yè)面結(jié)構(gòu)
使用Canvas和JavaScript實(shí)現(xiàn)的打字游戲的HTML模板。在這個(gè)HTML模板中，我們使用了canvas元素來(lái)顯示游戲畫面。此外，我們還添加了一個(gè)得分標(biāo)簽、一個(gè)文本輸入框和一個(gè)重置游戲按鈕。在游戲開始時(shí)，用戶需要點(diǎn)擊文本輸入框并輸入單詞。如果輸入的單詞與下落的單詞匹配，則會(huì)得到相應(yīng)的分?jǐn)?shù)。如果下落的單詞沒有被輸入，則游戲結(jié)束。用戶可以通過(guò)點(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語(yǔ)法來(lái)進(jìn)行編寫。使用ES6中的class語(yǔ)法來(lái)定義一個(gè)游戲類，能夠利用class語(yǔ)法的面向?qū)ο筇匦詠?lái)進(jìn)行游戲邏輯的封裝和組織。使用class語(yǔ)法可以更加清晰地表達(dá)游戲的結(jié)構(gòu)和關(guān)系，將游戲的各個(gè)部分封裝在一個(gè)類中，可以更加方便地管理和維護(hù)代碼。
同時(shí)，使用class語(yǔ)法還可以更加方便地進(jìn)行繼承和多態(tài)的操作，方便擴(kuò)展和重用代碼。在實(shí)現(xiàn)游戲時(shí)，可能會(huì)有不同的游戲模式，或者需要對(duì)游戲進(jìn)行一些特殊的調(diào)整。使用class語(yǔ)法可以更加便捷地?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的語(yǔ)言特性，如類、箭頭函數(shù)等等。如果你對(duì)游戲的實(shí)現(xiàn)過(guò)程感興趣，可以參考代碼中的注釋，了解游戲中每個(gè)方法的具體實(shí)現(xiàn)細(xì)節(jié)。
四、寫在最后
Canvas和JavaScript看似平凡無(wú)奇，卻能夠創(chuàng)造出令人驚嘆的數(shù)字世界。在這個(gè)數(shù)字化時(shí)代，掌握這些工具已經(jīng)成為了一種競(jìng)爭(zhēng)優(yōu)勢(shì)。本篇文章通過(guò)探索Canvas和JavaScript的世界來(lái)實(shí)現(xiàn)一個(gè)打字游戲，領(lǐng)略了兩者的神奇之處。
游戲的實(shí)現(xiàn)并不復(fù)雜，但卻需要運(yùn)用許多Canvas的API和JavaScript的語(yǔ)言特性。通過(guò)隨機(jī)生成單詞、讓單詞下落、根據(jù)用戶輸入判斷單詞是否匹配等等，我們成功實(shí)現(xiàn)了一個(gè)簡(jiǎn)單而有趣的游戲。在實(shí)現(xiàn)游戲的過(guò)程中，我們也學(xué)習(xí)了一些Canvas的API和JavaScript的語(yǔ)言特性，例如類、箭頭函數(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)文章！
相關(guān)文章
js鼠標(biāo)坐標(biāo)獲取常用的三個(gè)方法
這篇文章主要給大家介紹了js鼠標(biāo)坐標(biāo)獲取常用的三個(gè)方法,在 JavaScript中當(dāng)事件發(fā)生時(shí)獲取鼠標(biāo)的位置是件很重要的事件,需要的朋友可以參考下2023-09-09
TypeScript中的互斥類型實(shí)現(xiàn)方法示例
用了一年時(shí)間的TypeScript了,下面這篇文章主要給大家介紹了關(guān)于TypeScript中互斥類型實(shí)現(xiàn)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
Actionscript與javascript交互實(shí)例程序(修改)
這篇文章主要介紹了Actionscript與javascript交互實(shí)例程序(修改)的相關(guān)資料,本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
JavaScript使用prototype原型實(shí)現(xiàn)的封裝繼承多態(tài)示例
這篇文章主要介紹了JavaScript使用prototype原型實(shí)現(xiàn)的封裝繼承多態(tài),涉及javascript prototype與面向?qū)ο蟪绦蛟O(shè)計(jì)相關(guān)操作技巧,需要的朋友可以參考下2018-08-08
JS模擬百度搜索框和選項(xiàng)卡的實(shí)現(xiàn)
本文主要介紹了JS模擬百度搜索框和選項(xiàng)卡的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-03-03
layui的布局和表格的渲染以及動(dòng)態(tài)生成表格的方法
今天小編就為大家分享一篇layui的布局和表格的渲染以及動(dòng)態(tài)生成表格的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
js實(shí)現(xiàn)hashtable的賦值、取值、遍歷操作實(shí)例詳解
這篇文章主要介紹了js實(shí)現(xiàn)hashtable的賦值、取值、遍歷操作,結(jié)合實(shí)例形式分析了哈希表的原理、哈希鍵值對(duì)操作相關(guān)技巧,需要的朋友可以參考下2016-12-12
Bootstrap時(shí)間選擇器datetimepicker和daterangepicker使用實(shí)例解析
這篇文章主要為大家詳細(xì)解析了Bootstrap時(shí)間選擇器datetimepicker和daterangepicker使用實(shí)例,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
基于js里調(diào)用函數(shù)時(shí),函數(shù)名帶括號(hào)和不帶括號(hào)的區(qū)別
下面小編就為大家?guī)?lái)一篇基于js里調(diào)用函數(shù)時(shí),函數(shù)名帶括號(hào)和不帶括號(hào)的區(qū)別。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07
JavaScript在ES6版本后提供了一些更加便捷的方法供開發(fā)者使用,實(shí)現(xiàn)原理其實(shí)是在對(duì)應(yīng)的構(gòu)造函數(shù)原型提供方法,下面這篇文章主要給大家介紹了關(guān)于es6中some和every方法使用的相關(guān)資料,需要的朋友可以參考下2023-04-04