Itty bittypresentation lrug

IttyBittyBoom.com Cramp + Websockets = Awesome

What ? Attempt to play film here...

How ? Drawing - canvas Network Requests - websockets Server - cramp

HTML5 Canvas Very Cool, Can do lots of cool things with it, Browser support is good (safari3.2, chrome3, firefox 3.0)

<table id= "map" > <tr> <td> StoneBlock </td><td> StoneBlock </td><td> StoneBlock </td><td> StoneBlock </td><td> StoneBlock </td><td> StoneBlock </td><td> StoneBlock </td> </tr> <tr> <td> StoneBlock </td><td walk= 'false' > WallBlockTall </td><td> StoneBlock </td><td walk= 'false' > WallBlockTall </td><td> StoneBlock </td><td walk= 'false' > WallBlockTall </td><td> StoneBlock </td> </tr> <tr> <td> StoneBlock </td><td> StoneBlock </td><td> StoneBlock </td><td> StoneBlock </td><td> StoneBlock </td><td> StoneBlock </td><td> StoneBlock </td> </tr> <tr> <td> StoneBlock </td><td walk= 'false' > WallBlockTall </td><td> StoneBlock </td><td walk= 'false' > WallBlockTall </td><td> StoneBlock </td><td walk= 'false' > WallBlockTall </td><td> StoneBlock </td> </tr> <tr> <td> StoneBlock </td><td> StoneBlock </td><td> StoneBlock </td><td> StoneBlock </td><td> StoneBlock </td><td> StoneBlock </td><td> StoneBlock </td> </tr> <tr> <td> StoneBlock </td><td walk= 'false' > WallBlockTall </td><td> StoneBlock </td><td walk= 'false' > WallBlockTall </td><td> StoneBlock </td><td walk= 'false' > WallBlockTall </td><td> StoneBlock </td> </tr> <tr> <td> StoneBlock </td><td> StoneBlock </td><td> StoneBlock </td><td> StoneBlock </td><td> StoneBlock </td><td> StoneBlock </td><td> StoneBlock </td> </tr> </table>

Sprites canvas.getContext( '2d' ).drawImage( image, imgOffsetX, imgOffsetY, frameWidth, frameHeight, xPos, yPos, frameWidth, frameHeight)

Websockets Full Duplex communication channel over a single socket Javascript interface Cope with firewalls + proxies

//Create one: var socket = new WebSocket ( 'ws://ittybittyboom.com/game' ); //Use it: socket . onopen = function ( evt ) { alert ( "Connection open ..." ); }; socket . onmessage = function ( evt ) { alert ( "Received Message: " + evt. data ); }; socket . onclose = function ( evt ) { alert ( "Connection closed." ); }; socket. send ( "Any data you fancy" );

Where does Itty use them? Everywhere!

//Register Keypress switch ( event .which){ case 38 : MrJaba.Bomberman.me.setMovementDirection( 'up' ); break ; case 40 : MrJaba.Bomberman.me.setMovementDirection( 'down' ); break ; case 37 : MrJaba.Bomberman.me.setMovementDirection( 'left' ); break ; case 39 : MrJaba.Bomberman.me.setMovementDirection( 'right' ); break ; } //Run Every Clock Tick: update : function (){ if ( this .canMoveTo( newX, newY )){ MrJaba.Bomberman.GameClient.trigger( 'player_move' ); } } //Send data to the server {"type":"player_move","uuid":"5a5c0a80-844f-012d-5d1f-001b63957646","data":{"x":"0","y":"105"}} socket. send (movement_data);

“ You can't give a bomb to a baby!”

//Trigger the bombdrop on the game client MrJaba.Bomberman.GameClient.trigger( 'send_bomb_drop' ); //Send the Bomb drop message socket. send ( { "type" : "send_bomb_drop" , "uuid" : "5a5c0a80-844f-012d-5d1f-001b63957646" , "data" :{ "x" : "0" , "y" : "90" }} ); //The server will update it's map of players to bombs and issue an update every 5msec {type: "update_bombs" , positions:{ "7fd93b20-8465-012d-5d20-001b63957646" :{ x: "0" y: "0" } }} //The socket receives all messages through this: socket . onmessage = function ( evt ){ var data = JSON. parse (evt. data ) handleEvent ( data[ 'type' ], data ); };

updateBombPositions : function ( positions ){ $ .each(positions, function (bombId, bomb){ if ( isNewBomb(bombId) ){ MrJaba.Bomberman.bombs[bombId] = new Bomb (bombId, bomb) } }) }, //Event Handling Code calls this

“ Kill! Kill! Kill! Filthy bastards, Commies!” “ Norman! Tea's Ready!” “ Coming Dear!”

//tick tick...boom MrJaba.Bomberman.detonate( this , this .getTileX(), this .getTileY()); detonate : function ( bomb, tileX, tileY ){ delete MrJaba.Bomberman.bombs[bomb.getId()]; MrJaba.Bomberman.GameClient.trigger( 'send_bomb_detonate' , bomb.getId()); bomb.toExplosion(); },

Apparently Explosions Are...Unpleasant sendHotBurningDeath : function (){ var alreadyKilled = this .killed; this .tilesAround( this .getTileX(), this .getTileY(), function (tileX, tileY, direction, radius){ MrJaba.Bomberman.killPlayersAt( tileX, tileY, alreadyKilled ); }); },

Cramp! Asynchronous EventMachine based web framework

Asynchronous Event Driven Code Event Loop Request Handler Request Handler

class RootController < Cramp::Controller::Action on_start :send_socket def send_socket render File .open( "public/index.html" , 'r' ){ | f | f.readlines } finish end end

Anatomy of a cramp request Request: Blow the bloody doors off! initialize Initialize Response Start request Finish Request

class GameController < Cramp::Controller::Websocket on_data :receive_message def receive_message ( data ) message = JSON .parse(data) type = message[ 'type' ] uuid = message[ 'uuid' ] if Game .player_in_game?(uuid) || type == "register" update_last_message_time(uuid) self .send( "receive_ #{type} " , message, uuid) end end end

Example! { "type" : "send_bomb_drop" , "uuid" : "4bba07e0-846c-012d-5d29-001b63957646" , "data" :{ "x" : "0" , "y" : "0" }} Client: def receive_message ( data ) message = JSON .parse(data) type = message[ 'type' ] uuid = message[ 'uuid' ] if Game .player_in_game?(uuid) || type == "register" update_last_message_time(uuid) self .send( "receive_ #{type} " , message, uuid) end end Server: def receive_send_bomb_drop ( message, uuid ) position = { :x => message[ 'data' ][ 'x' ], :y => message[ 'data' ][ 'y' ]} Game .bomb_positions[uuid] = position if ! uuid.nil? end

Again and Again and Again Recurring Actions are super easy in Cramp

periodic_timer :push_states , :every => 0.05 def push_states data = { :type => 'update_positions' , :positions => game_states_for_connection}.to_json render data end def push_bombs if Game .bomb_positions.size > 0 data = { :type => 'update_bombs' , :positions => Game .bomb_positions}.to_json render data end end periodic_timer :push_bombs , :every => 0.05

Game Over! Tom Crinson @MrJaba http://github.com/MrJaba/Websocket-Bomberman

Itty bittypresentation lrug

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (9)

Similar a Itty bittypresentation lrug

Similar a Itty bittypresentation lrug (20)

Más de Tom Crinson

Más de Tom Crinson (6)

Último

Último (20)

Itty bittypresentation lrug