URL 주소창에서 스네이크 게임 플레이하기

Hacker News 의견

• 예전에 비슷한 걸 만든 적이 있음, favicon을 활용했음
  https://franciscouzo.github.io/favisnake/
  • 예전에 favicon으로 2048 게임도 만들었었음
    https://aquova.net/games/2048/
  • 정말 신기하다고 느낌, 레티나 디스플레이일수록 플레이하기 더 어려워짐
• 정말 멋지다고 생각함, 다만 공백을 표현하는 문자가 내 브라우저에선 좀 이상하게 보임, 마치 폭이 제각각인 사각형들처럼 보임
  유니코드에는 모든 4x2 브라유 점자 패턴(256종류)이 있으니, ⣿ 를 배경으로 쓰고 그 위에 스네이크나 먹이를 음영으로 깎아내는 방법도 고려할 만함
  예시: ⣿⣿⣛⣛⣛⣛⣛⣩⣽⣿⣯⣿⣿⣿
  이렇게 하면 글자 간격이 일정해서 읽기 쉬울 것 같다는 생각이 듦
  • 나도 그걸 고민했었음, 초반에는 확실히 도움이 되겠지만 후반엔 오히려 상황을 더 나쁘게 만들 수도 있을 것 같음
    스네이크가 커질수록 그리드에 더 많이 퍼지고, 결국 더 많은 공백 대체 문자가 눈에 띌 수밖에 없음
    게임이 진행될수록 더 빨라지기 때문에 집중해야 하는 구간에 화면이 더 복잡해지는 건 바람직하지 않다고 생각함
    이 이상한 공백 문제를 제대로 해결할 방법이 있으면 정말 알고 싶음, 다만 페이지 <title> 같은 텍스트 출력에 의존하려고 하진 않음
    참고로 Reddit에 최근 올라온 비슷한 스네이크 게임도 제목에 그리더라
    https://old.reddit.com/r/webdev/…
    당장 고득점을 노린다면 "?"를 클릭해서 URL을 페이지에 표시하는 방식이 제일 나아 보임
• 반응성이 매우 뛰어나서 놀라웠고, 다시 돌아오자마자 HN으로 깔끔하게 복귀해서 정말 기뻤음
  히스토리도 엉키지 않음, 진짜 기발하다고 느낌
  • history.pushState랑 history.replaceState를 잘 활용한 것 같음
  • 소스코드 보니 URL 업데이트를 제한하는 몇몇 브라우저에서는 백버튼 기능도 차단하는 다른 방법을 써야 하는 것 같음
• 정말 기발한 아이디어라서 감탄했음
  브라유 점자 패턴을 이용해서 점 정보를 URL로 바꿔서 사용하는 점이 인상적임
  https://github.com/epidemian/snake/blob/master/snake.js
• 이런 게 있어서 hackernews에 오는 이유가 생김, 하루가 즐거워짐
• 정말 독특하고 창의적인 아이디어라고 생각함
• 처음에 어떻게 동작하는지 잘 몰랐던 분들을 위해, 좌측 상단에 작은 시안색 물음표가 있음
  여기에는 설명이 되어 있음

  방향키나 WASD로 URL에서 스네이크를 조작할 수 있음. URL이 잘 안 보이거나 이상하게 보이면 클릭
  추가적으로, 주소창이 충분히 길어야 화면을 볼 수 있으니 창을 넓게 해서 플레이해야 함
  참신한 컨셉이고 잘 동작함

• 생각보다 난이도가 높음, 스네이크 주변의 빈 점들이 꽤 산만하게 느껴짐
  빈 점들이 없는 방식으로 페이지에 표시하면 어떻게 보일지 궁금함
• 정말 영리하고 플레이 자체도 충분히 재미있는 게임임