用 Node.js 构建石头剪刀布小游戏：一步一步指南

前端

2023-09-24 01:54:22

项目概述

石头剪刀布是一款经典游戏，它使用手势来决定胜负。在 Node.js 中构建这个游戏，您需要使用 socket.io 来实现多人在线功能，并使用 Node.js 的 HTTP 服务来托管游戏。

2. 前提条件

在开始之前，您需要确保满足以下前提条件：

安装并配置 Node.js 和 npm
安装文本编辑器或 IDE
熟悉基本的 JavaScript 和 Node.js 知识

3. 项目设置

创建一个新的 Node.js 项目文件夹，例如 rock-paper-scissors。
在项目文件夹中初始化 npm 包：

npm init -y

安装必要的 npm 包：

npm install express socket.io

4. 创建游戏服务器

在 server.js 文件中，编写以下代码：

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

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

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

  socket.on('play', (data) => {
    const opponent = findOpponent(socket.id);

    if (opponent) {
      io.to(opponent).emit('play', data);
    } else {
      socket.emit('waiting');
    }
  });

  socket.on('disconnect', () => {
    console.log('A user disconnected.');
  });
});

function findOpponent(socketId) {
  const sockets = io.sockets.sockets;
  for (const socket of sockets) {
    if (socket.id !== socketId && !socket.opponent) {
      socket.opponent = socketId;
      return socket.id;
    }
  }

  return null;
}

5. 创建游戏客户端

在 client.js 文件中，编写以下代码：

const socket = io();

const buttons = document.querySelectorAll('button');
buttons.forEach((button) => {
  button.addEventListener('click', () => {
    const choice = button.dataset.choice;
    socket.emit('play', choice);
  });
});

socket.on('play', (data) => {
  const opponentChoice = data;
  const result = determineWinner(myChoice, opponentChoice);

  displayResult(result);
});

socket.on('waiting', () => {
  alert('Waiting for an opponent.');
});

function determineWinner(myChoice, opponentChoice) {
  if (myChoice === opponentChoice) {
    return 'Tie';
  } else if (myChoice === 'rock' && opponentChoice === 'scissors') {
    return 'Win';
  } else if (myChoice === 'paper' && opponentChoice === 'rock') {
    return 'Win';
  } else if (myChoice === 'scissors' && opponentChoice === 'paper') {
    return 'Win';
  } else {
    return 'Lose';
  }
}

function displayResult(result) {
  const resultElement = document.getElementById('result');
  resultElement.textContent = result;
}