基于JS框架与MongoDB的在线互动冒险游戏开发咨询

核心技术栈（适配需求+快速上线） #

• 后端：Express + MongoDB Atlas（在线数据库，免费额度覆盖5人场景）
• 前端：原生JS/Vue3（轻量，无需复杂配置）
• 部署：Vercel（一键部署Node.js项目，无需本地环境）
• 同步逻辑：大屏端定时拉取统计结果（替代持续推送，降低复杂度）

关键代码实现 #

1. 后端（Express + MongoDB Atlas） #

先在MongoDB Atlas创建免费集群，获取连接字符串，作为环境变量MONGODB_URI。

const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');

const app = express();
app.use(cors());
app.use(express.json());

// 连接在线MongoDB
mongoose.connect(process.env.MONGODB_URI)
  .then(() => console.log('数据库连接成功'))
  .catch(err => console.error(err));

// 投票数据模型
const VoteSchema = new mongoose.Schema({
  choice: { type: String, enum: ['A', 'B'], required: true },
  sessionId: { type: String, default: 'default' } // 用于区分不同游戏场次
});
const Vote = mongoose.model('Vote', VoteSchema);

// 手机端提交选项接口
app.post('/submit-vote', async (req, res) => {
  const { choice } = req.body;
  if (!['A', 'B'].includes(choice)) return res.status(400).send('无效选项');
  
  const vote = new Vote({ choice });
  await vote.save();
  res.status(200).send('提交成功');
});

// 大屏端获取统计结果接口
app.get('/get-result', async (req, res) => {
  const stats = await Vote.aggregate([
    { $group: { _id: '$choice', count: { $sum: 1 } } }
  ]);
  
  let result = 'A'; // 默认选项
  if (stats.length === 2) {
    result = stats[0].count > stats[1].count ? stats[0]._id : stats[1]._id;
  } else if (stats.length === 1) {
    result = stats[0]._id;
  }
  
  res.json({ result, stats });
});

// 重置投票（用于下一轮剧情）
app.post('/reset-votes', async (req, res) => {
  await Vote.deleteMany({});
  res.status(200).send('投票已重置');
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`服务运行在端口 ${PORT}`));

2. 手机端前端（极简版） #

<!DOCTYPE html>
<html>
<body>
  <h3>选择你的选项</h3>
  <button onclick="submitVote('A')">选项A</button>
  <button onclick="submitVote('B')">选项B</button>

  <script>
    async function submitVote(choice) {
      try {
        await fetch('https://你的Vercel部署域名/submit-vote', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ choice })
        });
        alert('提交成功！');
      } catch (err) {
        console.error(err);
        alert('提交失败，请重试');
      }
    }
  </script>
</body>
</html>

3. 大屏端前端（定时同步版） #

<!DOCTYPE html>
<html>
<body>
  <video id="storyVideo" width="100%" controls>
    <source src="初始剧情视频地址" type="video/mp4">
  </video>
  <div id="question"></div>
  <div id="result"></div>

  <script>
    const video = document.getElementById('storyVideo');
    const resultEl = document.getElementById('result');
    let currentRound = 1;

    // 定时拉取结果（每5秒一次，可调整）
    setInterval(async () => {
      try {
        const res = await fetch('https://你的Vercel部署域名/get-result');
        const data = await res.json();
        resultEl.innerHTML = `当前统计：A(${data.stats.find(s => s._id === 'A')?.count || 0}) | B(${data.stats.find(s => s._id === 'B')?.count || 0})`;
        
        // 根据结果切换剧情（示例逻辑）
        if (currentRound === 1 && data.result) {
          video.src = data.result === 'A' ? 'A剧情视频地址' : 'B剧情视频地址';
          video.play();
          currentRound++;
          // 切换后重置投票，准备下一轮
          await fetch('https://你的Vercel部署域名/reset-votes', { method: 'POST' });
        }
      } catch (err) {
        console.error(err);
      }
    }, 5000);
  </script>
</body>
</html>

快速部署步骤（10分钟完成） #

1. 把后端代码上传到GitHub仓库（公开/私有均可）
2. 登录Vercel，导入该仓库，平台会自动识别Express项目
3. 在Vercel项目设置中添加环境变量MONGODB_URI，值为MongoDB Atlas的连接字符串
4. 部署完成后，Vercel会提供在线域名，替换前端代码中的域名即可
5. 手机端直接打开对应HTML页面（可上传到Vercel静态页面或免费静态托管），大屏端打开大屏页面

注意事项 #

• 若需区分多场次游戏，可给sessionId参数赋值，提交和查询时带上该参数
• 定时拉取的间隔可根据游戏节奏调整，避免过于频繁请求
• MongoDB Atlas的免费集群足够支撑5人规模的投票，无需额外配置

内容的提问来源于stack exchange，提问作者Li-Ming