JavaScript でスマホから気軽に遊べる糸通しゲーム作った
たまにものすごくやりたくなる。 ちょうど HTML5 Fullscreen API で遊びたいと思ってたので作った。
最初データはランダムじゃないけど一通り動くところまで作ったあと一旦興味を失ってしまった。 ので、そこからちゃんと遊べる状態にするまでずいぶん間が開いてしまった。
久しぶりにやってみたくなったので糸通し作って遊んでた。まだ固定データだし素材(画像)がショボくてつまんないけど… https://t.co/BAteeWPuzs
— tyru (@_tyru_) 2016年6月5日
https://t.co/BAteeWxTHU を作るまでのあらすじ pic.twitter.com/NSE8eoN1bd
— tyru (@_tyru_) 2016年6月30日
ただこれで最近中途半端に進めてたことは一旦片付けたのでスッキリした（仕事の方はスッキリしてない。忙しい時ほど寝る時間を削って趣味のコードを書いてしまう法則）。
ほしかった機能
- スマホから遊べること
- スマホの場合、「タッチしっぱなし・離す」で操作できること
- PC から遊べること
- PC の場合、「クリック押しっぱなし・離す」で操作できること
- ゲームのステージ部分のみをフルスクリーンで拡大できること
TODO & FIXME
@_tyru_ うーん、針穴との衝突判定がボール一個分ぐらい下にズレてる気がするぞ…
— tyru (@_tyru_) June 15, 2016
@ArcCosine 最初は速度も緩めた方がいい気がしますねw
— tyru (@_tyru_) June 15, 2016
- これは直さなくていいや
@_tyru_ いや、これくらいの鬼畜難易度の方が気軽に遊ぶゲームとしては良いと思います。
— ArcCosine (@ArcCosine) June 15, 2016
スマホ用の <meta name="viewport">
— tyru (@_tyru_) June 15, 2016
実装中に調べたこと
本文ここまで。以下は調べたことです (自分用メモ)。
HTML5 Fullscreen API
これ知ってゲーム作りたくなった。
SVG
- SVG でアニメーション
- xml - Are SVG parameters such as 'xmlns' and 'version' needed? - Stack Overflow
- svg要素の基本的な使い方まとめ
<path>- SVG のノードの高さ・幅を取得 (Element.getBBox())
- SVG のテキストをクリックで選択させないようにする
D3.js
- 可視化ライブラリD3.jsの設計が素晴らしすぎる。 | 三度の飯とエレクトロン
- http://ja.d3js.info/alignedleft/tutorials/d3/binding-data/
- Real Time Update using setInterval · GitHub
- D3.jsを使ってSVGベースのドラムマニア風ゲームの基礎を作ってみた - syonx
- D3.jsはなぜ人気があるのか？ そして、なぜ難しいのか？ | #GUNMAGISGEEK
しかし、D3はデータを基に座標系に変換するなどの計算は行ってくれますが、実際に図を描画する機能はありません。 (中略) 実際にツリーマップを描画する処理は製作者が自身でコードに記述する必要があります。 これは一見不親切なように思えますが、Chartライブラリが提供するグラフのテンプレートデザインをカスタマイズするだけでは足りず、自ら凝ったデータビジュアライゼーションを作成したい製作者にとっては描画する方法を自由に選択できる利点となります。
React や Angular みたいにテンプレート＆コンポーネント指向に作れないのはちょっと面倒だと感じた… んだけど次の記事を読んで気が変わった。D3.js 便利。
D3.js の Data-Driven な DOM 操作がおもしろい - てっく煮ブログ
- この記事でやっと .enter() と .exit() の意味をちゃんと理解できた…
- 作成、削除、更新に対してそれぞれアニメーションを付けるなどの処理を加えられるのすごい
javascript - Why are d3's select() and selectAll() behaving differently here? - Stack Overflow
- d3.js - D3js: When to use .datum() and .data()? - Stack Overflow
- d3.js API Advent Calendar 2012 - Adventar
- http://ja.d3js.info/alignedleft/tutorials/d3/
- about d3.js
- D3.jsにあてはまらないこと | プログラミング | POSTD
- API Reference · d3/d3 Wiki · GitHub
SVG, Canvas, WebGL の使い分け
- Canvas と SVG の使い分けに関する考察 – Internet Explorer ブログ (日本語版)
- SVG と Canvas: どちらを選ぶか (Windows)
- デザイン至上主義プログラマー: SVGとCanvas、どちらを選択すべきか。
- 適切な API の選択 (WebGL、Canvas、SVG) (Windows)
