var canvas = document.getElementById('game');
var context = canvas.getContext('2d');
var gameReady = false;
var players = [];
var posX = 350;
var posY = 200;
var newX = 350;
var newY = 200;
var speedX = 1;
var speedY = 1;

canvas.style.background = 'url(room.png)';

var playerImg = new Image();
playerImg.src = 'player.png';
playerImg.onload = function() {
	gameReady = true;
}

function movePlayer() {
	if (posX !== newX) {
		if (posX > newX) {
			posX -= speedX;

			if (posX < newX) {
				posX = newX;
			}
		}

		if (posX < newX) {
			posX += speedX;

			if (posX > newX) {
				posX = newX;
			}
		}
	}

	if (posY !== newY) {
		if (posY > newY) {
			posY -= speedY;

			if (posX < newY) {
				posY = newY;
			}
		}

		if (posY < newY) {
			posY += speedY;

			if (posY > newY) {
				posY = newY;
			}
		}
	}
}

function isGameReady() {
	if (gameReady) {
		setTimeout(drawCanvas, 1000);
		canvas.onmousedown = function(e) {
			newX = e.offsetX - 33;
			newY = e.offsetY - 55.25;

			if (newX > posX) {
				trueX = newX - posX;
			} else {
				trueX = posX - newX;
			}

			if (newY > posY) {
				trueY = newY - posY;
			} else {
				trueY = posY - newY;
			}

			speedX = trueX / (1000 / 30);
			speedY = trueY / (1000 / 30);
		}
	}

	setTimeout(isGameReady, 1000 / 30);
}

function drawCanvas() {
	context.clearRect(0, 0, canvas.width, canvas.height);
	context.drawImage(playerImg, posX, posY, 66, 100.5);
}

setTimeout(isGameReady, 1000 / 30);
setInterval(movePlayer, 1000 / 30);