[solved]-Assignment 3 Model View Game Grid Pieces Assignment 1 Wrote Sample Game State Made Hand Co Q39077221
Assignment 3–Model and view for game grid and pieces
In Assignment 1 you wrote a sample game state and madehand-coded an HTML mock-up showing the sample game state. Then inAssignment 2, you wrote JavaScript code to generate HTML for atable to use as the grid for your game. In this assignment, youwill put your sample game state into JavaScript and writeJavaScript code that uses the sample game state to display the gamein a view, which is the HTML table.
We are using a simple version of the Model-View-Controller (MVC)design pattern, which is an important and commonly used softwaredesign pattern. The game state is part of the model, which containsJavaScript data and the functions that work with that data. Thecontroller will be the JavaScript code that gets data from themodel (JavaScript arrays and objects, with some JavaScript code)and displays it in the view (an HTML table). For purposes of thisclass, the controller and the view can considered to be the samething, but usually the controller and the view are separated.
Be sure to read the notes on MVC in the Lesson 5 notes and watchthe video (or read the script).
After you have read through the assignment, be sure to read theAssignment 3 Notes. (This is the same link as inthe Getting Started section on the bottom of thispage.)
Models and views
Chess can be played with any number of different chess sets, oreven no set at all (if moves are recorded on paper, as in aplay-by-mail game), but every game makes use of a similarmodel. The model for a chess game includesinformation about the location of pieces, which pieces have beencaptured, and whose turn it is. It also includes information abouthow the pieces can move and capture. The chess set (board andpieces) are the view of the game. The same kind ofmodel is used for games played on a small pocket set with amagnetic board and pieces, or a large board where people act as thepieces.
The same idea applies to other games. For instance, inBattleship, the state of the game (or model) includes what shotshave been taken, which shots were missed, and which shots werehits. The model also includes information about ships: size,location, and orientation, and damage. The model doesnot include any information about how the game isdisplayed. That means that the same model could be used with anykind of view, ranging from a simple text display on a phone to abig-screen 3D display with surround sound.
By separating the model and the view, we can make the modelsimpler and easier to understand. We can also make it possible touse the same model with different kinds of views.
Make a sample game state using JavaScript objects and arrays
The first thing to do for this assignment is to decide what dataand functions will be part of the model. Your sample game statefrom Assignment 1 should be helpful in doing that, although youmight need to modify it. For Assignment 1 you didn’t have to paytoo much attention to JavaScript syntax, but for this assignmentyou’ll need to code your sample game state in JavaScript.
It’s important to decide what functions the model will provide,since no code outside of the model should directly access the datastructures in the model. For example, in my sample software designfor a program for the card game Hearts, the following functions aredescribed: deal, playCard, endTrick, endHand.
If you do a good job defining the interface to the model (thefunctions that can be called), then it will be relatively easy tochange the data structures used inside the model if you need to.Keep in mind that for this assignment the only part of the modelthat you have to write is the code that creates the data for thesample game state. In most cases that code will be relativelysimple.
You don’t have to implement model functions for this assignment.You will implement those functions as part of the final project.For Assignment 4 there will be a project checkpoint where I willask you to say how much of the game logic you have implemented, andyou’ll need to have at least 25% of the game logic implemented toget full credit for the checkpoint.
Most grid games will include a two-dimensional JavaScript arrayin the model. For example, in Minesweeper each cell in the 2D arraycould indicate whether that square in the grid has a mine, and ifnot, how many mines are in adjacent squares. It can also includeinformation about whether the square has been revealed or whetherthe user has flagged it.
Many kinds of grid games can also make good use of JavaScriptobjects in the model. For Battleship, each ship in the game can berepresented by a JavaScript object that tells the size, location,and orientation of the ship, as well as how many hits it hastaken.
Write JavaScript code that creates a sample game state byinitializing the data in your model. You should use alerts, outputto debugging divs, and browser debugging tools like the Chromedeveloper tools to make sure that your model (sample game state) isproperly created.
Your model should not contain any HTML, CSS, images, orimage file names. Those things should be in the view partof your program. To receive full credit, you must have theJavaScript for the model in a different file than the view (andcontroller) code. (For this assignment, don’t worry aboutseparating the controller from the view.)
Use a model state that represents a game inprogress so that you have some game pieces to display inthe grid. Setting up various test cases takes time, but it can savea lot of debugging time later on.
Display game objects in your HTML grid
After you have written the code for your model, write code thatwill display game objects (like chess pieces) in the HTML gridbased on the data in the sample game state. The code that displaysgame objects should be executed after the code that generates theHTML grid.
In many cases, the code that displays game objects will havenested loops that go through each cell of a 2D array in the modeland use the model cell’s contents to add the appropriate content toa cell in the HTML table.
If you have two loop counters that are used in nested loops,it’s easy to use those counters to index into a 2D JavaScript arrayin the model. It’s possible to use those same counters to accesscells in an HTML array.
The first thing you need to do is to use getElementById to get apointer to the HTML table element:
var gridTable =document.getElementById(“myTableId”);
Next, use the loop counters as the row and column to index intothe elements of the HTML table and get a pointer to the table cell(td element) like this:
var cell = gridTable.rows[row].cells[col];
The previous line of code assumes that row is the counter for theouter loop and col is the counter for the inner loop.
Once you have a pointer the HTML table cell element, you can usethe innerHTML property to set the contents of the cellappropriately.
Important: I need to be able to look at yourHTML table and see that it correctly displays the model. For thatreason you might need to display something other than the initialstate of the gam
Make a software design
For Assignment 1 you made a sample game state and described someof the functions that will be part of the model. For thisassignment you should incorporate the sample game state andfunction descriptions into a software design. Your design shouldinclude your (updated) sample game state along with descriptions ofthe arrays and objects used in the model. It should also includedescriptions of the functions/methods that the model provides.
You can look at my preliminary software design example for thecard game Hearts to get an idea of what to include. Note, however,that it does not include a sample game state, which should be inyour software design. You can see an example of a sample game statein the web page for Assignment 1.
Your design should be displayed on the project home page(index.html) or in an HTML document that has a link on the projecthome page.
e. In Concentration or Minesweeper, for example, the initialdisplay will be a grid where all squares of the grid look the same.For games like those you should display an intermediate state orthe final state of the game so that I can see that information fromthe model is correctly displayed.
Getting started
Not sure how to get started on implementing your model and view?Here are some notes that have step-by-step instructions for settingup your model and view: Assignment 3 Notes
Turn in
Put your JavaScript file, along with your game desription HTMLfile, grid HTML file, CSS file, and image file(s) in a zip file andturn the zip file in as specified on the main Assignment page.
Points
40Creates and initializes a model that uses JavaScript arrays andobjects40Displays information from the model in the HTML table. Thedisplay shows a game in progress with game objects placed in thegrid.20Software design describes the model and includes an updatedsample game state and descriptions of the functions/methods itprovides.100TOTAL
Expert Answer
Answer to Assignment 3–Model and view for game grid and pieces In Assignment 1 you wrote a sample game state and made hand-coded … . . .
OR
