Ch. 1 HTML Structure and JS Variables

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.

💡

This website contains the number that corresponds to each key so we can start coding.


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;

	// Wasd
	var P1_UP = 87;
	var P1_DOWN = 83;
	var P1_LEFT = 65;
	var P1_RIGHT = 68;
	var P1_FIRE = 49;
	
	// Arrow keys
	var P2_UP = 38;
	var P2_DOWN = 40;
	var P2_LEFT = 37;
	var P2_RIGHT = 39;
	var P2_FIRE = 189;
}

You can double check these numbers using this link. But each variable should be mapped to a number that corresponds to that key.


// Other settings
  var TANK_SIZE = 15;
  var TANK_SPEED = 1;
  var TANK_TURN_SPEED = 5;
  var WALL_WIDTH = 2;
  var CELL_SIZE = 50;
  var RESET_COUNTER_MAX = 200; // Time to start next round (frames)
  var EPSILON = 0.001; // Used for comparing floats

These Variables are what create the setting around the tanks, like the walls, and the distance between each tank etc. We don't recommend you change them initially, but do play around with them.

Next we have to add some variables that will need to be used in the code. Do Not Configure these variables.


var MAX_DIST_FOR_COLLISIONS = 2; // (this is multiplied by CELL_SIZE)
var TANK_P1, TANK_P2;
var CELLS_X, CELLS_Y;
var CANVAS, CTX, KEYSTATE, GAME_OBJECTS;
var PRERENDERED_CANVAS, PRERENDERED_CTX, PRERENDERED_REDRAW_NEEDED;
var GUI_REDRAW_NEEDED;
var END_ROUND = false;
var RESET_COUNTER

Throw these in under all the other variables but don’t change them.

Last thing we need to add is scoring variables as well as variables for players themselves. These are very simple, but they are changed later once an event happens, such as

“( player 1 wins a round )”


var P1 = 1;
var P2 = 2;
var P1_SCORE = 0;
var P2_SCORE = 0;

Your code for your tank_game.js file should look like this:


var TankGame = (function() {
  var TARGET_WIDTH = 801; // Desired width
  var TARGET_HEIGHT = 601;
  var WIDTH; // Actual width of game, scaled to fit screen
  var HEIGHT;
  var GUI_HEIGHT = 150;
  var DEBUG = false;
  // WASD
  var P1_UP = 87;
  var P1_DOWN = 83;
  var P1_LEFT = 65;
  var P1_RIGHT = 68;
  var P1_FIRE = 49; 

  // Arrow keys
  var P2_UP = 38;
  var P2_DOWN = 40;
  var P2_LEFT = 37;
  var P2_RIGHT = 39;
  var P2_FIRE = 189; 

  // Other settings
  var TANK_SIZE = 15;
  var TANK_SPEED = 1;
  var TANK_TURN_SPEED = 5;
  var WALL_WIDTH = 2;
  var CELL_SIZE = 50;
  var RESET_COUNTER_MAX = 200; 
  var EPSILON = 0.001;

  
  var MAX_DIST_FOR_COLLISIONS = 2; // (this is multiplied by CELL_SIZE)
  var TANK_P1, TANK_P2;
  var CELLS_X, CELLS_Y;
  var CANVAS, CTX, KEYSTATE, GAME_OBJECTS;
  var PRERENDERED_CANVAS, PRERENDERED_CTX, PRERENDERED_REDRAW_NEEDED;
  var GUI_REDRAW_NEEDED;
  var END_ROUND = false;
  var RESET_COUNTER;

  var P1 = 1;
  var P2 = 2;
  var P1_SCORE = 0;
  var P2_SCORE = 0;

}

ALL OF CHAPTER ONE CODE https://pastebin.com/T8vjXJpT

Next Chapter

2️⃣

Ch. 2 Vector2d Class