Hello World AirConsole tutorial: your first AirConsole project

Talking about Javascript.

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>
     <head>
          <script type="text/javascript" src="https://www.airconsole.com/api/airconsole-1.4.0.js"></script>
          <script type="text/javascript">
               // 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>  
     </head>
<body>
<h1 id = "value" style = "color:white;margin-top:150px"></h1>
</body>
</html>
And this is the content of screen.html: 
<html>
     <head>
          <script type="text/javascript" src="https://www.airconsole.com/api/airconsole-1.4.0.js"></script>  
          <script type="text/javascript">
               // 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 + '"></h1>'
                    }
                    // 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>
     </head>
     <body>
     </body> 
</html>
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.