Book Image

Electron Projects

By : Denys Vuika
Book Image

Electron Projects

By: Denys Vuika

Overview of this book

The Electron framework allows you to use modern web technologies to build applications that share the same code across all operating systems and platforms. This also helps designers to easily transition from the web to the desktop. Electron Projects guides you through building cross-platform Electron apps with modern web technologies and JavaScript frameworks such as Angular, React.js, and Vue.js. You’ll explore the process of configuring modern JavaScript frameworks and UI libraries, real-time analytics and automatic updates, and interactions with the operating system. You’ll get hands-on with building a basic Electron app, before moving on to implement a Markdown Editor. In addition to this, you’ll be able to experiment with major JavaScript frameworks such as Angular and Vue.js, discovering ways to integrate them with Electron apps for building cross-platform desktop apps. Later, you’ll learn to build a screenshot snipping tool, a mini-game, and a music player, while also gaining insights into analytics, bug tracking, and licensing. You’ll then get to grips with building a chat app, an eBook generator and finally a simple digital wallet app. By the end of this book, you’ll have experience in building a variety of projects and project templates that will help you to apply your knowledge when creating your own cross-platform applications.
Table of Contents (12 chapters)

Flipping sprites based on their direction

When navigating the ship, you should notice that it is always facing right. This is the expected behavior since the original image that we used for the sprite is facing right.

In real life, however, you may want the ship to face the direction that it's moving in. Luckily, the Photon framework supports flipping sprite images, thereby allowing us to invert the ship either horizontally or vertically using the following command:

sprite.flipX = true;

Now, let's update the code so that we can flip the image based on the keyboard state:

function update() {
// RIGHT button
if (cursors.right.isDown) {
ship.x += 2;
ship.flipX = false;
}
// LEFT button
else if (cursors.left.isDown) {
ship.x -= 2;
ship.flipX = true;
}
// UP button
else if (cursors.up.isDown) {
ship.y -= 2;
}
// DOWN button
else if (cursors.down...