How to train a tfjs model to play breakout game


This is an artificial intelligence mechine learning practical experiment documentary on training an artificial intelligence neural network to play breakout game in the browser powered by tensorflow tfjs for JavaScript.


To understand how things will work breakout is a game which is alot more like ping pong your objective is to make sure the ball never goes by the puck in other words the player's puck should hit the ball before it heads into the lower bond of the screen.

Second objective 

Second objective is to make the ball destroy blocks by projecting it into the disired direction.

Normally this is not very important because the ball would normally iterate each and every corner on its own without trouble

Persudo code

below is how this system works
// start initialization
// create model
// end initialization
// start update loop
async predict(should i move left or right). On resolve {set linear velocity}
if(ball crashed) {diagnose errors and generate reinforced training data effectively pushing it into the training samples}
// end update loop

Artificial intelligence model structuring

Breakout artificial intelligence model is using a tensorflow sequential model.

First hidden layer 

First hidden layer of the model has four inputs using sigmoid activation function giving out eight output units.
Training data is in form [0, 0, 0, 0]
[[vector puck position] + [vector ball position]]
Second output layer

Second layer has 8 inputs coming from the previous hidden layer activation is done using sigmoid and output is given as 2 units.
Output is in form of two values rounded off to the nearest integer
[0, 0] [left, right]

Compiling the model

compiling is done using meanSquaredError loss function and adam optimizer with a learning rate of 0.1

References and citations

"I've published the experiment in a repo on github "" ,

🐣 "for the live demonstration here ""  ,

"Using TensorFlow.js to Automate the Chrome Dinosaur Game (part 1)"


Popular posts from this blog

How to set content disposition header for nginx server to force content download

Animated daylight on HTML5 Canvas

How to make a static http server in nodejs using express

JS13K Preparation

Adding Gameover and introduction screen on HTML Canvas