世界を動かす技術を、日本語で。

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

概要

  • Snakeゲーム の操作方法について解説
  • 矢印キーWASDキー による移動方法
  • URLリンク が表示されない場合の対応策
  • ページ表示が崩れた際の クリック手順
  • シンプルな手順で初心者にも分かりやすく説明

Snakeゲームの基本操作方法

  • Snakeゲーム の操作には キーボード を使用
  • 上下左右の矢印キー で蛇の移動方向を変更
  • Wキー:上移動Aキー:左移動Sキー:下移動Dキー:右移動 の割り当て
  • WASDキー は矢印キーの代用として利用可能
  • ゲーム画面が表示されたら、 任意のキー で操作開始

ページURLや表示不具合時の対処法

  • ページURL が見えない、または表示が崩れている場合の対応
  • 画面上の「 Click here」や リンク をクリックしてリロード
  • リンクをクリックすることで ページの再表示修正 が可能
  • それでも解決しない場合は ブラウザの再読み込み を推奨
  • 他の ブラウザデバイス でのアクセスも検討

Hackerたちの意見

反応がすごく良くてびっくりした!戻るボタンをクリックしたらすぐにHNに戻れたのも嬉しかった。履歴がごちゃごちゃにならないのがいいアイデアだね!

ソースを読んでみると、URLの更新にレート制限があるブラウザだと、バックボタンが使えなくなる別の方法を使わなきゃいけないみたい。

history.pushState と history.replaceState

すごくユニークで革新的なアイデアだね。やるじゃん!

最初に見逃した人や、最初の説明がよく分からなかった人のために、左上に小さなシアンの疑問符があって、そこに書いてあるのはこうだよ:> 矢印キーかWASDでURL上の蛇を操作する。ページのURLが見えない場合や、変なスラッシュでおかしくなってる場合はここをクリックしてね。それと、アドレスバーが長くて世界が見えるブラウザウィンドウが必要だよ ;)。コンセプトが好きで、結構うまくいってるね!

思ったより難しいな。蛇の周りにある余分な空白の点がちょっと気 distracting だね。ページに点がないとどうなるんだろう?

これがハッカーニュースに来る理由だよ。:) いい一日になった!

なんて素敵なアイデアなんだろう、笑。点を使ってURLを更新するために点字のパターンを使ってるんだね。好きだな。 https://github.com/epidemian/snake/blob/master/snake.js

これ、すごい!唯一の問題は、空白に使われているキャラクターが、私のブラウザではちょっと見栄えが悪くて、モノスペースじゃない四角がたくさん並んでるみたい。改善策として、Unicodeには256個の4x2の点字パターンが全部含まれてるから、背景に⣿を使って、蛇や食べ物をネガティブスペースとしてくり抜くのはどうかな?例えば、⣿⣿⣛⣛⣛⣛⣛⣩⣽⣿⣯⣿⣿⣿ これなら均等な間隔が保てて、読みやすさも変わらないよ。

ちょっと前に似たようなことをやったけど、ファビコンを使ったやつだよ。https://franciscouzo.github.io/favisnake/

すごく賢いし、遊べるね!ありがとう!