Pong Example

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/ to get a better idea about what we are gonna talk about ) you can check the game code here view code to download the game, use the following link download pong 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() onmessage() and message() 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 /screen html in the root directory you can check the code of the whole screen html screen html in this repo 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() init() function 0 0 the init() init() function sets up our canvas, creates player objects and a ball object and most importantly calls the setupconsole() setupconsole() function in the setupconsole() setupconsole() we construct the airconsole airconsole object and assign it to the airconsole 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() onmessage() , onconnect() onconnect() and the ondisconnect() ondisconnect() methods, so we can use them for our needs of the game onmessage(device id, data) onmessage(device id, data) the onmessage(device id, data) 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) onmessage(device id, data) method the device id device id param is the id of the device which sent the message (e g 2 ) the data data param is an object and holds custom data, like { move 50 } { move 50 } onconnect(device id) onconnect(device id) the onconnect() onconnect() method gets called when a device connects ondisconnect(device id) ondisconnect(device id) whenever a device disconnects ondisconnect() ondisconnect() gets called setactiveplayers(max players) setactiveplayers(max players) the setactiveplayers(max players) 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) setactiveplayers(2) method in the checktwoplayers() 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() checktwoplayers() function message(device id, data) 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 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 /controller html will be delivered now create a /controller html /controller html and include the same airconsole api file as we did in the /screen html /screen html as in the /screen html /screen html , we also create an airconsole() airconsole() object and initialize it with the options {"orientation" "portrait"} {"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() onmessage() method and also make use of the onactiveplayerschange() onactiveplayerschange() method onmessage(device id, data) 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) onmessage(device id, data) method receives now a message from the screen (airconsole screen) and with the data { vibrate 1000 } { vibrate 1000 } onactiveplayerschange(player number) onactiveplayerschange(player number) whenever the screen calls setactiveplayers() setactiveplayers() , the onactiveplayerschange(player number) 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 player number to tell if the player is the left or the right paddle the player number player number starts at 0, so that the first player will receive 0 and the second 1 as the player number 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 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 ontouchstart event the move function will be called, which sends a message to the screen on a ontouchend 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 locally or on your webhost