Realtime Multiplayer Game

赛博霓虹贪吃蛇
多人实时对战

为编程社团招新做的一款「扫码即玩、无需下载」的多人联机小游戏。摊位大屏投映整局对战画面,路过的同学扫个码就能加入战局,单局最多 20 人同场竞技;每局结束自动弹出胜者特效与社团二维码,把围观的人流变成留资。

Preview

真实运行界面

下面是从线上服务器直接截取的实机画面,不是效果图

赛博霓虹贪吃蛇 · 大屏端对战界面
大屏端 · 投屏后显示整局对战画面、全图雷达与加入二维码 20Hz 权威帧计算 · 单局最多 20 人同场
赛博霓虹贪吃蛇 · 手机控制器界面

手机扫码即玩,不用下载

观众用手机扫码打开控制器页面,挑一个皮肤、输入昵称就能进入大厅,等管理员统一开局。控制方式支持虚拟摇杆、屏幕滑动和陀螺仪三种,斜向与直行同速。

控制器不做本地逻辑计算,只把方向指令上行给服务器;每条蛇的位置、碰撞判定和得分全部由服务器裁决,所以一百个人看到的是同一局游戏。

虚拟摇杆滑屏转向陀螺仪 18 款皮肤三条命复活按住加速
Why

它解决的是什么问题

招新摊位的经典难题:怎么让人停下来、留下来

📱

5 秒上手,无需下载

纯 H5 网页,iOS / Android 浏览器直接打开。扫码 → 输入昵称 → 点加入,三步进入战局,没有安装成本。

🖥️

大屏天然吸围观

大屏幕投映整局对战,路过的人会停下来看;看完就想玩,于是扫码加入,形成「围观—加入—再围观」的滚雪球。

🎯

把流量变成留资

对局结束弹出胜者霓虹特效与社团二维码,参与者当场扫码关注,招新转化不再依赖拉人搭话。

Architecture

技术实现

典型的 C/S + WebSocket 架构,控制指令上行、游戏状态下行

⚙️

服务器

Node.js + Express + Socket.io 统一管理游戏主循环、碰撞判定、房间与玩家状态。20Hz 权威帧计算,大地图 362×226 格。

🖥️

大屏端

HTML5 Canvas 渲染 + 粒子系统,接收服务器广播的 gameState 绘制每一帧,霓虹发光拖尾、碰撞闪白、故障艺术标题。

🎮

手机控制器

方向键 / 滑动 / 陀螺仪三种操作方式,只上行方向指令、不做本地逻辑计算,保证所有玩家状态严格一致。

Node.jsExpressSocket.io WebSocketHTML5 Canvas粒子系统 实时状态同步移动端适配二维码加入
Play

进入对战

大屏端用电脑或投影打开,玩家用手机扫码或直接点第二个入口

Big Screen

对战大屏

投影或电脑全屏打开这个页面,它会渲染整局对战画面。建议在招新摊位用一台笔记本接投影,邀请围观的同学扫码加入。

▶ 打开对战大屏 建议全屏(F11)后投屏使用
Controller

手机控制器

手机打开这个页面就是手柄:支持方向键、屏幕滑动和陀螺仪三种操作方式,进入后输入昵称即可加入战局。

📱 打开手机控制器 大屏页面上会显示可扫码的二维码

游戏是独立的 Node.js + Socket.io 常驻服务,跑在自有服务器上,通过 game.wxekre.cn 这个子域名对外提供访问。