Lee-Si-Yoon/ziphockey-2p

airhockey mobile webgame

Airhockey multiplayer webgame
멀티플레이어 에어하키 모바일 게임

Preview

2P play

3P play

Project Goal

Nostalgia about retro games, especially how we played it. We were at the same place, right next to each other, keeping our eyes on the game screen and also to the other players. Though family console games now take the role of those experiences, I wanted a web version of it for better accessibility.

레트로 게임의 플레이방식에 대한 그리움으로 히번 프로젝트를 진행해봤습니다. 같은 장소에서 서로 부대끼며 게임에 집중하되 상대방의 눈치도 봐야하는 그러한 플레이 경험을 만들어보고 싶었습니다. 지금은 가족용 콘솔 게임이 그런 경험을 이어오고 있지만, 접근성이 훨씬 좋은 웹버전으로 만들어보고자 했습니다.

Using

socket.io, nodejs, express, pug, gsap

Structure

$${\color{yellow}Yellow \color{black} \space is \space emitters}$$

$${\color{green}Green \color{black} \space is \space followers}$$

Bugs not fixed

1. failed to disable mobile Safari's pinch zoom

chrome	safari

Trials tried

-webkit-user-select: none;
user-select: none;
-ms-touch-action: none;
-webkit-touch-callout: none;

document.addEventListener(
  "touchstart",
  (event) => {
    if (event.touches.length > 1) {
      event.preventDefault();
      event.stopPropagation();
    }
  },
  { passive: false }
);

document.addEventListener(
  "touchend",
  function (e) {
    let now = new Date().getTime();
    if (now - lastTouchEnd <= 300) {
      e.preventDefault();
    }
    lastTouchEnd = now;
  },
  false
);

2. position lag
   caculated position by server → emit position if difference occurred → linear interpolation by client → rendered with gsap's ease
   still finding way how to fix it

---

Notes

• 서버비용으로 인해 사이트를 닫아뒀습니다
• 3P도 마찬가지의 이유로 인해 레포를 비공개했습니다