Pirates & Navy Last Homework

<!doctype html>
<meta charset="utf-8">
<title>Pirate & Navy</title>

<style>

{
padding: 0px;
margin: 0px;myste
}

#ocean
{
position: relative;
width: =====px;
height: 768px;
margin: 10px;
background-image: url(=====);
}

.cell
{
display: block;
position: absolute;
width: 128px;
height: 128px;
}

#game
{
width: =====px;
height: 1140px;
}

@font-face
{
font-family: AverdanaOrange;
src: url("../../../Lab.css");
}
</style>
<link href="../../../Lab.css" rel="stylesheet" type="text/css" />

<section id="game">
<h1 class="AVerdanaOrangeBold">CrockettGames Presents</h1>
<p class="AVerdanaOrangeBold"><img src="../images/PiratesNavyTitle.png" alt="PiratesNavy" width="309" height="91"></p>
<div id="ocean"></div>
<p id="output"></p>
</section>

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

//Add a keyboard listener
window.addEventListener("keydown", keydownHandler, false);

//The game map
var map =
===== game map using random calls for different game objects

//The game objects map
var gameObjects =
[
[0, 0, 0, 0, 0, 0, 0],
[0, 0, 5, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0],
[4, 0, 0, 0, 0, 0, 0]
];

//Map code
var water = 0;
var island = 1;
var pirate = 2;
var homePort = 3;
var ship = 4;
var monster = 5;
var pirateIsland = 6;
var mysteryIsland = 7;

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

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

//Find the ship's and monster's start positions
var shipRow;
var shipColumn;
var monsterRow;
var monsterColumn;

for(var row = 0; row < rows; row++)
{
for(var column = 0; column < columns; column++)
{
if(gameObjects[row][column] === ship)
{
shipRow = row;
shipColumn = column;
}
if(gameObjects[row][column] === monster)
{
monsterRow = row;
monsterColumn = column;
}
}
}

//Arrow key codes
var UP = 38;
var DOWN = 40;
var RIGHT = 39;
var LEFT = 37;

//The game variables
var food = 11;
var gold = 10;
var experience = 0;
var gameMessage = "Use arrow keys to sail home and avoid the monster. Reload page to re-play.";

render();

function playSound(:::::) {
===== you can find a good player by googling for one or use HTML sound

function moveMonster()
{
//The 4 possible directions that the monster can move
===== think arrow values

=====

=====

//An array to store the valid direction that
//the monster is allowed to move in
var validDirections = [];

//The final direction that the monster will move in
var direction = undefined;

//Find out what kinds of things are in the cells
//that surround the monster. If the cells contain water,
//push the corresponding direction into the validDirections array
if(monsterRow > 0)
{
var thingAbove = map[monsterRow - 1][monsterColumn];
if(thingAbove === water)
{
validDirections.push(UP);
}
}
if(monsterRow < rows - 1)
{
var thingBelow = map[monsterRow + 1][monsterColumn];
if(thingBelow === water)
{
validDirections.push(DOWN);
}
}
if(monsterColumn > 0)
{
var thingToTheLeft = map[monsterRow][monsterColumn - 1];
if(thingToTheLeft === water)
{
validDirections.push(LEFT);
}
}
if(monsterColumn < columns - 1)
{
var thingToTheRight = map[monsterRow][monsterColumn + 1];
if(thingToTheRight === water)
{
validDirections.push(RIGHT);
}
}

//The validDirections array now contains 0 to 4 directions that the
//contain water cells. Which of those directions will the monster
//choose to move in?

//If a valid direction was found, Randomly choose one of the
//possible directions and assign it to the direction variable
if(validDirections.length !== 0)
{
var randomNumber = Math.floor(Math.random() * validDirections.length);
direction = validDirections[randomNumber];
}

//Move the monster in the chosen direction
switch(direction)
{
case UP:
//Clear the monster's current cell
gameObjects[monsterRow][monsterColumn] = 0;
//Subtract 1 from the monster's row
monsterRow--;
//Apply the monster's new updated position to the array
gameObjects[monsterRow][monsterColumn] = monster;
break;

case DOWN:
gameObjects[monsterRow][monsterColumn] = 0;
monsterRow++;
gameObjects[monsterRow][monsterColumn] = monster;
break;

case LEFT:
gameObjects[monsterRow][monsterColumn] = 0;
monsterColumn--;
gameObjects[monsterRow][monsterColumn] = monster;
break;

case RIGHT:
gameObjects[monsterRow][monsterColumn] = 0;
monsterColumn++;
gameObjects[monsterRow][monsterColumn] = monster;
}
}

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 a img tag called cell
var cell = document.createElement("img");

//Set its 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;

===== desert island

===== pirate island

===== pirateship

===== home

===== mystery island

//Add the ship and monster from the gameObjects array
switch(gameObjects[row][column])
{
case ship: =====

case monster: =====
}

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

//Display the game message
output.innerHTML = gameMessage;

//Display the player's food, gold, and experience
output.innerHTML
+= "<br><strong>Ship's Store</strong>: Gold: " + gold + ", Food: "
+ food + ", Experience: " + experience;
}

</script>