使用Angular9和Electron创建的贪吃蛇游戏

2 年 ago
韵, 科
2 minutes

最近我阅读了这篇文章，并尝试了游戏编程。我第一次知道，甚至在MDN上也有打砖块教程。

我在想是否可以使用Electron将js游戏包裹起来，使其更像安装游戏一样。

Angular加上Electron的手機遊戲體驗

我打算尝试创建一个应用程序。
※并不是说它不能像游戏一样在浏览器中运行。

我参考了这里的游戏：https://qiita.com/miyauchoi/items/f753e5fa0209ab2034dd

用Angular + Electron搭建基础。

请先安装Node.js。

    1. 安装 Angular CLI：

npm install @angular/cli -g

确认 ng 版本：

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

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

创建项目：

ng new snake-angular-electron

设置项目名称为 snake-angular-electron，不使用路由，样式表使用 SCSS （不特定要求，可根据需求选择）

安装 Electron：

npm install –save-dev electron

在项目根目录下创建 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)

在 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 .”
},

使用 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

在 electron.js 文件中添加 app.allowRendererProcessReuse = true;（如果之前出现过错误）

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

使用 npm run electron 启动

使用Angular来实现游戏

请参考这个链接的代码：
https://github.com/okome-me/snake-angular-electron

我根据这个贪吃蛇游戏做了一个 Angular 版本。
诚实地说，用 Angular 做的好处不大…

再次尝试启动

スクリーンショット 2020-04-19 17.20.46.png

请查阅资料
请参考相关资料
可以参考一下资料
可供参考的资料
请参考下列资料

    • https://www.electronjs.org/docs/tutorial/first-app

 

    https://github.com/osuthorpe/Snake

代码已上传至以下链接：
https://github.com/okome-me/snake-angular-electron

bannerAds