examples/circles.html

<!doctype html>
<html>
<head>
<title>maga</title>
<script src="/exposed.js"></script>
<script src="/jquery.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>

$(function() {

var config = require('config')
  , socket = new io.Socket(config.host)

// maga
var Maga = require('maga')
  , playerManager = require('middleware/playerManager')
  , Circles = require('circles')

// new game
var game = new Maga.Game('Circles')
  , room = game.createRoom()
  , players = playerManager(room, Circles)
  , me

// socket.io
socket.on('connect', function() {
  // add our own player to the game
  var me = players.createMyself(parseInt(socket.transport.sessionid, 10).toString(32))
  room.addObject(me)
  room.watch(me, function(str) {
    socket.send(str)
  })

  // send mouse input to our player
  $('body').mousemove(function(ev) {
    me.move(ev.pageX, ev.pageY)
  })

  // main loop
  room.loop(function() {
    $('#console').text(this.state.frame)
  })
})

socket.on('message', function(message) {
  room.parse(message, function(state) {
    players.set(state)
    room.applyState(state)
  })
})

socket.on('disconnect', function() {
  players.remove(me)
})

socket.connect()

})
</script>

<style>
html, body {
width:100%;
height:100%;
overflow:hidden;
background:#070707;
}
.circle {
position:absolute;
border-radius:1000px;
}
#console {
position:fixed;
top:0;
left:0;
z-index:10000;
color:#BBB;
font-family:Courier;
width:300px;
height:200px;
}
</style>

</head>
<body>
<div id="console"></div>
<a href="http://github.com/stagas/maga" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0; z-index:10000;" src="https://d3nwyuy0nl342s.cloudfront.net/img/4c7dc970b89fd04b81c8e221ba88ff99a06c6b61/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67" alt="Fork me on GitHub"></a>
</body>
</html>