Angular9 + electron でスネークゲーム

最近こちらの記事を読み、ゲームプログラミングを触ってみました
MDNでもブロック崩しのチュートリアルがあったりするのを初めて知りました

---

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

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

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

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

Angular + Electronで土台を作る

※Node.jsは予めインストールしてください

1. Angular CLIをインストール

   npm install @angular/cli -g
   

2. 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
   

3. プロジェクトを作成します

   ng new snake-angular-electron
   

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

4. Electronをインストール

   npm install --save-dev electron
   

5. プロジェクト直下にelectron.jsを作成
   （よくmain.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)
   

6. package.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 ."
     },
   

7. npm run electronで起動

• すると以下エラー
  こちらの問題のようです

  (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;を追加
   ※直前の作業でエラー出た場合

   electron.js

   // (略)
   app.allowRendererProcessReuse = true; // 追加
   app.whenReady().then(createWindow)
   

2. npm run electronで起動

Angularでゲームを実装する

コード参考にしてください
https://github.com/okome-me/snake-angular-electron

こちらのスネークゲームを参考に、Angular化しました。
正直Angularで作ったメリットはないです...

再度起動してみる

できました！
electronのウィンドウサイズはハードコーディングで調整しています

参考資料

• https://www.electronjs.org/docs/tutorial/first-app
• https://github.com/osuthorpe/Snake

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