URLアドレスバーでスネークゲームをプレイする

• ユーザーはURLアドレスバーで snake ゲームを楽しめる
• キーボードの矢印キーまたは WASDでスネークを操作する仕組み
• Webページでは URL が正しく見えなかったり、**「霧」**の効果によってアドレスがぼやけて見えることがある
• URL を直接操作しながらゲームをプレイするユニークなインターフェースを提供
• 一般的なゲーム方式とは異なり、アドレスバーの活用によってひと味違う体験を提供

---

URLアドレスバーで進行する一風変わったゲーム方式

• ユーザーは矢印キーまたは WASD キーを使ってスネークを操作する
• ゲーム画面ではなく、ブラウザの URL アドレスバーで実際にゲームが進行する
• Webページの特性上、一部のユーザーにはURL が正しく表示されなかったり、ぼやけて見えたりする問題が発生することがある
• もし URL が正常に見えなかったり分かりにくかったりする場合は、ページの URL 表示を確認したり、再読み込みを試したりする必要がある
• 従来の HTML5 ゲームとは異なり、ユーザーは URL 領域で即時フィードバックを伴うインタラクティブなゲーム体験を味わえる

[GN⁺]

Hacker Newsのコメント

• 以前似たようなものを作ったことがある、faviconを使っていた
  https://franciscouzo.github.io/favisnake/
  • 以前faviconで2048ゲームも作っていた
    https://aquova.net/games/2048/
  • 本当に不思議で、Retinaディスプレイであるほどプレイしにくくなる
• 本当にすごいと思うが、空白を表す文字が自分のブラウザでは少しおかしく見えて、幅がバラバラな四角形のように見える
  Unicodeには4x2の点字パターンがすべて256種類あるので、⣿ を背景に使って、その上にスネークや餌を陰影のように削り出す方法も検討する価値がある
  例: ⣿⣿⣛⣛⣛⣛⣛⣩⣽⣿⣯⣿⣿⣿
  こうすれば文字間隔が一定で読みやすくなる気がする
  • 自分もそれは考えていた、序盤では確かに助けになるだろうが、終盤ではむしろ状況を悪くするかもしれない
    スネークが大きくなるほどグリッド全体に広がり、結局は空白の代替文字がさらに目立たざるを得ない
    ゲームが進むほど速くなるので、集中すべき区間で画面がより複雑になるのは望ましくないと思う
    この奇妙な空白問題をきちんと解決する方法があればぜひ知りたいが、ページの<title>のようなテキスト出力に頼るつもりはない
    ちなみに、最近Redditに上がっていた似たようなスネークゲームもタイトルに描いていた
    https://old.reddit.com/r/webdev/comments/1n9z77e/snake_in_the_tab_title/
    今すぐハイスコアを狙うなら、「?」をクリックしてURLをページに表示する方式がいちばん良さそうだ
• 反応性が非常に高くて驚いたし、戻ってきた瞬間にきれいにHNへ復帰して本当にうれしかった
  履歴もぐちゃぐちゃにならないし、本当に気が利いている
  • history.pushStateとhistory.replaceStateをうまく活用したようだ
  • ソースコードを見ると、URL更新を制限する一部のブラウザでは、バックボタン機能も無効化する別の方法を使わなければならないようだ
• 本当に巧みなアイデアで感心した
  点字パターンを使って点の情報をURLに変換して使っている点が印象的だ
  https://github.com/epidemian/snake/blob/master/snake.js
• こういうものがあるからhackernewsに来る理由ができるし、一日が楽しくなる
• 本当にユニークで創造的なアイデアだと思う
• 最初どう動くのかよく分からなかった人のために言うと、左上に小さなシアン色の疑問符がある
  そこに説明が書いてある

  矢印キーまたはWASDでURL内のスネークを操作できます。URLが見えにくい、またはおかしく見える場合はクリックしてください
  さらに、画面を見るにはアドレスバーが十分長くある必要があるので、ウィンドウを広げてプレイする必要がある
  新鮮なコンセプトで、しっかり動作する

• 思ったより難易度が高く、スネークの周りの空の点がかなり気を散らす
  空の点がない方式でページに表示したらどう見えるのか気になる
• 本当に賢くて、プレイ自体も十分に楽しいゲームだ