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); } }