Untitled Document

	<!doctype html>
	<title>Pirates & Navy</title>

	<style>
	/size of the ocean (playing board)/
	#ocean
	{
	position: relative;
	width: 768px;
	height: 768px;
	background-image: url("../images/oceanbluelarge.png");
	}
	/size of each cell on the ocean/
	.cell
	{
	display: block;
	position: absolute;
	width: 128px;
	height :128px;
	}
	/size of the the ocean/
	p
	{
	width: 800px;
	}

	</style>


	<div id="ocean"></div>
	<p id="output"></p>

	<script>

	//Get a reference to the ocean and output
	var ocean = document.querySelector("#ocean");
	var output = document.querySelector("#output");

	//Keyboard listener for user to manipulate ship
	window.addEventListener("keydown", keydownHandler, false);

	//Game matrix
	var map =
	[
	:
	:
	:
	:
	:
	];

	//Placing the various game objects on the Map
	var gameObjects =
	[
	:
	:
	:
	:
	:
	:
	];

	//Map code--used in the matrix above
	var water = 0;
	var island = 1;
	var pirate = 2;
	var home = 3;
	var ship = 4;

	//The size of each cell
	var size = 128;

	//The number of rows and columns
	var rows = map.length;
	var columns = map[0].length;

	//Arrow key codes
	var up = 38;
	var down = 40;
	var right = 39;
	var left = 37;

	//Set the ship's start position
	var shipRow;
	var shipColumn;

	for(var row = 0; row < rows; row++)
	{
	for(var column = 0; column < columns; column++)
	{
	if(:)
	{
	shipRow = :;
	shipColumn = :;
	}
	}
	}

	//will clear the ocean map from previous turns
	render();

	function keydownHandler(event)
	{
	switch(event.keyCode)
	{
	case up:

	//determine if the ship's move will be within the playing field
	if(shipRow >:)
	{
	//if so, clear ship's current cell
	gameObjects[shipRow][:] = 0;

	//subract 1 from the ship's row to move it up one row on the map
	shipRow--;

	//apply the ship's new updated position to the array
	gameObjects[:][:] = ship;
	}
	break;

	case down:
	if(shipRow < rows - 1)
	{
	gameObjects[:][:] = 0;
	shipRow++;
	gameObjects[:][:] = ship;
	}
	break;

	case left:
	if(shipColumn > 0)
	{
	gameObjects[:][:] = 0;
	shipColumn--;
	gameObjects[:][:] = ship;
	}
	break;

	case right:
	if(shipColumn < columns - 1)
	{
	gameObjects[:][:] = 0;
	shipColumn++;
	gameObjects[:][:] = ship;
	}
	break;
	}

	//find out what kind of cell the ship is on
	switch(map[:][:])
	{
	case water:
	console.log("water");
	break;

	case pirate:
	console.log("pirate");
	break;

	case island:
	console.log("island");
	break;

	case home:
	console.log("home");
	break;
	}

	//Render the game
	render();
	}

	function render()
	{
	//Clear the ocean of img cells
	//from the previous turn

	if(ocean.hasChildNodes())
	{
	for(var i = 0; i < rows * columns; i++)
	{
	ocean.removeChild(ocean.firstChild);
	}
	}

	//Render the game by looping through the map arrays
	for(var row = 0; row < rows; row++)
	{
	for(var column = 0; column < columns; column++)
	{
	//Create an image tag called cell
	: = document.createElement("img");

	//Set the CSS class to "cell"
	cell.setAttribute("class", "cell");

	//Add the img tag to the <div id="ocean"> tag
	ocean.appendChild(cell);

	//Find the correct image for this map cell
	switch(map[row][column])
	{
	case water:
	cell.src = "../images/water.png";
	break;

	case island:
	cell.src = "../images/desertIsland.png";
	break;

	case pirate:
	cell.src = "../images/pirateship.png";
	break;

	case home:
	cell.src = "../images/home.png";
	break;
	}

	//Add the ship from the gameObjects array
	switch(gameObjects[row][column])
	{
	case ship:
	cell.src = "../images/shipBritish.png";
	break;
	}

	//Position the cell
	cell.style.top = row * size + "px";
	cell.style.left = column * size + "px";
	}
	}
	}

	</script>