skirmish.js

;
(function(){
  
    var playerName;

    var skirmish = new networld.Engine({
      node: '#skirmish-viewport',
      images: {
        'sprites': '/images/sprites.png',
        'crosshairs': '/images/crosshair.png',
        'guns-m4a1': '/images/m4a1.png'
      },
      loadCursor: function(){
        return new networld.Sprite({
          x: this.mouse.x,
          y: this.mouse.y,
          image: {
            file: this.images.get('crosshairs'),
            crop: {
              x: 0,
              y: 0,
              width:35,
              height:36
            }
          },
          width:35,
          height:36,
          angle:0,
          container:this.$node
        });
      },
      loadPlayer: function(){
        
        playerName = prompt("Choose a name");
        
        this.socket.send({name:playerName,x:0,y:0,angle:0});
        
        var sprite = new PlayerSprite({
          x:0,
          y:0,
          angle:0,
          width:35,
          height:31,
          image: {
            file: this.images.get('sprites'),
            crop: {
              x: 0,
              y: 38*2,
              width: 35,
              height: 31
            }
          },
          container:this.$node
        });
        
        sprite.addGun('m4a1', this.images.get('guns-m4a1'));
        
        return sprite;
      },
      loop: function(){
        
        if(this.keys['87']){ //w
          this.player.moveUp();
        }
        if(this.keys['83']){ //s
          this.player.moveDown();
        }
        if(this.keys['65']){ //a
          this.player.moveLeft();
        }
        if(this.keys['68']){ //d
          this.player.moveRight();
        }
        var center = {x: (this.player.x + this.player.width/2), y: (this.player.y + this.player.height/2)};
        var dX = this.mouse.x - center.x;
        var dY = this.mouse.y - center.y;
        
        var radians = Math.atan2(dX, dY);
        var angle = (-1 * radians * 180 / Math.PI) + 90;

        this.player.angle = angle;
        this.player.update();
        
        for(var name in this.netPlayers){
          this.netPlayers[name].update();
        }
      },
      sync: function(){
        this.socket.send({name:playerName, x:this.player.x, y:this.player.y, angle:this.player.angle});
      },
      receiveData: function(data){
        for(var name in data){
          if(name != playerName){
            if(typeof this.netPlayers[name] == 'undefined'){
              this.netPlayers[name] = new PlayerSprite({
                x:data[name].x,
                y:data[name].y,
                angle:data[name].angle,
                width:35,
                height:31,
                image: {
                  file: this.images.get('sprites'),
                  crop: {
                    x: 0,
                    y: 38*2,
                    width: 35,
                    height: 31
                  }
                },
                container:this.$node
              });
              this.netPlayers[name].addGun("m4a1", this.images.get('guns-m4a1'));
            }else{
              this.netPlayers[name].x = data[name].x;
              this.netPlayers[name].y = data[name].y;
              this.netPlayers[name].angle = data[name].angle;
            }
          }
        }
      }
    });
    
    
    var PlayerSprite = networld.Sprite.extend({
      addGun: function(name, image){
        switch(name){
          case 'm4a1':
          default:
            this.addLayer({
              name: 'gun',
              image: image,
              width: 42,
              height: 42,
              cropX: 0,
              cropY: 0,
              offsetY: -3
            });
            break;
        }
      }
    });

})();