How I played the Chrome Dino Game just by blinking

Whenever we don’t have access to the internet or are really bored, we tend to play the Google Chrome Dinosaur game — you know, the one where you hit the spacebar to make the dinosaur jump over the screen? If you’re not sure what I’m talking about, check out the picture below. (Go to about://Chrome — to play the game, only available on Chrome!)

I replicated a project to play this game just by blinking. That’s right, every time I’d blink, the dinosaur would jump over the obstacles. Hard to believe, right? Watch the demo below to see exactly what I’m talking about!

I did this through using Brain-Computer Interfaces (BCIs). BCIs are systems that connect the human brain to external technologies, giving users the ability to interact with the mechanisms — just by using brain-activity

If you’d like to read more about BCIs, click to visit my article: The Basics of Brain-Computer Interfaces.

So you might be wondering, how’d I do it?

Hardware Required

In order to read my brain signals, I used a MUSE-2 headband to work on this project. This headband has sensors AF7 and AF8 that are placed over your forehead. These sensors detect blinking activity.

Code

1. The Game

First things first, you need to get a copy of the game. I tried multiple versions of the game but most of them didn’t work for me — I’d recommend using a repository by Wayou.

2. NPM Software

Next, you have to initialize npm software to install Muse-JS and SystemJS. SystemJS loads rxjs and the muse-js library. The following code is inputted in the terminal:

npm init -y
npm install --save muse-js
npm install --save systemjs

Before installing these packages, I’d recommend checking if you have node.js and npm installed. For more information, click here.

3. Index.html

The third step is to insert this code into the index.html page. It is recommended to place this code in the header section of the html file. Basically, this code loads SystemJS and lets the computer know where to find rxjs and muse-js. The last part of the following code loads a file we’ll be creating called brain.js, but more on that in the next step.

<script src="node_modules/systemjs/dist/system.js"></script>
<script>
   System.config({
      packages: {
         'muse-js': {
            defaultJSExtensions: true,
            main: 'muse.js',
         },
         'rxjs': {
           defaultJSExtensions: true,
         }
       },
       map: { 
         'rxjs': 'node_modules/rxjs/',
          'muse-js': 'node_modules/muse-js/dist'
       }
   });
   SystemJS.import('brain.js');
   const { MuseClient, channelNames } = require('muse-js');

4. Brain.js

Step 4 is to create the brain.js file. The following code should be inserted into the file:

const { MuseClient, channelNames } = require('muse-js');
 
require('rxjs/add/operator/filter');
require('rxjs/add/operator/map');
 async function connectToMuse() {
    const client = new MuseClient();
    await client.connect();
    await client.start();   
 
const leftChannel = channelNames.indexOf('AF7');         
    const blinks = client.eegReadings
    .filter(r => r.electrode === leftChannel)
    .map(r => Math.max(...r.samples.map(n => Math.abs(n))))
    .filter(max => max > 400); 
    
    blinks.subscribe(() => {
    const jumpEvent = new Event('keydown');
    jumpEvent.keyCode = 32; // Space key
    document.dispatchEvent(jumpEvent);
});
} 
window.connectToMuse = connectToMuse;

The purpose of this code is to initialize the Muse Client, detect blinks from the left eye, filter blinks, and hit the spacebar like you normally would.

Lines 6–8 initialize the Muse Client. Then, lines 10–14 filter the detected blinks on the left eye. This is under the “AF7” electrode placed on the left side of the forehead as we saw in the headband diagram. On line 14, the code runs a noise threshold. Different values work for different environments, but 400–500 work best in noisy environments. When the noise caused by the blinks exceeds this threshold, the dinosaur will jump. Next, in line 16, the code will listen for blink events. Finally, lines 17–19 will hit the spacebar for you when you blink (as mentioned, normally when you play the game, you have to hit the spacebar to make the dinosaur jump over the obstacle).

5. Connect Button

Once I completed the main programming portions, I added a connect button to the index.html. When the connect button is clicked, the function connectToMuse() is run.

<div> 
 <button onclick=”connectToMuse()”>Connect</button>
</div>

6. Web Bluetooth

Finally, you need to pair the headband with your computer. There are many ways to do this but the easiest and safest way is by utilizing Web Bluetooth with Google Chrome.

Sidenote: Run this on a live-server — open in Chrome

You can click here to take a look at my code on Github.

And that’s how I did it! Pretty crazy, right? I think Brain-Computer Interfaces have the potential to do a lot in the next couple of years — if I could control my laptop just by blinking, imagine how much more is possible! BCIs are the future!

Thanks for reading!

If you’d like to subscribe to my monthly newsletter, click here, and if you’d like to connect with me on LinkedIn, click here. Visit my Personal Website: jayantarora.ca