JS tutorial using electron JS build native desktop application ping pong game

Javascript Gone are the days of being bound by browsers .Electron or Electron.js By OpenJS The framework maintained by the foundation , For the use of JavaScript、HTML and CSS etc. Web Technology to build local desktop applications .

More and more native applications , Such as Spotify、VSCode and Slack, All in use Electron structure ！

The open source framework uses Chromium and Node.js, Can be used to create and Windows、Mac and Linux Compatible cross platform applications . In this paper , We will use Electron Build a simple tic tac toe game that can run locally .

Electron.JS Basics

Electron.JS It consists of three main components ：

• Deal with all Web Content Chromium
• Handle the interaction with the operating system Node.js
• Customization for additional functions API, And solve common problems when dealing with the operating system

All these components work together to facilitate desktop applications .

Besides ,Electron There are two main processes . Main process processing window management 、 All operating system interactions , The renderer process is responsible for web page content .

The renderer process cannot interact directly with the operating system , You can only communicate with it through the main process . According to the application , A main process can have multiple renderer processes . however , in the majority of cases , Use with to load Web A single main process of a single renderer for an application .

After the explanation , Let's start building .

Set up our project

To use Electron, You need to install... In your environment Node.js. We can create us by running