使用 Node.js 构建本地石头剪刀布游戏

2023-10-06 18:14:13

<html>
<head>



<style>
body {
  font-family: sans-serif;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.5em;
}

p {
  font-size: 1em;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin-right: 1em;
}

#game-board {
  display: flex;
  justify-content: center;
  align-items: center;
}

#game-board > div {
  width: 100px;
  height: 100px;
  background-color: #fff;
  border: 1px solid #000;
  margin: 1em;
  padding: 1em;
  font-size: 2em;
  text-align: center;
}

#game-board > div:hover {
  background-color: #ccc;
}

#game-board > div.selected {
  background-color: #000;
  color: #fff;
}

#game-status {
  font-size: 1.5em;
  text-align: center;
}
</style>
</head>
<body>
<h1>使用 Node.js 构建本地石头剪刀布游戏</h1>

<p>石头剪刀布是一种经典的两人游戏，游戏规则简单，但非常有趣。在本文中，我们将引导您使用 Node.js 构建一个简单的石头剪刀布游戏，该游戏可以在本地运行，并允许多名玩家加入。我们还将讨论一些常见的错误以及如何解决这些错误。</p>

<h2>游戏规则</h2>

<p>石头剪刀布的游戏规则非常简单。玩家首先选择自己的出拳方式，可以是石头、剪刀或布。然后，玩家同时出拳，比较出拳方式决定胜负。石头胜剪刀，剪刀胜布，布胜石头。如果玩家出拳方式相同，则为平局。</p>

<h2>使用 Node.js 构建游戏</h2>

<p>要使用 Node.js 构建石头剪刀布游戏，我们需要创建一个新的 Node.js 项目。可以使用以下命令创建一个新的 Node.js 项目：</p>

mkdir石头剪刀布
cd 石头剪刀布
npm init -y


<p>创建项目后，我们需要安装一些必要的依赖项。可以使用以下命令安装依赖项：</p>

npm install express socket.io


<p>安装依赖项后，我们需要创建一个新的 JavaScript 文件来定义游戏逻辑。我们将该文件命名为 <code>game.js</code>。在 <code>game.js</code> 文件中，我们需要编写以下代码：</p>

```javascript
const express = require('express');
const socketIO = require('socket.io');

const app = express();
app.use(express.static('public'));

const server = app.listen(3000);
const io = socketIO(server);

io.on('connection', (socket) => {
  console.log('A new player has connected.');

  socket.on('joinGame', (data) => {
    socket.join(data.room);
  });

  socket.on('play', (data) => {
    const choices = ['rock', 'paper', 'scissors'];
    const playerChoice = data.choice;
    const computerChoice = choices[Math.floor(Math.random() * choices.length)];

    if (playerChoice === computerChoice) {
      socket.emit('result', { outcome: 'tie' });
    } else if (playerChoice === 'rock' && computerChoice === 'scissors') {
      socket.emit('result', { outcome: 'win' });
    } else if (playerChoice === 'paper' && computerChoice === 'rock') {
      socket.emit('result', { outcome: 'win' });
    } else if (playerChoice === 'scissors' && computerChoice === 'paper') {
      socket.emit('result', { outcome: 'win' });
    } else {
      socket.emit('result', { outcome: 'lose' });
    }
  });
});

在 game.js 文件中，我们首先使用 express 和 socket.io 创建了一个新的服务器。然后，我们在服务器上设置了一个静态文件路由，以便客户端可以访问游戏的 HTML 文件。接下来，我们使用 socket.io 监听客户端的连接。当客户端连接到服务器时，我们打印一条消息，表示一个新的玩家已连接。然后，我们监听客户端发送的 joinGame 和 play 事件。当客户端发送 joinGame 事件时，我们将客户端加入到游戏房间中。当客户端发送 play 事件时，我们生成一个随机的出拳方式，并与客户端的出拳方式比较，以确定胜负。

接下来，我们需要创建一个 HTML 文件来定义游戏的用户界面。我们将该文件命名为 index.html。在 index.html 文件中，我们需要编写以下代码：

<!DOCTYPE html>
<html>
<head>
  
  <script src="/socket.io/socket.io.js"></script>
  <script src="game.js"></script>
</head>
<body>
  <h1>石头剪刀布</h1>

  <div id="game-board">
    <div id="rock" class="choice">石头</div>
    <div id="paper" class="choice">剪刀</div>
    <div id="scissors" class="choice">布</div>
  </div>

  <div id="game-status"></div>

  <script>
    const socket = io();

    const choices = document.querySelectorAll('.choice');
    choices.forEach((choice) => {
      choice.addEventListener('click', () => {
        const choiceValue = choice.id;
        socket.emit('play', { choice: choiceValue });
      });
    });

    socket.on('result', (data) => {
      const gameStatus = document.getElementById('game-status');
      if (data.outcome === 'win') {
        gameStatus.textContent = '你赢了！';
      } else if (data.outcome === 'lose') {
        gameStatus.textContent = '你输了！';
      } else {
        gameStatus.textContent = '平局！';
      }
    });
  </script>
</body>
</html>

在 index.html 文件中，我们首先加载了 socket.io 和 game.js 文件。然后，我们定义了游戏的用户界面。游戏用户界面包括一个游戏面板和一个游戏状态显示区。游戏面板由三个按钮组成，分别代表石头、剪刀和布。游戏状态显示区用于显示游戏的结果。

接下来，我们需要编写 JavaScript 代码来处理游戏逻辑。我们将 JavaScript 代码放在 game.js 文件中。在 game.js 文件中，我们首先使用 socket.io 连接到服务器。然后，我们为游戏面板上的按钮添加事件监听器。当玩家点击按钮时，我们将玩家的出拳方式发送到服务器。服务器收到玩家的出拳方式后，会生成一个随机的出拳方式，并与玩家的出拳方式比较，以确定胜负。服务器会将游戏结果发送回玩家，玩家会根据游戏结果更新游戏状态显示区。