multiplayer-canvas/client/player.js

function Player(camera, data) {
	this.id = 0;
	this.position = data.position || {x: 60, y: 60};
	this.velocity = data.velocity || {x: 0, y: 0};
	this.width = 100;
	this.height = 100;
	this.maxSpeed = 3;
	this.turnRate = Math.PI / 16;
	this.moveToTarget = data.moveToTarget || false;
	this.targetDestination = data.targetDestination || {x: 60, y: 60};
	this.targetAngle = data.targetAngle || 0;
	this.angleRadians = data.angleRadians || 0;
	this.shipColor = data.shipColor || "#DD0000";
	this.playerName = "Player";
	this.spriteCanvas = null;
	this.spriteContext = null;

	this.sync = function(timestamp, data) {
		if(timestamp + 25 >= new Date().getTime()) {
			for(var key in data) {
				if(this.hasOwnProperty(key)) {
					this[key] = data[key];
					if(key == "shipColor") {
						this.spriteContext = null;
						this.spriteCanvas = null;
					}
				}
			}
		}
	}

	this.update = function(delta) {
		if(this.angleRadians != this.targetAngle) {
			//this.angleRadians += Math.min(this.targetAngle - this.angleRadians, this.turnRate);
			this.angleRadians = this.targetAngle;
		}

		if(this.moveToTarget) {
			if(this.targetDestination.x > this.position.x) { //we're moving right
				if(this.position.x + this.velocity.x * delta > this.targetDestination.x) {
					this.position.x = this.targetDestination.x;
					this.velocity.x = 0;
				} else {
					this.position.x += this.velocity.x * delta;
				}
			} else if(this.targetDestination.x < this.position.x) { //we're moving left
				if(this.position.x + this.velocity.x * delta < this.targetDestination.x) {
					this.position.x = this.targetDestination.x;
					this.velocity.x = 0;
				} else {
					this.position.x += this.velocity.x * delta;
				}
			} else {
				this.position.x += this.velocity.x * delta;
			}

			if(this.targetDestination.y > this.position.y) { //we're moving down
				if(this.position.y + this.velocity.y * delta > this.targetDestination.y) {
					this.position.y = this.targetDestination.y;
					this.velocity.y = 0;
				} else {
					this.position.y += this.velocity.y * delta;	
				}
			} else if(this.targetDestination.y < this.position.y) { //we're moving up
				if(this.position.y + this.velocity.y * delta < this.targetDestination.y) {
					this.position.y = this.targetDestination.y;
					this.velocity.y = 0;
				} else {
					this.position.y += this.velocity.y * delta;	
				}
			} else {
				this.position.y += this.velocity.y * delta;	
			}

			if(this.targetDestination.x == this.position.x && this.targetDestination.y == this.position.y) { //we're moving right
				this.moveToTarget = false;
			}
		} else {
			this.position.x += this.velocity.x * delta;
			this.position.y += this.velocity.y * delta;	
		}
	}

	this.preRender = function() {
		if(this.spriteContext == null) {
			this.spriteCanvas = document.createElement("canvas");
			this.spriteCanvas.width = this.width;
			this.spriteCanvas.height = this.height;
			this.spriteContext = this.spriteCanvas.getContext("2d");

			this.spriteContext.fillStyle = this.shipColor;
			this.spriteContext.strokeStyle = this.shipColor;
			this.spriteContext.lineWidth = 1;
			this.spriteContext.save();
			this.spriteContext.translate(this.width / 2, this.height / 2);
			this.spriteContext.beginPath();
			//this.spriteContext.rotate(this.angleRadians);
			this.spriteContext.moveTo(this.width / 2, 0);
			this.spriteContext.lineTo(-(this.width / 2), -(this.height / 3));
			this.spriteContext.lineTo(-(this.width / 2), this.height / 3);
			this.spriteContext.lineTo(this.width / 2, 0);
			this.spriteContext.fill();
			this.spriteContext.stroke();
			this.spriteContext.restore();
		}
	}

	this.draw = function(context) {
		this.preRender();
		var truePos = {x: 0, y: 0};
		truePos.x = camera.x + this.position.x;
		truePos.y = camera.y + this.position.y;

		context.save();
		context.translate(truePos.x, truePos.y);
		context.rotate(this.angleRadians);
		context.drawImage(this.spriteCanvas, 0, 0, this.spriteCanvas.width, this.spriteCanvas.height,
			-this.spriteCanvas.width / 2, -this.spriteCanvas.height /2 , this.width, this.height);
		context.restore();


		context.font = "16px sans-serif";
		context.textAlign = "center";
		context.fillStyle = "#DDDDDD";
		context.strokeStyle = "#333333";
		context.lineWidth = 2;
		var textMetrics = context.measureText(this.playerName);
		var textWidth = textMetrics.width;
		context.fillText(this.playerName,
			camera.x + this.position.x,
		 	camera.y + this.position.y);

		//context.beginPath();
		//context.fillRect(truePos.x, truePos.y, this.width, this.height);
		//context.fillStyle= null;
		//context.rect(truePos.x - this.width / 2, truePos.y - this.height / 2, this.width, this.height);
	}
}