Hello World AirConsole tutorial: your first AirConsole project

You are probably a bit late to enter the AirConsole HTML5 Game Contest 2016 but you should learn how to make an AirConsole project anyway. With AirConsole your browser is the console, and your smartphone is your gamepad. I am going to port one of my games to AirConsole although I don’t know how I will be able to monetize it, anyway it will be an interesting experiment to see how one of my games fit into AirConsole environment. Well, what do you need in order to create a game on AirConsole? There’s a getting started tutorial in the official site but I have to admit I do not like it, and if you copy it “as is” on your web server, it won’t work. Moreover, they suggest to use version 1.3 while 1.4 is already released. So here’s my example: First, you need a server where to upload your project or you can install a web server in your computer. If you are into HTML5 game development, I am sure you already have WampServer or MAMP installed on your computers, so let’s move on to next step. Create a folder inside your server, I named it airconsole, then place two files inside it called screen.html and controller.html. The first will be the game screen, while the latter will be the controller screen. This is the content of controller.html:
<html&gt;
     <head&gt;
          <script type="text/javascript" src="https://www.airconsole.com/api/airconsole-1.4.0.js"&gt;</script&gt;
          <script type="text/javascript"&gt;
               // creation of a new AirConsole instance
               var airconsole = new AirConsole();
               // function to be executed every 3 seconds
               setInterval(function(){
                    // generating a random value
                    var value = Math.floor(Math.random() * 100);
                    // this is how we send a message to AirConsole main screen
                    airconsole.message(AirConsole.SCREEN, value);  
                    // updating "value" h1 content to show on the controller the value we are sending
                    document.getElementById("value").innerHTML = "I am sending " + value;   
               }, 3000);
          </script&gt;  
     </head&gt;
<body&gt;
<h1 id = "value" style = "color:white;margin-top:150px"&gt;</h1&gt;
</body&gt;
</html&gt;
And this is the content of screen.html:
<html&gt;
     <head&gt;
          <script type="text/javascript" src="https://www.airconsole.com/api/airconsole-1.4.0.js"&gt;</script&gt;  
          <script type="text/javascript"&gt;
               // creation of an empty array
               var deviceIds = [];
               // creation of a new AirConsole instance
               var airconsole = new AirConsole();
               // this is the listener for incoming messages
               airconsole.onMessage = function(deviceId, data) {
                    // checking if the deviceId is already in deviceIds vector, and if it's not...
                    if(deviceIds.indexOf(deviceId) == -1){
                         // pushing the device id
                         deviceIds.push(deviceId);
                         // adding a new h1 to the body
                         document.body.innerHTML += '<h1 style = "color:white" id = "dev' + deviceId + '"&gt;</h1&gt;'
                    }
                    // updating the content of the proper h1 tag according to device id and received data
                    document.getElementById("dev" + deviceId).innerHTML = "I am receiving " + data + " from  device " + deviceId;   
               };
          </script&gt;
     </head&gt;
     <body&gt;
     </body&gt; 
</html&gt;
At this time you can test your work calling url http://www.airconsole.com/simulator/#<path_to_airconsole_directory> which in my case was http://www.airconsole.com/simulator/#http://localhost/airconsole/ but it may vary according to the name you gave to folder project and the path to your local server. And that’s what I got: As you can see, each controller is able to communicate with the main screen. Next time I will show you how to port a real game to AirConsole. Meanwhile, download the source code.

Get the most popular Phaser 3 book

Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.

Get the book

214 GAME PROTOTYPES EXPLAINED WITH SOURCE CODE
// 1+2=3
// 100 rounds
// 10000000
// 2 Cars
// 2048
// A Blocky Christmas
// A Jumping Block
// A Life of Logic
// Angry Birds
// Angry Birds Space
// Artillery
// Astro-PANIC!
// Avoider
// Back to Square One
// Ball Game
// Ball vs Ball
// Ball: Revamped
// Balloon Invasion
// BallPusher
// Ballz
// Bar Balance
// Bejeweled
// Biggification
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Boom Dots
// Bouncing Ball
// Bouncing Ball 2
// Bouncy Light
// BoxHead
// Breakout
// Bricks
// Bubble Chaos
// Bubbles 2
// Card Game
// Castle Ramble
// Chronotron
// Circle Chain
// Circle Path
// Circle Race
// Circular endless runner
// Cirplosion
// CLOCKS - The Game
// Color Hit
// Color Jump
// ColorFill
// Columns
// Concentration
// Crossy Road
// Crush the Castle
// Cube Jump
// CubesOut
// Dash N Blast
// Dashy Panda
// Deflection
// Diamond Digger Saga
// Don't touch the spikes
// Dots
// Down The Mountain
// Drag and Match
// Draw Game
// Drop Wizard
// DROP'd
// Dudeski
// Dungeon Raid
// Educational Game
// Elasticity
// Endless Runner
// Erase Box
// Eskiv
// Farm Heroes Saga
// Filler
// Flappy Bird
// Fling
// Flipping Legend
// Floaty Light
// Fuse Ballz
// GearTaker
// Gem Sweeper
// Globe
// Goat Rider
// Gold Miner
// Grindstone
// GuessNext
// Helicopter
// Hero Emblems
// Hero Slide
// Hexagonal Tiles
// HookPod
// Hop Hop Hop Underwater
// Horizontal Endless Runner
// Hundreds
// Hungry Hero
// Hurry it's Christmas
// InkTd
// Iromeku
// Jet Set Willy
// Jigsaw Game
// Knife Hit
// Knightfall
// Legends of Runeterra
// Lep's World
// Line Rider
// Lumines
// Magick
// MagOrMin
// Mass Attack
// Math Game
// Maze
// Meeblings
// Memdot
// Metro Siberia Underground
// Mike Dangers
// Mikey Hooks
// Nano War
// Nodes
// o:anquan
// One Button Game
// One Tap RPG
// Ononmin
// Pacco
// Perfect Square!
// Perfectionism
// Phyballs
// Pixel Purge
// PixelField
// Planet Revenge
// Plants Vs Zombies
// Platform
// Platform game
// Plus+Plus
// Pocket Snap
// Poker
// Pool
// Pop the Lock
// Pop to Save
// Poux
// Pudi
// Pumpkin Story
// Puppet Bird
// Pyramids of Ra
// qomp
// Quick Switch
// Racing
// Radical
// Rebuild Chile
// Renju
// Rise Above
// Risky Road
// Roguelike
// Roly Poly
// Run Around
// Rush Hour
// SameGame
// SamePhysics
// Save the Totem
// Security
// Serious Scramblers
// Shrink it
// Sling
// Slingy
// Snowflakes
// Sokoban
// Space Checkers
// Space is Key
// Spellfall
// Spinny Gun
// Splitter
// Spring Ninja
// Sproing
// Stabilize!
// Stack
// Stick Hero
// String Avoider
// Stringy
// Sudoku
// Super Mario Bros
// Surfingers
// Survival Horror
// Talesworth Adventure
// Tetris
// The Impossible Line
// The Moops - Combos of Joy
// The Next Arrow
// Threes
// Tic Tac Toe
// Timberman
// Tiny Wings
// Tipsy Tower
// Toony
// Totem Destroyer
// Tower Defense
// Trick Shot
// Tunnelball
// Turn
// Turnellio
// TwinSpin
// vvvvvv
// Warp Shift
// Way of an Idea
// Whack a Creep
// Wheel of Fortune
// Where's my Water
// Wish Upon a Star
// Word Game
// Wordle
// Worms
// Yanga
// Yeah Bunny
// Zhed
// zNumbers