Skip to content

Textloding/party-games

BranchesTags

Repository files navigation

🎮 Party Games - 大屏幕多人派对游戏合集

支持 50+ 人同时参与的大屏幕互动游戏合集。玩家通过手机扫码加入，在大屏幕上进行多人实时竞技。无需下载 APP，扫码即玩。

支持游戏进行中扫码加入（一二三木头人、黄金矿工、坦克大战）。

� 游戏列表

游戏 类型 人数 中途加入 说明
� 一二三木头人 淘汰赛 1-50 ✅ 经典鱿鱼游戏，红绿灯停走，被发现即淘汰
� 摇晃拔河 团队对抗 2-50 ❌ 两队对抗，摇晃手机为队伍加油
🏎️ 道具赛车 竞速 1-50 ❌ 使用道具攻击对手，争夺冠军
⛏️ 黄金矿工 同屏竞技 1-50+ ✅ 多人挖矿，抢流动大奖，道具商店
🎯 坦克大战 大混战 1-50+ ✅ 操控坦克射击敌人，无限复活，争夺最强
� 翻牌游戏 记忆 单人 — 翻牌配对，考验记忆力（外部链接）

✨ 核心特性

  • 大屏幕 + 手机：大屏投屏展示，手机扫码操控
  • 即扫即玩：无需下载 APP，浏览器直接参与
  • 中途加入：支持游戏进行中扫码加入（完美位置算法，不影响已有玩家）
  • 50+ 人同屏：优化的 WebSocket 广播和 Canvas 渲染
  • 实时排行榜：大屏实时显示排名和游戏动态
  • 丰富的游戏类型：淘汰赛、团队对抗、竞速、同屏竞技、大混战

🚀 快速开始

环境要求

  • Node.js >= 18.0.0
  • npm >= 8.0.0

1. 克隆项目

git clone <your-repo-url> party-games
cd party-games

2. 安装依赖

npm run install-all

3. 启动开发环境

npm run dev

4. 访问

  • 大屏幕端：http://localhost:3000（游戏选择页 → 选游戏 → 大屏展示）
  • 手机端：扫描大屏幕上的二维码

确保大屏幕和手机在同一局域网内。

📁 项目结构

party-games/
├── server/                          # Node.js 后端
│   ├── index.js                     # 主入口（Express + Socket.IO + 鱿鱼/拔河/赛车逻辑）
│   ├── goldMinerGame.js             # 黄金矿工游戏逻辑
│   └── tankBattleGame.js            # 坦克大战游戏逻辑
├── client/                          # React 前端
│   ├── public/
│   │   ├── audio/                   # 音效文件（需自行准备）
│   │   ├── video.mp4                # 首页背景视频（需自行准备）
│   │   └── favicon.svg
│   ├── src/
│   │   ├── App.jsx                  # 路由配置
│   │   ├── socket.js                # Socket.IO 客户端连接
│   │   ├── main.jsx                 # 入口文件
│   │   ├── index.css                # 全局样式 + TailwindCSS
│   │   └── pages/
│   │       ├── GameSelect.jsx       # 游戏选择主页
│   │       ├── Home.jsx             # 鱿鱼游戏大厅（大屏）
│   │       ├── Game.jsx             # 鱿鱼游戏进行（大屏）
│   │       ├── Mobile.jsx           # 鱿鱼游戏手机端
│   │       ├── GoldMiner/
│   │       │   ├── GoldMinerHome.jsx    # 黄金矿工大厅（大屏）
│   │       │   ├── GoldMinerGame.jsx    # 黄金矿工游戏（大屏）
│   │       │   └── GoldMinerMobile.jsx  # 黄金矿工手机端
│   │       ├── TankBattle/
│   │       │   ├── TankBattleHome.jsx   # 坦克大战大厅（大屏）
│   │       │   ├── TankBattleGame.jsx   # 坦克大战游戏（大屏）
│   │       │   └── TankBattleMobile.jsx # 坦克大战手机端
│   │       ├── TugOfWar/
│   │       │   ├── TugHome.jsx      # 拔河大厅
│   │       │   ├── TugGame.jsx      # 拔河游戏
│   │       │   └── TugMobile.jsx    # 拔河手机端
│   │       └── Racing/
│   │           ├── RaceHome.jsx     # 赛车大厅
│   │           ├── RaceGame.jsx     # 赛车游戏
│   │           └── RaceMobile.jsx   # 赛车手机端
│   ├── tailwind.config.js
│   ├── vite.config.js
│   └── package.json
├── .env.example                     # 环境变量模板
├── .gitignore
├── Dockerfile                       # Docker 部署
├── railway.json                     # Railway 部署配置
├── render.yaml                      # Render 部署配置
├── LICENSE
├── package.json
└── README.md

