HTTP：实现网页版石头剪刀布-Node.js 开发实战

当前位置:　首页>> 技术小册>> Node.js 开发实战

HTTP：实现网页版石头剪刀布

引言

在Web开发中，HTTP（HyperText Transfer Protocol）作为互联网应用的基础通信协议，扮演着至关重要的角色。它不仅是数据传输的桥梁，也是实现各种交互式Web应用的核心。本章节将通过一个有趣的项目——网页版石头剪刀布游戏，深入探索如何在Node.js环境下利用HTTP协议构建实时互动的应用。我们将从基础的HTTP服务器搭建开始，逐步引入前端HTML/CSS/JavaScript技术，以及Node.js后端逻辑处理，最终完成一个完整的Web游戏。

准备工作

在开始之前，请确保你的开发环境中已经安装了Node.js。Node.js不仅是一个JavaScript运行环境，还提供了丰富的模块和包管理工具npm（Node Package Manager），方便我们快速搭建项目。

创建项目目录

首先，在命令行中创建一个新的文件夹作为项目目录，并进入该目录：

mkdir node-rock-paper-scissors
cd node-rock-paper-scissors

初始化npm项目

在项目目录下，运行以下命令初始化npm项目：

npm init -y

这将自动生成一个package.json文件，用于管理项目的依赖。

安装HTTP服务器模块

虽然Node.js的http模块已经足够强大，但为了简化开发，我们可以使用更高级的第三方库如express来快速搭建HTTP服务器。安装express：

npm install express

构建HTTP服务器

接下来，我们将使用Express框架来创建一个简单的HTTP服务器。在项目根目录下创建一个名为server.js的文件，并编写以下代码：

const express = require('express');
const app = express();
const PORT = process.env.PORT || 3000;
app.use(express.static('public')); // 设置静态文件目录
app.get('/', (req, res) => {
    res.sendFile('public/index.html'); // 访问根路径时返回首页
});
app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

这段代码创建了一个Express应用，设置了静态文件目录为public（稍后将用于存放前端文件），并定义了一个路由规则，当访问根路径（/）时，返回public目录下的index.html文件。

前端页面设计

接下来，在public目录下创建index.html文件，并编写以下HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页版石头剪刀布</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>网页版石头剪刀布</h1>
    <div id="gameArea">
        <button id="rock">石头</button>
        <button id="paper">剪刀</button>
        <button id="scissors">布</button>
        <p id="result"></p>
    </div>
    <script src="game.js"></script>
</body>
</html>

同时，创建style.css和game.js文件来分别添加样式和逻辑。

CSS样式（style.css）

#gameArea {
    text-align: center;
    margin-top: 50px;
}
button {
    padding: 10px 20px;
    margin: 10px;
    font-size: 20px;
    cursor: pointer;
}
#result {
    margin-top: 20px;
    font-size: 24px;
    color: #333;
}

JavaScript逻辑（game.js）

这里，我们将使用JavaScript来处理用户点击事件，并通过AJAX与服务器通信。但考虑到简化，我们先在前端实现基本的逻辑判断，后续章节将介绍如何集成后端逻辑。

document.getElementById('rock').addEventListener('click', function() {
    playGame('rock');
});
document.getElementById('paper').addEventListener('click', function() {
    playGame('paper');
});
document.getElementById('scissors').addEventListener('click', function() {
    playGame('scissors');
});
function playGame(choice) {
    const computerChoices = ['rock', 'paper', 'scissors'];
    const computerChoice = computerChoices[Math.floor(Math.random() * computerChoices.length)];
    let result = '';
    if (choice === computerChoice) {
        result = '平局!';
    } else if ((choice === 'rock' && computerChoice === 'scissors') ||
               (choice === 'paper' && computerChoice === 'rock') ||
               (choice === 'scissors' && computerChoice === 'paper')) {
        result = '你赢了!';
    } else {
        result = '你输了!';
    }
    document.getElementById('result').textContent = result + ' 你选择了' + choice + '，电脑选择了' + computerChoice;
}