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 itairconsole, 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>
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>
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. Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.