Model and view for game grid pieces

studsm · October 19, 2015

HI everyone, i'm new to javascript/html/css and I am working on an assignment for school and could use a nudge in the correct direction. Please don't make any rude comments as I am just trying to learn and would only like advice on how to proceed with the assignment.

So I am creating battleship game using javascript/html/css and we are just doing small chunks of the full game each week as our assignment. So far all we have done is generated a game grid using javascript and put it on the html file. This is what I did for that.

//var column = ["0", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J"];

var text = "<table style='width:30%'>";

//var text2 = "";

function generateGrid(rows, columns)

{

for (var j = 0; j < rows; j++)

{

text += "<tr>";

for (var i = 0; i < columns; i++)

{

text += "<td style='height: 30px'>" + " " + "</td>";

}

text += "</tr>";

}

text += "<br><br></table>";

document.getElementById("player1").innerHTML = text + "<br><br>";

document.getElementById("player2").innerHTML = text;

}

and my html file

<!DOCTYPE html>

<style>

h1{

color: green;

text-align: center;

background-color: transparent;

font-size-adjust: inherit;

}

</style>

<html>

<head>

<title>Battleship Grid</title>

<h1 style="color: red; font-family: "lucida console";" >Battleship Grid</h1>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<input type='button' value = 'New Game' onclick='generateGrid(10,10);'>

<h1>player 1</h1>

<div id = "player1"></div><br><br>

<h1>player2</h1>

<div id = "player2"></div>

<script type="text/javascript" src="view.js" ></script>

<script type="text/javascript" src="model.js"></script>

</body>

</html>

now for the next assignment we are to create a model.js file, this file will contain objects and functions that I will need for the game. Here is what it says exactly for this part so there isn't confusion about what needs to be done.

in Battleship, the state of the game (or model) includes what shots have been taken, which shots were missed, and which shots were hits. The model also includes information about ships: size, location, and orientation, and damage. The model does not include any information about how the game is displayed. That means that the same model could be used with any kind of view, ranging from a simple text display on a phone to a big-screen 3D display with surround sound.

I am not asking for you guys to tell me how to write the functions or anything I just wanted to let you know the criteria. So after I have written the code in the model all I need to do is display a few pieces of the model onto the game grid. (the html table i generated). This is where I am lost and unsure as to how to do this.

In summary I will have three files the model.js, the view.js and the grid.html the the model has my game pieces in it which is all i need to focus on for this assignment so this is what I have written in the model.js.

var players = 2;

var numShips = 7;

var lengthCarrier = 5;

var lengthBattleship = 5;

var lengthSubmarine = 4;

var lengthCruiser = 3;

var lengthDestroyer = 2;

and i somehow would need to display the the game objects in the game grid (the table) right now it doesn't matter how I do it so it can be something as simple as just changing the border on my grid where the ships are placed or I can add pictures into the grid to show where the ships are. The gameboard doesn't need to be interactive at this point it just needs to show the objects inside the grid, and i'm completely unsure as to how to do this. Any advice or any push in the right direction would be great. here is the link to the full assignment if anyone wants to read it. http://universe.tc.uvu.edu/cs2550/project/a3.html

davej · October 19, 2015

MVC means that you logically separate your code into three sections. The Controller accepts the user input and sends it to the Model and takes the responses from the Model and sends those to the View. The Model is the extensive logic that will decide what responses will be provided to the View. The View provides the actual display the user will see.

So the Controller might receive an input from the user, send the input to the Model, receive a result array from the Model and send the array to the View. The View enters the array characters into the visible HTML table.

https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller

studsm · October 19, 2015

Thanks davej for the reply, so right now i'm not recieving and input from the user. I'm just writing out objects that i've created in the model to the view and generate the visible HTML table with the objects inside of it. And I wish I had an idea but i'm really just entirely unsure as to how to do this and need a push in the correct direction. Can i create an object like var carrierLength = 5; in my model and then how would I go about putting that inside the view.js? i'm sorry if i'm frustrating you but i'm really confused.

justsomeguy · October 19, 2015

Since the model represents the game state, definitions like the length of ships make sense to be there. The model would also have functions for placing ships, firing a shot, checking for sinking/success, etc.In terms of updating the game board, the view would get the current game state from the model and draw the board. The 2 major ways to do that are to just redraw the entire board every time, or draw the table only once and then loop through the rows and cells to update each existing element. For this it's probably easy enough to just redraw the whole thing every time. If you want to update the existing table then you'll need to access the table in Javascript (such as by ID), and then use the table's rows property to loop through each row, and each row's cells property to loop through the cells in that row. Presumably the model will include an array the same dimensions as the table which will hold the current state of each cell (empty, ship without hit, ship that was hit, miss). You'll also need to make sure that you're associating all of the cells that hold a ship with being the same ship so that you can determine when it sinks.

studsm · October 19, 2015

Hey thanks for the reply justsomeguy! your post has helped me a lot so thanks! if you have a little bit of time to reply again that would be great, if not thanks for the help. I will need to create loops that will update the game state as it is part of the requirement later on so I might as well do that now. so I will create an array would it have to be something like this:

var game = ["empty", "empty", "shipwithouthit", "empty", etc...] all the way through the whole grid? and if so can you explain or show me some example of how I would use loops to update the game board in my view.js file?

Ingolme · October 19, 2015

That's one way to do it. It's better to represent the states with numbers than with strings. For example: 0 = empty. 1 = miss, 2 = ship, 3 = hit ship. You would also need data structures for the ships to associate them with the grid.

The model could contain an array of all the squares on the grid. For example, in a 5 by 5 grid the stricture could look like this:

var board = [  0, 0, 0, 0, 0,  0, 0, 2, 0, 0,  0, 0, 3, 1, 0,  0, 0, 2, 0, 0,  0, 1, 0, 0, 0];

Or like this:

var board = [  [0, 0, 0, 0, 0],  [0, 0, 2, 0, 0],  [0, 0, 3, 1, 0],  [0, 0, 2, 0, 0],  [0, 1, 0, 0, 0]];

Each time the board changes, the view would loop through that array and find the corresponding table cell in the DOM and change its appearance.

The controller would be the part of the program that changes the model and passes the model's data to the view.

Ingolme · October 19, 2015

Actually, you only really need to store two states on that grid: empty or hit. You determine whether it hit a ship or not based on the ship positions and sizes.

Sign In

Model and view for game grid pieces

Recommended Posts

studsm

Link to comment

Share on other sites

davej

Link to comment

Share on other sites

studsm

Link to comment

Share on other sites

justsomeguy

Link to comment

Share on other sites

studsm

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity