记录--Canvas实现打飞字游戏
Posted 林恒
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了记录--Canvas实现打飞字游戏相关的知识，希望对你有一定的参考价值。
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助
打开游戏界面，看到一个画面简洁、却又富有挑战性的游戏。屏幕上，有一个白色的矩形框，里面不断下落着各种单词，而我需要迅速地输入这些单词。如果我输入的单词与屏幕上的单词匹配，那么我就可以获得得分；如果我输入的单词错误或者时间过长，那么我就会输掉游戏。游戏的节奏非常快，每当我输入一个单词，屏幕上就会有新的单词出现，让我不能有丝毫的懈怠。
在游戏中，我不断地挑战自己，不断地提高自己的打字速度和准确性。经过一段时间的练习，我发现我的打字速度和准确性都有了显著的提高，这让我非常开心。
一、游戏介绍
打字游戏使用Canvas和JavaScript实现。游戏的核心玩法是，玩家需要在字母下落到底部之前输入相应的单词。如果玩家输入正确，就会得到相应的分数。游戏中包含了许多有趣的功能，如随机生成单词、单词下落、单词匹配、得分计算等等。此外，游戏设计还考虑到了玩家的游戏体验，如游戏难度的调整、游戏音效的设置等等。如果你喜欢挑战和打字游戏，那么这款游戏一定不容错过！
二、效果预览
三、实现思路
在实现游戏时，主要包括以下几个部分：
- 随机生成单词
- 添加新的单词
- 更新画面
- 画出单词
- 处理已输入单词
- 处理未输入单词
- 重置游戏
具体实现可以参考代码中的注释。
1. 搭建页面结构
使用Canvas和JavaScript实现的打字游戏的HTML模板。在这个HTML模板中，我们使用了canvas元素来显示游戏画面。此外，我们还添加了一个得分标签、一个文本输入框和一个重置游戏按钮。在游戏开始时，用户需要点击文本输入框并输入单词。如果输入的单词与下落的单词匹配，则会得到相应的分数。如果下落的单词没有被输入，则游戏结束。用户可以通过点击重置游戏按钮重新开始游戏。
<!DOCTYPE html>
<html>
<head>
<title>Canvas打字游戏</title>
<meta charset="UTF-8">
</head>
<body>
<canvas id="gameCanvas" ></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.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分数$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
如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
VUE+Canvas实现简单的五子棋游戏
之前的canvas小游戏系列欢迎大家戳：
在布局上，五子棋相比那些目标是随机运动的游戏，实现起来相对简单许多，思路也很清晰，总共分为：
（1）画棋盘；
（2）监听点击事件画黑白棋子；
（3）每次落子之后判断是否有5子相连，有则赢。
最复杂的恐怕就是如何判断五子棋赢了，那么就先从简单的开始，画个棋盘吧~
1、画棋盘
棋盘很简单，我们画个15*15的棋盘，横线竖线相交错：
drawCheckerboard() {
// 画棋盘
let _this = this;
_this.ctx.beginPath();
_this.ctx.fillStyle = "#fff";
_this.ctx.rect(0, 0, 450, 450);
_this.ctx.fill();
for (var i = 0; i < 15; i++) {
_this.ctx.beginPath();
_this.ctx.strokeStyle = "#D6D1D1";
_this.ctx.moveTo(15 + i * 30, 15); //垂直方向画15根线，相距30px;
_this.ctx.lineTo(15 + i * 30, 435);
_this.ctx.stroke();
_this.ctx.moveTo(15, 15 + i * 30); //水平方向画15根线，相距30px;
_this.ctx.lineTo(435, 15 + i * 30);
_this.ctx.stroke();
_this.resultArr.push(new Array(15).fill(0));
}
}先用一个450 * 450 的正方形打底，四周留15宽度的空白，然后画上间隔为30的线。在for循环里，我们还初始化了一个15 * 15的二维数组，并全部填上0，没错，就是记录落子的。
2、监听点击事件画黑白棋子
好了，我们在获取dom的时候顺便监听一下click事件，来画棋子：
let container = document.getElementById("gobang");
container.addEventListener("click", _this.handleClick);
handleClick(event) {
let x = event.offsetX - 70;
let y = event.offsetY - 70;
if (x < 15 || x > 435 || y < 15 || y > 435) {
// 点出界的
return;
}
this.drawChess(x, y);
if(this.winGame){
this.drawResult();
return;
}
this.whiteTurn = !this.whiteTurn;
this.drawText();
}画棋子的代码：
drawChess(x, y) {
let _this = this;
let xLine = Math.round((x - 15) / 30); // 竖线第x条
let yLine = Math.round((y - 15) / 30); // 横线第y条
if(_this.resultArr[xLine][yLine] !== 0){
return;
}
let grd = _this.ctx.createRadialGradient(
xLine * 30 + 15,
yLine * 30 + 15,
4,
xLine * 30 + 15,
yLine * 30 + 15,
10
);
grd.addColorStop(0, _this.whiteTurn ? "#fff" : "#4c4c4c");
grd.addColorStop(1, _this.whiteTurn ? "#dadada" : "#000");
_this.ctx.beginPath();
_this.ctx.fillStyle = grd;
_this.ctx.arc(
xLine * 30 + 15,
yLine * 30 + 15,
10,
0,
2 * Math.PI,
false
);
_this.ctx.fill();
_this.ctx.closePath();
_this.setResultArr(xLine, yLine);
_this.checkResult(xLine, yLine);
}很容易可以计算出点击坐标最近的那个棋盘交叉点，当然，如果那里已经落了子，就得return。然后在交点处画上白子或者黑子，这里用渐变填充使棋子看起来更像那么回事。接着，在对应的二维数组里记录一下棋子状况：
setResultArr(m, n) {
let _this = this;
_this.resultArr[m][n] = _this.whiteTurn ? 1 : 2; // 白棋为1；黑棋为2
}
3、检查五子棋输赢结果
输赢结果怎么判断？肉眼看去，无非就是以当前落子为0,0原点建立坐标系，然后判断0°，180°，45°和135°四条线上是否有连续5子。相比于直接遍历计数，更好的方法就是取出四条线上的数据，然后判断是否有相连的5个1或者2字符。
假设我们落子的数组坐标是[m, n]。
（1）横线的结果数组字符串：this.resultArr[m].join('')；
（2）竖线的结果数组字符串：
for(let i = 0; i<15; i++){
lineHorizontal.push(_this.resultArr[i][n]);
}
（3）135°（左上到右下）：j从0-15，分别取this.resultArr[m - j][n -j]结果unshift进临时数组头部，取this.resultArr[m + j][n + j]放到临时数组尾部，行成结果；
（4）45°（左下到右上）：j从0-15，分别取this.resultArr[m + j][n -j]结果unshift进临时数组头部，取this.resultArr[m - j][n + j]放到临时数组尾部，行成结果；
当然这里面都是要判断一下数组越界。
得到结果字符串后，我们判断是否有“22222”或者“11111”这样的字符串存在，有则说明胜利。
checkResult(m ,n){ // 判断是否有5子相连
let _this = this;
let checkStr = _this.whiteTurn ? CheckStrWhite : CheckStrBlack;
// 取出[m,n]横竖斜四条线的一维数组
let lineVertical = _this.resultArr[m].join('');
if(lineVertical.indexOf(checkStr) > -1){
_this.winGame = true;
return;
}
let lineHorizontal = [];
for(let i = 0; i<15; i++){
lineHorizontal.push(_this.resultArr[i][n]);
}
lineHorizontal = lineHorizontal.join('');
if(lineHorizontal.indexOf(checkStr) > -1){
_this.winGame = true;
return;
}
let line135 = [];
for(let j = 0; j < 15; j++){
if(m - j >= 0 && n - j >= 0){ // 左上角
line135.unshift(_this.resultArr[m - j][n -j]);
}
if(j > 0 && m + j < 15 && n + j < 15){ // 右下角
line135.push(_this.resultArr[m + j][n + j]);
}
}
line135 = line135.join('');
if(line135.indexOf(checkStr) > -1){
_this.winGame = true;
return;
}
let line45 = [];
for(let j = 0; j < 15; j++){
if(m + j < 15 && n - j >= 0){ // 右上角
line45.unshift(_this.resultArr[m + j][n -j]);
}
if(j > 0 && m - j >=0 && n + j < 15){ // 左下角
line45.push(_this.resultArr[m - j][n + j]);
}
}
line45 = line45.join('');
if(line45.indexOf(checkStr) > -1){
_this.winGame = true;
return;
}
}最后胜出，我们显示一下是哪方获胜。
至此，一个简单的黑白棋游戏就做好了~~~~~
老规矩，源码贴上
：
<template>
<div class="gobang">
<canvas id="gobang" width="800" height="600"></canvas>
</div>
</template>
<script>
const CheckStrWhite = "11111";
const CheckStrBlack = "22222";
export default {
name: "Gobang",
data() {
return {
ctx: null,
winGame: false,
whiteTurn: false, // 白棋轮；true-黑棋轮
resultArr: [] // 记录棋子位置的数组
};
},
mounted() {
let _this = this;
let container = document.getElementById("gobang");
container.addEventListener("click", _this.handleClick);
_this.ctx = container.getContext("2d");
_this.ctx.translate(70,70);
_this.drawCheckerboard();
},
computed:{
chessText(){
return this.whiteTurn ? '白棋' : '黑棋';
}
},
methods: {
drawCheckerboard() {
// 画棋盘
let _this = this;
_this.ctx.beginPath();
_this.ctx.fillStyle = "#fff";
_this.ctx.rect(0, 0, 450, 450);
_this.ctx.fill();
for (var i = 0; i < 15; i++) {
_this.ctx.beginPath();
_this.ctx.strokeStyle = "#D6D1D1";
_this.ctx.moveTo(15 + i * 30, 15); //垂直方向画15根线，相距30px;
_this.ctx.lineTo(15 + i * 30, 435);
_this.ctx.stroke();
_this.ctx.moveTo(15, 15 + i * 30); //水平方向画15根线，相距30px;棋盘为14*14；
_this.ctx.lineTo(435, 15 + i * 30);
_this.ctx.stroke();
_this.resultArr.push(new Array(15).fill(0));
}
_this.drawText();
},
drawChess(x, y) {
let _this = this;
let xLine = Math.round((x - 15) / 30); // 竖线第x条
let yLine = Math.round((y - 15) / 30); // 横线第y条
if(_this.resultArr[xLine][yLine] !== 0){
return;
}
let grd = _this.ctx.createRadialGradient(
xLine * 30 + 15,
yLine * 30 + 15,
4,
xLine * 30 + 15,
yLine * 30 + 15,
10
);
grd.addColorStop(0, _this.whiteTurn ? "#fff" : "#4c4c4c");
grd.addColorStop(1, _this.whiteTurn ? "#dadada" : "#000");
_this.ctx.beginPath();
_this.ctx.fillStyle = grd;
_this.ctx.arc(
xLine * 30 + 15,
yLine * 30 + 15,
10,
0,
2 * Math.PI,
false
);
_this.ctx.fill();
_this.ctx.closePath();
_this.setResultArr(xLine, yLine);
_this.checkResult(xLine, yLine);
},
setResultArr(m, n) {
let _this = this;
_this.resultArr[m][n] = _this.whiteTurn ? 1 : 2; // 白棋为1；黑棋为2
},
checkResult(m ,n){ // 判断是否有5子相连
let _this = this;
let checkStr = _this.whiteTurn ? CheckStrWhite : CheckStrBlack;
// 取出[m,n]横竖斜四条线的一维数组
let lineVertical = _this.resultArr[m].join('');
if(lineVertical.indexOf(checkStr) > -1){
_this.winGame = true;
return;
}
let lineHorizontal = [];
for(let i = 0; i<15; i++){
lineHorizontal.push(_this.resultArr[i][n]);
}
lineHorizontal = lineHorizontal.join('');
if(lineHorizontal.indexOf(checkStr) > -1){
_this.winGame = true;
return;
}
let line135 = [];
for(let j = 0; j < 15; j++){
if(m - j >= 0 && n - j >= 0){ // 左上角
line135.unshift(_this.resultArr[m - j][n -j]);
}
if(j > 0 && m + j < 15 && n + j < 15){ // 右下角
line135.push(_this.resultArr[m + j][n + j]);
}
}
line135 = line135.join('');
if(line135.indexOf(checkStr) > -1){
_this.winGame = true;
return;
}
let line45 = [];
for(let j = 0; j < 15; j++){
if(m + j < 15 && n - j >= 0){ // 右上角
line45.unshift(_this.resultArr[m + j][n -j]);
}
if(j > 0 && m - j >=0 && n + j < 15){ // 左下角
line45.push(_this.resultArr[m - j][n + j]);
}
}
line45 = line45.join('');
if(line45.indexOf(checkStr) > -1){
_this.winGame = true;
return;
}
},
drawText(){
let _this = this;
_this.ctx.clearRect(435 + 60, 0, 100, 70);
_this.ctx.fillStyle = "#fff";
_this.ctx.font="20px Arial";
_this.ctx.fillText('本轮：' + _this.chessText, 435 + 70, 35);
},
drawResult(){
let _this = this;
_this.ctx.fillStyle = "#ff2424";
_this.ctx.font="20px Arial";
_this.ctx.fillText(_this.chessText+'胜！', 435 + 70, 70);
},
handleClick(event) {
let x = event.offsetX - 70;
let y = event.offsetY - 70;
if (x < 15 || x > 435 || y < 15 || y > 435) {
// 点出界的
return;
}
this.drawChess(x, y);
if(this.winGame){
this.drawResult();
return;
}
this.whiteTurn = !this.whiteTurn;
this.drawText();
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.gobang {
#gobang {
background: #2a4546;
}
}
</style>
以上是关于记录--Canvas实现打飞字游戏的主要内容，如果未能解决你的问题，请参考以下文章