Humanity

Edit the world by your favorite way

JavaScript でスマホから気軽に遊べる糸通しゲーム作った

糸通し

たまにものすごくやりたくなる。 ちょうど HTML5 Fullscreen API で遊びたいと思ってたので作った。

最初データはランダムじゃないけど一通り動くところまで作ったあと一旦興味を失ってしまった。 ので、そこからちゃんと遊べる状態にするまでずいぶん間が開いてしまった。

ただこれで最近中途半端に進めてたことは一旦片付けたのでスッキリした(仕事の方はスッキリしてない。忙しい時ほど寝る時間を削って趣味のコードを書いてしまう法則)。

ほしかった機能

  • スマホから遊べること
    • スマホの場合、「タッチしっぱなし・離す」で操作できること
  • PC から遊べること
    • PC の場合、「クリック押しっぱなし・離す」で操作できること
  • ゲームのステージ部分のみをフルスクリーンで拡大できること

TODO & FIXME


  • これは直さなくていいや


実装中に調べたこと

本文ここまで。以下は調べたことです (自分用メモ)。

HTML5 Fullscreen API

これ知ってゲーム作りたくなった。

SVG

D3.js

しかし、D3はデータを基に座標系に変換するなどの計算は行ってくれますが、実際に図を描画する機能はありません。 (中略) 実際にツリーマップを描画する処理は製作者が自身でコードに記述する必要があります。 これは一見不親切なように思えますが、Chartライブラリが提供するグラフのテンプレートデザインをカスタマイズするだけでは足りず、自ら凝ったデータビジュアライゼーションを作成したい製作者にとっては描画する方法を自由に選択できる利点となります。

React や Angular みたいにテンプレート&コンポーネント指向に作れないのはちょっと面倒だと感じた… んだけど次の記事を読んで気が変わった。D3.js 便利。

SVG, Canvas, WebGL の使い分け

requestAnimationFrame