🎮 各游戏详细说明

🦑 一二三木头人

  • 路由：大屏 /squid-game → /squid-game/play，手机 /mobile
  • 玩法：娃娃背对时（绿灯）前进，转身时（红灯）停止，被检测到移动则淘汰
  • 三种难度：点击屏幕 / 摇晃手机 / 陀螺仪检测
  • 多生命：可配置玩家生命数
  • 虚拟玩家：每人可操纵多个角色

⛏️ 黄金矿工

  • 路由：大屏 /gold-miner → /gold-miner/game，手机 /gold-miner/mobile
  • 玩法：玩家分布在矿区四周，释放钩子抓取矿物
  • 矿物类型：金块、钻石、石头、炸弹、宝箱
  • 流动大奖：定期从屏幕边缘飘过高价值目标（矿车、流星等）
  • 道具商店：力量药水、磁铁、闪电、炸弹、精准、轮盘
  • 中途加入：完美位置算法，在最大间隙处插入新玩家，不影响已有玩家

🎯 坦克大战

  • 路由：大屏 /tank-battle → /tank-battle/game，手机 /tank-battle/mobile
  • 玩法：操控坦克在大地图上射击敌人，拾取道具
  • 地图：3200×2000 大地图，100+ 障碍物
  • 道具：回血、护盾、加速、连射、三连发
  • 手机端雷达：小地图显示附近敌人位置
  • 中途加入：新玩家出生点随机分配，3秒无敌保护

💪 摇晃拔河

  • 路由：大屏 /tug-of-war → /tug-of-war/game，手机 /tug-of-war/mobile
  • 玩法：两队对抗，摇晃手机为队伍贡献力量

🏎️ 道具赛车

  • 路由：大屏 /racing → /racing/game，手机 /racing/mobile
  • 玩法：竞速赛，使用道具攻击对手

🔧 技术栈

层 技术
后端 Node.js + Express + Socket.IO
前端 React 18 + Vite 5
样式 TailwindCSS 3 + Framer Motion
实时通信 WebSocket (Socket.IO 4)
二维码 qrcode (服务端生成)
部署 Docker / Railway / Render / PM2 + Nginx

🎵 资源文件

以下资源文件需要自行准备，放入对应目录：

client/public/
├── audio/
│   ├── mugunghwa.mp3     # 鱿鱼游戏原声（可选）
│   └── gunshot.mp3       # 枪声/淘汰音效（可选）
├── video.mp4             # 首页背景视频（可选）
└── video-poster.jpg      # 视频封面图（可选）

项目不含这些大文件，缺少时不会影响功能运行，仅影响音效和视频展示。

🌐 部署指南

环境变量

变量名 说明 默认值
PORT 服务端口 3001
NODE_ENV 运行环境 development

方案一：PM2 + Nginx（推荐生产环境）

# 安装依赖并构建
npm install
npm run build

# 使用 PM2 运行
npm install -g pm2
pm2 start server/index.js --name party-games
pm2 save && pm2 startup

Nginx 配置（WebSocket 支持）：

server {
    listen 80;
    server_name your-domain.com;

    location / {
        proxy_pass http://127.0.0.1:3001;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_read_timeout 86400;
    }
}

方案二：Docker

docker build -t party-games .
docker run -d -p 3000:3000 --name party-games party-games

方案三：宝塔面板

  1. 上传项目到 /www/wwwroot/party-games/
  2. 终端执行 npm install && npm run build
  3. PM2 管理器 → 添加项目 → 启动文件 server/index.js
  4. 网站 → 反向代理 → 目标 http://127.0.0.1:3001，添加 WebSocket 支持

方案四：Railway / Render

项目已包含 railway.json 和 render.yaml，连接 GitHub 仓库后自动部署。

📝 注意事项

  1. 确保大屏幕和手机在同一局域网内
  2. 手机端需要授权陀螺仪/加速度计权限（鱿鱼游戏中等/困难模式）
  3. 推荐使用 Chrome 或 Safari 浏览器
  4. 大量玩家时推荐有线网络连接
  5. 生产环境务必配置 Nginx 反向代理并启用 WebSocket

🤝 贡献

欢迎提交 Issue 和 Pull Request。

📄 License

MIT

About

大屏幕多人派对游戏合集 - 支持50+人同时参与，手机扫码即玩

Resources

Readme

License

MIT license
Activity

Stars

3 stars

Watchers

0 watching

Forks

2 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages