Multi-player Bomberman sample

with Chromecast

View project on GitHub

Outils

Google Cast API Reference : docs

Setup

Faites un fork du dépôt puis un git clone :

 $ https://github.com/xebia-france/workshop-cast-maze.git

Coding party

Ouvrez le fichier suivant dans votre IDE favori

receiver/cast.js

Ce fichier contiendra tout le code nécessaire pour communiquer avec la chromecast.

Nous allons développer un Custom Receiver Application pour gérer le labyrinthe et les joueurs.

Configuration

Ajoutez l'import du SDK dans le fichier index.html

<script type="text/javascript" src="//www.gstatic.com/cast/sdk/libs/receiver/2.0.0/cast_receiver.js"></script>

Activez le mode debug dans le fichier cast.js

var debug = true;

Indiquez un niveau de log égal à NONE cf. cast.receiver.LoggerLevel

Vous pouvez lancer à tout moment le serveur en local en exécutant le serveur node :

node server.js

Puis en vous rendant sur :

http://localhost:8080/receiver/index.html

Affichez la console pour debugger le receiver.

Initialisation

Récupérez une instance du CastReceiverManager.

Lancez l'application cf. CastReceiver

Connection d'un joueur

Une fois l'application lancée, les événements lors des connections, des déconnections, des messages, etc. peuvent être écoutés.

Complétez le code dans la méthode onSenderConnected pour ajouter une joueur au labyrinthe cf.

game.js > addPlayer(playerId)

Reception d'un message

L'application Chromecast est capable de recevoir des messages.

Pour ce faire vous devez récupérer un CastMessageBus

Cet objet possède une méthode onMessage qui permet d'écouter les messages.

Completez la méthode onMessage pour que le joueur se déplace si le message correspond à l'une des chaines de caractères suivantes :

  • up
  • down
  • right
  • left

cf. méthode :

game.js > handleKeypress(direction, id);

Envoi d'un message vers les senders

L'application Chromecast peut également envoyer des messages aux clients.

Pour cela l'objet CastMessageBus possède une méthode send

Faites en sorte qu'à la connection d'un joueur le receiver transmette un message vers le sender pour lui indique sa couleur.

NB : la méthode game.js > addPlayer(playerId) renvoie une couleur.

Le format attendu est un objet contenant un champ color et la valeur de la couleur.