Question
This is broken and I can not figure it out! If someone could tell me what is wrong and help me that would be great!
This is broken and I can not figure it out! If someone could tell me what is wrong and help me that would be great!
/*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;
}
//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 =
[
[0, 1, 0, 3, 0, 0];
[0, 0, 0, 0, 4, 1];
[0, 0, 3, 1, 0, 2];
[3, 0, 0, 0, 0, 0];
];
//Placing the various game objects on the Map
var gameObjects =
[
[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, 0, 0, 0, 0, 0];
[0, 0, 0, 0, 0, 0];
];
//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(row == 4 && column == 4)
{
shipRow = row;
shipColumn = column;
}
}
}
//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 >0)
{
//if so, clear ship's current cell
gameObjects[shipRow][shipColumn] = 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[shipRow][shipColumn] = ship;
}
break;
case down:
if(shipRow < rows - 1)
{
gameObjects[shipRow][ shipColumn] = 0;
shipRow++;
gameObjects[shipRow][ shipColumn] = ship;
}
break;
case left:
if(shipColumn > 0)
{
gameObjects[shipRow][shipColumn] = 0;
shipColumn--;
gameObjects[shipRow][shipColumn] = ship;
}
break;
case right:
if(shipColumn < columns - 1)
{
gameObjects[shipRow][shipColumn] = 0;
shipColumn++;
gameObjects[shipRow][shipColumn] = ship;
}
break;
}
//find out what kind of cell the ship is on
switch(map[shipRow][ shipColumn])
{
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
var cell = document.createElement("img");
//Set the CSS class to "cell"
cell.setAttribute("class", "cell");
//Add the img tag to the
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";
} } }
Step by Step Solution
There are 3 Steps involved in it
Step: 1
Get Instant Access to Expert-Tailored Solutions
See step-by-step solutions with expert insights and AI powered tools for academic success
Step: 2
Step: 3
Ace Your Homework with AI
Get the answers you need in no time with our AI-driven, step-by-step assistance
Get Started