Template Code (HTML)

In this project we only have an HTML and JS page, because we need an HTML for the user to go to. Set up the HTML page so that its only use is to call the JS file.

<!DOCTYPE html>
<head><title>Tank game</title>
<p id="game_window"></p>
<script src="tank_game.js"></script>
</head>

We only need to link the JS file using <script> tag (line 4). We also need an ID that we refer to in the JS file.

JS Variables

Create a JS file called tank_game.js

First we need to create a function to put all our code, and variables.

var TankGame = (function() {
	// code
}

We can use this function, so if we want to, we can call the entire project with the variable TankGame. Inside our function we can start listing our variables.

var TankGame = (function() {
	var TARGET_WIDTH = 801; // Desired width
	var TARGET_HEIGHT = 601; // Desired height
	var WIDTH; // Actual width of game, scaled to fit screen
	var HEIGHT; // Actual height of game, scaled to fit screen
	var GUI_HEIGHT = 150;
	var DEBUG = false;
}

The desired height and width is used so the browser will try to create a window with those dimensions.

But if it is scaled, you don't need to worry about that, that's why we have the variables WIDTH and HEIGHT.

We also have GUI Height because we don't want the GUI to take up the entire screen, just a part of it.

We have a Debug variable, but we use it later for testing.

Next we add controls for both player 1 and player 2 to use. With JS we cannot say keys like “w” and “s” and “a” but rather have to type a certain number that corresponds with that key.