node.js环境搭建并运行简单的node游戏

前端

2023-12-10 19:50:10

前言

Node.js是一个非常流行的JavaScript运行环境，它允许开发人员在服务器端运行JavaScript代码。Node.js是一个事件驱动、非阻塞的平台，非常适合构建高性能、可伸缩的网络应用程序。

搭建开发环境

安装Node.js

首先，您需要在您的计算机上安装Node.js。您可以从Node.js官网下载安装程序，并按照安装向导进行安装。

安装Nodemon

Nodemon是一个Node.js模块，它可以监视文件更改并自动重启Node.js应用程序。这对于开发人员来说非常方便，因为它可以避免在每次更改代码后手动重启应用程序。

您可以使用以下命令安装Nodemon：

npm install -g nodemon

安装Express

Express是一个Node.js框架，它可以帮助您快速构建Web应用程序。

您可以使用以下命令安装Express：

npm install express

创建项目

现在，您可以创建一个新的Node.js项目。首先，创建一个新的文件夹，然后在该文件夹中打开终端窗口。

在终端窗口中，运行以下命令：

npm init -y

这将创建一个新的package.json文件。package.json文件包含了有关您的项目的元数据，例如项目名称、版本、依赖项等。

现在，您可以安装Express：

npm install express

创建服务器

现在，您可以创建服务器了。在项目文件夹中，创建一个名为server.js的文件。

在server.js文件中，输入以下代码：

const express = require('express');

const app = express();

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(3000, () => {
  console.log('Server is listening on port 3000');
});

这将创建一个简单的服务器，当您访问http://localhost:3000时，它将返回“Hello World!”。

猜数字游戏实现

服务器端：

const express = require('express');
const random = require('random');

const app = express();

app.use(express.json());

// 设置游戏参数
const maxNumber = 100;
const maxGuesses = 10;

// 开始游戏
app.post('/start', (req, res) => {
  // 生成随机数
  const number = random.int(1, maxNumber);

  // 创建游戏状态
  const state = {
    number,
    guesses: 0,
  };

  // 返回游戏状态
  res.json(state);
});

// 猜测数字
app.post('/guess', (req, res) => {
  // 获取猜测的数字
  const guess = req.body.guess;

  // 获取游戏状态
  const state = req.body.state;

  // 检查猜测是否正确
  if (guess === state.number) {
    // 猜测正确，游戏结束
    res.json({
      won: true,
      guesses: state.guesses,
    });
  } else {
    // 猜测错误，更新游戏状态
    state.guesses++;

    // 检查猜测次数是否达到上限
    if (state.guesses >= maxGuesses) {
      // 猜测次数达到上限，游戏结束
      res.json({
        won: false,
        guesses: state.guesses,
      });
    } else {
      // 猜测次数未达到上限，继续游戏
      res.json(state);
    }
  }
});

// 监听端口
app.listen(3000, () => {
  console.log('Server is listening on port 3000');
});

客户端：

<!DOCTYPE html>
<html>
<head>
  
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
  <h1>猜数字游戏</h1>

  <form id="start-form">
    <button type="submit">开始游戏</button>
  </form>

  <div id="game-container">
    <form id="guess-form">
      <input type="number" id="guess-input" placeholder="猜测一个数字">
      <button type="submit">猜测</button>
    </form>

    <div id="result"></div>
  </div>

  <script>
    const startForm = document.getElementById('start-form');
    const gameContainer = document.getElementById('game-container');
    const guessForm = document.getElementById('guess-form');
    const guessInput = document.getElementById('guess-input');
    const result = document.getElementById('result');

    // 开始游戏
    startForm.addEventListener('submit', (e) => {
      e.preventDefault();

      // 发送请求开始游戏
      axios.post('/start')
        .then((res) => {
          // 获取游戏状态
          const state = res.data;

          // 显示游戏界面
          gameContainer.style.display = 'block';

          // 清空结果
          result.innerHTML = '';
        })
        .catch((err) => {
          console.error(err);
        });
    });

    // 猜测数字
    guessForm.addEventListener('submit', (e) => {
      e.preventDefault();

      // 获取猜测的数字
      const guess = parseInt(guessInput.value);

      // 发送请求猜测数字
      axios.post('/guess', {
        guess,
        state,
      })
        .then((res) => {
          // 获取游戏状态
          const state = res.data;

          // 检查猜测是否正确
          if (state.won) {
            // 猜测正确，显示结果
            result.innerHTML = `你赢了！你猜了 ${state.guesses} 次。`;
          } else if (state.guesses >= maxGuesses) {
            // 猜测次数达到上限，显示结果
            result.innerHTML = `你输了！你猜了 ${state.guesses} 次。`;
          } else {
            // 猜测错误，继续游戏
            result.innerHTML = `你猜错了！你还有 ${maxGuesses - state.guesses} 次机会。`;
          }
        })
        .catch((err) => {
          console.error(err);
        });
    });
  </script>
</body>
</html>