把客厅变成 TouchCoop 的沙发合作竞技场

Source: Dev.to

概览

大家好 👋，

今天想和大家分享点有趣的东西。想象一下：你和朋友们在家里，电视上正播放着大画面，大家不再为蓝牙手柄争抢，也不需要轮流传递同一个游戏手柄……每个人只需要掏出手机，立刻就能成为玩家。

无需账号。无需安装。只要扫描二维码即可开始疯狂按键。

这正是 TouchCoop 所实现的——一个小巧的 TypeScript 库，几乎不需要服务器，就能把这个设想变为现实。

• 主机在笔记本/连接到电视的浏览器上运行游戏
• 最多 4 名玩家通过二维码在手机上加入
• 手机上的触摸按钮 → 通过 WebRTC 实时输入到游戏
• 非常适合休闲游戏：平台跳跃、派对游戏、本地解谜

不适合 对延迟要求极高的游戏，如 FPS（WebRTC 延迟虽好，但达不到电竞级别）

快速架构概览

• The Match page（主游戏）：创建一个 Match 实例，显示用于加入的二维码，并接收玩家事件。
• The Gamepad page（控制器）：通过二维码打开，创建一个 Player 实例，进行连接，并发送触摸事件。

两者都是静态网页——除信令阶段外不需要后端。

60 秒入门

安装库

npm install touch-coop

1. Match 端（你的游戏）

import { Match, PlayerEvent } from "touch-coop";

const gamePadURL = "https://your-domain.com/gamepad"; // Must be absolute URL for QR

function handlePlayerEvent(event: PlayerEvent) {
  switch (event.action) {
    case "JOIN":
      console.log(`Player ${event.playerId} joined 🎉`);
      // Maybe spawn player avatar, play sound, etc.
      break;
    case "LEAVE":
      console.log(`Player ${event.playerId} left 😢`);
      break;
    case "MOVE":
      console.log(`Player ${event.playerId} → ${event.button}`);
      // Map "up", "A", "X" etc. to game actions
      if (event.button === "up") jumpPlayer(event.playerId);
      break;
  }
}

const match = new Match(gamePadURL, handlePlayerEvent);

// Optional: custom PeerJS server for better reliability
// const match = new Match(gamePadURL, handlePlayerEvent, {
//   host: 'your-peerjs-server.com',
//   port: 9000,
//   path: '/peerjs'
// });

// Later: match.requestNewPlayerToJoin() → returns promise with QR data/URL

每次想要添加玩家时调用 match.requestNewPlayerToJoin() —— 它会返回用于生成二维码的加入 URL（可以使用许多库来完成二维码生成）。

2. Gamepad 端（React 示例）

import React, { useEffect, useState } from "react";
import { Player } from "touch-coop";

const player = new Player(); // Can pass custom PeerJS config too

export default function GamePad() {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    (async () => {
      try {
        await player.joinMatch(); // Parses peer ID from URL query params
        setLoading(false);
      } catch (err) {
        console.error("Failed to join", err);
      }
    })();
  }, []);

  if (loading) return <>Connecting...</>;

  return (
    <>
      <button onClick={() => player.sendMove("up")}>↑</button>
      <button onClick={() => player.sendMove("left")}>←</button>
      <button onClick={() => player.sendMove("right")}>→</button>
      <button onClick={() => player.sendMove("down")}>↓</button>

      <button onClick={() => player.sendMove("A")}>A</button>
      <button onClick={() => player.sendMove("B")}>B</button>
      <button onClick={() => player.sendMove("X")}>X</button>
      <button onClick={() => player.sendMove("Y")}>Y</button>
    </>
  );
}

实时演示 & 亲自尝试

原项目有一个很棒的小演示：

→

最后思考

TouchCoop 是浏览器 API 发展到今天的一个美好例子：WebRTC + TypeScript + modern build tools = couch co‑op without native apps or complex backends.

如果你正在构建休闲多人体验或派对游戏，试试看吧。

你是否已经或计划打造一款沙发合作游戏？在下方留下评论——我很想听听你的多人游戏故事，或看到你的项目链接！

祝编码愉快，评论区见 ✌️