Angular9 + electron의 뱀 게임
8642 단어 ElectronAngular자바스크립트TypeScript
MDN에서도 블록 붕괴의 튜토리얼이 있거나하는 것을 처음 알았습니다.
「js의 게임들을 Electron으로 랩 해 보다 인스톨 하는 게임처럼 할 수 있을까」
뭐라고 생각했기 때문에,
Angular + Electron + 터치 게임
에서 응용 프로그램을 작성해 보겠습니다.
※ 결코 브라우저에서 움직이는 것을 게임 같지 않다고 말하는 것은 아닙니다
게임은 이쪽 참고로 했습니다
htps : // 코 m / 미야 초이 /
Angular + Electron으로 토대 만들기
※Node.js는 미리 설치해 주세요
Angular CLI 설치
npm install @angular/cli -g
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
프로젝트 만들기
ng new snake-angular-electron
snake-angular-electron 라고 합니다 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로 게임 구현
코드를 참조하십시오
htps : // 기주 b. 코 m / 오코 메 - 메 / s Nake - Angu-r-Ect ct
여기 스네이크 게임 을 참고로 Angular화했습니다.
정직한 Angular로 만든 장점은 없습니다 ...
다시 시작해 봅니다.
할 수 있었습니다!
electron의 창 크기는 하드 코딩으로 조정됩니다.
참고 자료
코드는 여기에 제공됩니다.
htps : // 기주 b. 코 m / 오코 메 - 메 / s Nake - Angu-r-Ect ct
Reference
이 문제에 관하여(Angular9 + electron의 뱀 게임), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/okomeme/items/612e7cccdbdf8bf4cc22텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
