Pong Example

9 min

in this example you will learn how to use the airconsole api to communicate between a screen and controllers in a simple pong game you can play the game here https //www airconsole com/#https //game airconsole com/com airconsole testpong cdn airconsole com/2024 02 14 14 52 40/ https //www airconsole com/#https //game airconsole com/com airconsole testpong cdn airconsole com/2024 02 14 14 52 40/ to get a better idea about what we are gonna talk about ) you can check the game code here view code https //github com/airconsole/games pong to download the game, use the following link download pong zip https //github com/airconsole/games pong/archive/master zip basic message exchange between a screen and controllers airconsole and its api makes it very easy for game developers to build games, which can be controlled by a smartphone instead of e g a keyboard or a mouse the whole communication can be pretty much summed up with two methods of the api \onmessage()\ and \message()\ all devices (screen and controllers) share the same api thus there are (almost) no controller or screen specific methods for the communication in the following we will explain you in detail how players can control their paddles in a simple, but fun game like pong /screen html start a local webserver of your choice and create a \/screen html\ in the root directory you can check the code of the whole \screen html\ in this repo https //github com/airconsole/games pong/blob/master/screen html include the airconsole api file \<script type="text/javascript" src="https //www airconsole com/api/airconsole 1 7 0 js">\</script> our game will run on a canvas element, have a score and a "wait message" as soon as the document is ready, we call the \init()\ function 0 0 the \init()\ function sets up our canvas, creates player objects and a ball object and most importantly calls the \setupconsole()\ function in the \setupconsole()\ we construct the \airconsole\ object and assign it to the \airconsole\ variable // sets up the communication to game pads / function setupconsole() { airconsole = new airconsole(); airconsole onconnect = function (device id) { checktwoplayers(); }; airconsole ondisconnect = function (device id) { var player = airconsole convertdeviceidtoplayernumber(device id); if (player != undefined) { // player that was in game left the game // setting active players to length 0 airconsole setactiveplayers(0); } checktwoplayers(); }; airconsole onmessage = function (device id, data) { var player = airconsole convertdeviceidtoplayernumber(device id); if (player != undefined && data move !== undefined) { paddles\[player] move y = data move; } }; } after that, we overwrite the \onmessage()\ , \onconnect()\ and the \ondisconnect()\ methods, so we can use them for our needs of the game \onmessage(device id, data)\ the \onmessage(device id, data)\ method listens for all incoming messages in the screen context it means that it receives all data which the controllers send in our pong game, whenever a player presses the up or down button on its device, the screen receives a messages and that is handled in the \onmessage(device id, data)\ method the \device id\ param is the id of the device which sent the message (e g 2 ) the \data\ param is an object and holds custom data, like \{ move 50 }\ \onconnect(device id)\ the \onconnect()\ method gets called when a device connects \ondisconnect(device id)\ whenever a device disconnects \ondisconnect()\ gets called \setactiveplayers(max players)\ the \setactiveplayers(max players)\ was introduced to avoid confusion with device ids you can use it as a helper method which tells which devices should get a player number it basically maps your controller devices to a zero based player number set active players when a player connects and we have at least two controllers connected, we call \setactiveplayers(2)\ method in the \checktwoplayers()\ function to set the first two devices to active players and start the game // only update if the game didn't have active players if (active players length == 0) { if (connected controllers length >= 2) { // enough controller devices connected to start the game // setting the first 2 controllers to active players airconsole setactiveplayers(2); resetball(50, 0); score = \[0, 0]; score el innerhtml = score join(" "); document getelementbyid("wait") innerhtml = ""; } else if (connected controllers length == 1) { document getelementbyid("wait") innerhtml = "need 1 more player!"; resetball(0, 0); } else if (connected controllers length == 0) { document getelementbyid("wait") innerhtml = "need 2 more players!"; resetball(0, 0); } } otherwise we just display that more players are needed to play the game set no active players when an active player disconnects and there are not enough active players left we want again to display " it's a 2 player game! " on the controller and on the screen " need x more player! " when the leaving player was active in the game, we set all active players to 0, before calling again the \checktwoplayers()\ function \message(device id, data)\ the message method sends a message to another device in our pong game, whenever a player wins, we send a message to this device and let the device vibrate (if supported) / sends a message to the device that it should vibrate; / function vibrate(player) { airconsole message( airconsole convertplayernumbertodeviceid(player), { vibrate 1000 }) } how that works is explained below in the controller html thats basically all airconsole relevant code of the \screen html\ the rest of the code is only the game itself, which we won't cover here /controller html whenever someone requests an airconsole game on a mobile device, the \/controller html\ will be delivered now create a \/controller html\ and include the same airconsole api file as we did in the \/screen html\ as in the \/screen html\ , we also create an \airconsole()\ object and initialize it with the options \{"orientation" "portrait"}\ / sets up the communication to game pads / function setupconsole() { airconsole = new airconsole(); airconsole onconnect = function (device id) { checktwoplayers(); }; airconsole ondisconnect = function (device id) { var player = airconsole convertdeviceidtoplayernumber(device id); if (player != undefined) { // player that was in game left the game // setting active players to length 0 airconsole setactiveplayers(0); } checktwoplayers(); }; airconsole onmessage = function (device id, data) { var player = airconsole convertdeviceidtoplayernumber(device id); if (player != undefined && data move !== undefined) { paddles\[player] move y = data move; } }; } we again overwrite the \onmessage()\ method and also make use of the \onactiveplayerschange()\ method \onmessage(device id, data)\ this time we listen for all messages, which were sent from the screen as already mentioned, whenever a player wins, the device of the player should vibrate the \onmessage(device id, data)\ method receives now a message from the screen (airconsole screen) and with the data \{ vibrate 1000 }\ \onactiveplayerschange(player number)\ whenever the screen calls \setactiveplayers()\ , the \onactiveplayerschange(player number)\ method will be called on the controllers, which are set to active use this method to tell your controller it is an active device in your game in our pong game we use the passed \player number\ to tell if the player is the left or the right paddle the \player number\ starts at 0, so that the first player will receive 0 and the second 1 as the \player number\ param sending a move event from controller to the screen to tell the screen that a player wants to move his paddle up or down we use the \airconsole message\ method / tells the screen to move the paddle of this player @param amount / function move(amount) { airconsole message(airconsole screen, {move amount}) } on an \ontouchstart\ event the move function will be called, which sends a message to the screen on a \ontouchend\ we again call the move function with a value of 0 and again send a message to the screen up down that's it! that's all you need to let your screen and controllers communicate! learn more about how to test your game https //developers2 airconsole com/testing your game locally or on your webhost