Angular9 + electron でスネークゲーム

最近[こちらの記事](https://qiita.com/ToshioAkaneya/items/87bff03e4c4b9470e6a8)を読み、ゲームプログラミングを触ってみました
MDNでもブロック崩しの[チュートリアル](https://developer.mozilla.org/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript)があったりするのを初めて知りました

---

「jsのゲームたちをElectronでラップしてよりインストールするゲームっぽくできるかな」
なんて考えたので、

***Angular + Electron + 触ってみたゲーム***

でアプリケーション作成してみます。
※決してブラウザで動くものをゲームっぽくないと言うわけではありません

ゲームはこちら参考にしました
https://qiita.com/miyauchoi/items/f753e5fa0209ab2034dd

## Angular + Electronで土台を作る
※Node.jsは予めインストールしてください

1. Angular CLIをインストール

    ```bash
    npm install @angular/cli -g
    ```

1. `ng version`で確認

    ```
        _                      _                 ____ _     ___
       / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
      / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
     / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
    /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/


    Angular CLI: 9.1.1
    Node: 12.16.1
    OS: darwin x64

    Angular: 
    ... 
    Ivy Workspace: 

    Package                      Version
    ------------------------------------------------------
    @angular-devkit/architect    0.901.1
    @angular-devkit/core         9.1.1
    @angular-devkit/schematics   9.1.1
    @schematics/angular          9.1.1
    @schematics/update           0.901.1
    rxjs                         6.5.4
    ```

1. プロジェクトを作成します
 
    ```bash
    ng new snake-angular-electron
    ```
   - プロジェクト名を`snake-angular-electron`とします
   - ルーティングは今回使用しません
   - stylesheetはSCSSにします（特別使わないので何でも）

1. Electronをインストール

    ```bash
    npm install --save-dev electron
    ```

1. プロジェクト直下にelectron.jsを作成
（よくmain.js作成する例もあるがわかりにくいので）

    ```js:electron.js
    const { app, BrowserWindow } = require('electron')

    function createWindow () {
      let win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
          nodeIntegration: true
        }
      })

      // 開発者ツール開く
      win.webContents.openDevTools();

      win.loadURL(`file://${__dirname}/dist/snake-angular-electron/index.html`)
    }

    app.whenReady().then(createWindow)
    ```

1. package.jsonに追記

    ```json:package.json
    {
      "name": "snake-angular-electron",
      "version": "0.0.0",
      "main": "electron.js",
      "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e",
        "electron": "ng build --base-href ./ && electron ."
      },
    ```

1. `npm run electron`で起動
  - すると以下エラー  
[こちらの問題](https://github.com/electron/electron/issues/18397)のようです

    ```
    (electron) The default value of app.allowRendererProcessReuse is deprecated, it is currently "false".  It will change to be "true" in Electron 9.  For more information please check https://github.com/electron/electron/issues/18397
    ```
1. `electron.js`に`app.allowRendererProcessReuse = true;`を追加
※直前の作業でエラー出た場合

    ```js:electron.js
    // (略)
    app.allowRendererProcessReuse = true; // 追加
    app.whenReady().then(createWindow)
    ```

1. `npm run electron`で起動

## Angularでゲームを実装する
コード参考にしてください
https://github.com/okome-me/snake-angular-electron

[こちらのスネークゲーム](https://qiita.com/miyauchoi/items/f753e5fa0209ab2034dd)を参考に、Angular化しました。
正直Angularで作ったメリットはないです...

## 再度起動してみる
できました！
electronのウィンドウサイズはハードコーディングで調整しています
![スクリーンショット 2020-04-19 17.20.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239707/923e44e0-3dc9-9fff-7585-545412943ae1.png)

## 参考資料
- https://www.electronjs.org/docs/tutorial/first-app
- https://github.com/osuthorpe/Snake

コードはこちらにあげています
https://github.com/okome-me/snake-angular-electron