轻松搭建前端打字游戏

在开始之前，请确保你已经安装了Node.js和npm。接下来，创建一个新的文件夹，并在该文件夹中初始化一个新的Node.js项目：

mkdir type-game
cd type-game
npm init -y

现在，我们需要安装一些前端依赖项。在项目根目录下打开终端，并运行以下命令来安装Express和Pug：

npm install express pug

接下来，我们需要创建一个简单的HTML文件作为游戏界面。在项目根目录下创建一个名为index.pug的文件，并将以下代码复制到文件中：

doctype html
html
head
title 打字游戏
style.
body { font-family: Arial, sans-serif; }
#game { width: 300px; margin: 0 auto; }
.word { font-size: 24px; }
body
div#game
h1 打字游戏
p.word(id='word') 这是一个示例单词
input(type='text', id='user-input', style='width: 100%; font-size: 24px;')
button(id='check-button') 提交
p(id='result')

现在，我们需要在JavaScript中编写游戏逻辑。在项目根目录下创建一个名为app.js的文件，并将以下代码复制到文件中：

const express = require('express');
const app = express();
const port = 3000;
app.set('view engine', 'pug');
app.set('views', __dirname);
app.use(express.static('public'));
app.get('/', (req, res) => {
res.render('index', { word: '示例单词' });
});
app.post('/check', (req, res) => {
const userInput = req.body.userInput;
const correctWord = '示例单词';
if (userInput === correctWord) {
res.redirect('/success');
} else {
res.redirect('/');
}
});
app.get('/success', (req, res) => {
res.render('success');
});
app.listen(port, () => {
console.log(`服务器已启动在端口 ${port}`);
});