Untitled

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Test Game - Turtle artifact picker</title>

</head>
<body>

<canvas id="myCanvas" width="400" height="525" style="background-color:yellow;padding: 3px;">
</canvas>

<script>

	var refreshIntervalId;

    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");


	var mapCoordinates = new Array();
	var mapCols = canvas.width / 25; //25x25 one cell
	var mapRows = canvas.height / 25;
	var mapColNames = 'ABCDEFGHIJKLMNOPQRSTUVWZ';

	for(var i = 0; i < mapRows; i ++){
		for(var j = 0; j < mapCols; j++){
			var y = i * 25;
			var x = j * 25;
			//mapCoordinates.push([x,y]);
			var name = mapColNames.split("")[j] + i;
			mapCoordinates.push({position: name,
								x: x,
								y: y,
								color: "#fff",
								status:0}); // 0 - ok, 1 - nok, 2 - jump?
		}
	}

	// adds an object to test the jumping
	mapCoordinates[150].color = "#000";
	mapCoordinates[150].status = 2;

	var currentRow = 1;
	var currentColumn = 1;

	var steps = new Array();
	steps.push({row: 1, column: 2});

	var x = getCellInfo(currentRow, currentColumn).x;
	var y = getCellInfo(currentRow, currentColumn).y;
	var movementSpeed = 2.5;
	var isMoving = false;
	var direction = "left";

	var ballRadius = 12.5;

	var ballColor = getRandomColor();


	var rightPressed = false;
	var leftPressed = false;
	var upPressed = false;
	var downPressed = false;
	var down = false;


	function drawBall() {

		ctx.beginPath();
		ctx.arc(x + ballRadius, y + ballRadius, ballRadius, 0, Math.PI*2);
		ctx.fillStyle = ballColor;
		ctx.fill();
		ctx.closePath();
	}

	function updateBallPosition(){
		if(isMoving = true){

			if(direction == "right" && x < getCellInfo(currentRow, currentColumn).x){
				x += movementSpeed;
			} else if(direction == "left" && x > getCellInfo(currentRow, currentColumn).x){
				x -= movementSpeed;
			} else if(direction == "up" && y > getCellInfo(currentRow, currentColumn).y){
				y -= movementSpeed;
			} else if(direction == "down" && y < getCellInfo(currentRow, currentColumn).y){
				y += movementSpeed;
			} else{
				isMoving = false;
				down = false; // only allow to move after animation is done;
			}
		}
	}

	function drawCell(pX, pY, pColor) {

		ctx.beginPath();
		ctx.rect(pX, pY, 25, 25);
		ctx.fillStyle = pColor;
		ctx.fill();
		ctx.closePath();
	}


	function getRandomColor() {
		var letters = '0123456789ABCDEF'.split('');
		var color = '#';
		for (var i = 0; i < 6; i++ ) {
			color += letters[Math.floor(Math.random() * 16)];
		}
		return color;
	}
	var i = 0;
	function draw() {
	    ctx.clearRect(0, 0, canvas.width, canvas.height);

		for(var i = 0; i < mapCoordinates.length; i++){
			drawCell(mapCoordinates[i].x, mapCoordinates[i].y, mapCoordinates[i].color);
		}
		drawPosition();

		drawBall();
		updateBallPosition();

		collisionDetection();


		if(rightPressed && isMoving == false) {
			direction = "right";
			moveBallTo(currentRow, currentColumn + 1);
			rightPressed = false;

		}
		else if(leftPressed && isMoving == false) {
			direction = "left";
			moveBallTo(currentRow, currentColumn - 1);
			leftPressed = false;
		} else if(upPressed && isMoving == false){
			direction = "up";
			moveBallTo(currentRow - 1, currentColumn);
			upPressed = false;
		} else if(downPressed && isMoving == false){
			direction = "down";
			moveBallTo(currentRow + 1, currentColumn);
			downPressed = false;
		}

		refreshIntervalId = requestAnimationFrame(draw);
	}


	document.addEventListener("keydown", keyDownHandler, false);
	document.addEventListener("keyup", keyUpHandler, false);

	function keyDownHandler(e) {
		if(down)
			return;

		down = true;

		if(e.keyCode == 38) {
			upPressed = true;
		} else if(e.keyCode == 40) {
			downPressed = true;
		} else if(e.keyCode == 39) {
			rightPressed = true;
		}else if(e.keyCode == 37) {
			leftPressed = true;
		}
	}

	function keyUpHandler(e) {

		if(e.keyCode == 39) {
			rightPressed = false;
		} else if(e.keyCode == 37) {
			leftPressed = false;
		} else if(e.keyCode == 38) {
			upPressed = false;
		} else if(e.keyCode == 40) {
			downPressed = false;
		}
	}

	function collisionDetection() {

	}


	// TO-DO: make smarter function
	function getDirection(sCell, eCell){
		var direction = "left";

		if(sCell.row > eCell.row && sCell.column == eCell.column){
			direction = "up";
		} else if(sCell.row < eCell.row && sCell.column == eCell.column){
			direction = "down";
		} else if(sCell.row == eCell.row && sCell.column > eCell.column){
			direction = "left";
		} else if(sCell.row == eCell.row && sCell.column < eCell.column){
			direction = "right";
		}

		return direction;
	}

	function changeCellColor(pRow, pCol, color){
		var arrayElementNum = pRow * mapCols + pCol;

		mapCoordinates[arrayElementNum].color = color;
		mapCoordinates[arrayElementNum].status = status;
	}

	function getCellInfo(pRow, pCol){

		var arrayElementNum = pRow * mapCols + pCol;

		// to-do: move somewhere else
		//mapCoordinates[arrayElementNum].color = "#eeeeee";
		//mapCoordinates[arrayElementNum].status = 1;

		return {row: pRow, column: pCol, x: mapCoordinates[arrayElementNum].x, y:mapCoordinates[arrayElementNum].y, position: mapCoordinates[arrayElementNum].position};
	}
	function setCurrentPosition(pRow, pCol){
		isMoving = true;


		currentColumn = pCol;
		currentRow = pRow;

		changeCellColor(pRow, pCol, "#eeeeee");

		//x = getCellInfo(pRow, pCol).x;
		//y = getCellInfo(pRow, pCol).y;
	}

	function moveBallTo(pRow, pCol){

		// TO-DO: move into collisionDetection
		if(pRow < mapRows && pRow >= 0 && pCol < mapCols && pCol >= 0){
			var arrayElementNum = pRow * mapCols + pCol;
			if(mapCoordinates[arrayElementNum].status == 0){

				setCurrentPosition(pRow, pCol);

			} else if(mapCoordinates[arrayElementNum].status == 2){
				var oldCol = currentColumn;
				var oldRow = currentRow;

				if(direction == "right") {
					setCurrentPosition(pRow, pCol + 1);
				}
				else if(direction == "left") {
					setCurrentPosition(pRow, pCol - 1);
				} else if(direction == "up"){
					setCurrentPosition(pRow - 1, pCol);
				} else if(direction == "down"){
					setCurrentPosition(pRow + 1, pCol);
				}
			}else {
				console.log("ball cannot move because of wall");
			}

		} else {
			console.log("ball cannot move outside of arena");
		}
	}

	function drawPosition() {
		ctx.font = "16px Arial";
		ctx.fillStyle = "#000";
		ctx.fillText(getCellInfo(currentRow, currentColumn).position, 8, 20);
	}

	draw();


</script>

</body>
</html>