IoT With HTML5 Game Engine And Node.JS

Introduction

In this article, I will tell you how to use node.js as a bridge between an HTML 5 game and IoT by using Johnnyfive.io and Phaser.io. There are a lot of samples on the internet about Arduino and its features. But I intend to show new concepts of industry 4.0. Using IoT and Machine learning technologies, a distributed system is created which is called industry 4.0.

I will show how to develop the industry 4.0 system by using IoT, NoSQL, and Node.js Web services. All of them can be hosted on remote servers but connected over the internet. Let’s start.

Why would I spend extra effort on the above system?

Because as I mentioned before, my intention is the creation of a distributed system. What is a distributed system? A distributed system is a model in which components located on networked computers communicate and coordinate their actions by passing messages. The components interact with each other in order to achieve a common goal. That’s exactly true.

Arduino can be burned or you can decide to change Arduino because of the new coming IoT technologies. Maybe your boss can decide to keep the road with Raspberry PI so new things can be inserted in the above system. But everything should work perfectly. Node.js can give us this ability because in my point of view software should be independent of hardware. They have to survive inside of their ecosystem. They are responsible for passing messages without any interruption. This is the basic need for creating a distributed system.

What will I need to achieve the above cheat sheet?

All online games need a server that will be developed by node.js also. Because the snakegame will be controlled by a player using a Sparkfun joystick. This joystick will control your snake by sending x-y coordinates.
We will need a joystick.js to send data to Rethinkdb. Rethinkdb is a kind of NoSQL database.

Let’s start to host joystick.js,

At the end of hosting Joystick.js,

r = require('rethinkdb')
var five = require("johnny-five");
var board = new five.Board();
r.connect({
host: 'localhost',
port: 28015
}, function (err, conn) {
if (err) throw err;
r.db('test').table('snakegame').delete().run(conn, function (err, res) {
if (err) throw err;
console.log(res);
board.on("ready", function () {
var joystick = new five.Joystick({
pins: ["A0", "A1"],
invertY: true
});
joystick.on("change", function () {
if ((this.x == 0 && this.y == 1) || (this.x == 1 && this.y == 0) || (this.x == 0 && this.y == -1) || (this.x < -0.90 && this.y == 0)) {
console.log("Joystick");
console.log(" x : ", this.x);
console.log(" y : ", this.y);
console.log("--------------------------------------");
r.table('snakegame').insert({
date: new Date(),
x: this.x,
y: this.y
}).run(conn, function (err, res) {
if (err) throw err;
console.log(res);
});
}
});
});
});
});

Developing Game.js file to take navigation info from server.js. Server.js will produce us a web method to take data from Rethinkdb.I prefer phaser.io for developing games.

jQuery.ajax({
url: 'http://localhost:8081/sample',
success: function (result) {
console.log('x: ' + result.x);
console.log('y: ' + result.y);
var isaction = false;
cursors.right.isDown = false;
cursors.left.isDown = false;
cursors.up.isDown = false;
cursors.down.isDown = false;
if (result.x < 0 && result.y == 0) {
console.log('left');
cursors.left.isDown = true;
isaction = true;
} else if (result.x > 0 && result.y == 0) {
console.log('right');
cursors.right.isDown = true;
isaction = true;
} else if (result.y < 0 && result.x == 0) {
console.log('up');
cursors.up.isDown = true;
isaction = true;
} else if (result.y > 0 && result.x == 0) {
console.log('down');
cursors.down.isDown = true;
isaction = true;
}

When we look at the database, all the action about x-y coordinates will be saved inside of the Rethinkdb database. So in this method server.js can easily access db contend by using Reql.

At the end of this article,

We have used 3 js files,

Game.js
Server.js
Joystick.js

Game.js

Game.js aims to catch your movement when you change the position of joystick up and down OR right or left.

Server.js

It is a kind of a bridge between game and game database. After joystick.js saving data inside of the RethinkDb, Server.js can take this data from Rethinkdb.

Joystick.js

It has a continuous integration with Rethinkdb. Always save Snake position in the NoSQL database by calling Rethinkdb connection codes.

As a Result, we focus on the continuous integration of IoT with the web environment. Of course, I prefer Node.js to get a successful result because Node.js has good features for web and IoT hybrid applications. The main teaching of the article is that it is easy to achieve a distributed system by developing small node.js application. This article also proves to us that Node.js is a good choice for the IoT world because Industry 4.0 needs scalability and flexibility.

3 Comments

Join the conversation! Your thoughts help the community grow.

Hadshana Kamalanathan8y ago
Thanks for sharing
- Viknaraj Manogararajah8y ago
  nice article, thank you for sharing
Rajiv Lochan9y ago
Nice article really appreciate !!! I am also starting my personal blog for IoT please have a look at https://goo.gl/FZ7kuQ and let me know if you have any feedback for me.