コンパイルしないES2015にES2015らしさが足りないような気がしたのでES2018で作り直す

元ネタ: コンパイルしないES2015(ES6)なjavasciprtで横スクロールのブラウザゲームを作る

はじめに

元ネタのコードを見ていると、ES5時代から抜けていないような気がしたので、さらにES2018な技術を追加して書き変えてみるというのが今回の企画です。

対象者

• 元ネタにES2015らしさが足りないと感じる。
• ES2018(ES9)にトライしてみたい。
• Shadow DOMのことをなんとなく知っている。 (まだやってない)
• CSS Animationのことをなんとなく知っている。 (まだやってない)
• Node.jsぐらいは知っておけ。解説ではYarn使うけど。
• PCにChrome Canaryをインストール済み。

使う技術 (後日詳しく解説するとは言っていない)

オリジナルから追加で使う技術です。

• JavaScript (ES2018)
  • モジュール(import/export)
    • nomodule (近日実装予定のような気がする)
  • class構文
  • 非同期関数(async/await)
  • ES2018の新機能 (結局使ってないような気がする)
  • Flow (コメント型のみ)
  • Rollup + Babel (nomodule用に)
• Shadow DOM (中日実装予定のような気がする)
• CSS Animation (遠日実装予定のような気がする)

成果物

元ネタをforkして作りました。できることは元ネタと一緒です。原形を留めていないといった苦情は受け付けていません。ほら、ネーミングとか、所々継承してますでしょ？

• 右記URLで実際にプレイできます。https://raccy.github.io/wallgame/
• レポジトリは右記の通りです。 https://github.com/raccy/wallgame

Chrome Canary版のGoogle Chrome 66で動作を確認しています。2018年2月26日現在のChrome Stable版(Chrome 64)ですら動作しなかったのですが、アップデートでバグがなおったのか今は動くようになっています。他のブラウザは知りません。

TODO

• バグ取り
• コードの整理 (余計なコメントとか、要らないコードとか、難易度とか)
• ES2018の新機能を使う (候補はObjectスプレッドと非同期イテレーターかな)
• nomodule版の提供 (IE11のために！)
• DOMの完全分離 からの Shadow DOM化
• CSS Animation (壁が浮き出るとかしたい)
• サウンド
• スタート画面
• マルチプレイヤー対応 (キーボード一つで4人同時プレイを目指します)
• フィールドサイズや難易度の設定、その他諸々

解説

き・・近日中に公開できたら良いなー