Zombie FPS Tech Demo

by Kyle Bezio

HTML

<canvas width="500" height="500" id="myCanvas"></canvas>

CSS

#myCanvas {
    border: 1px solid black;
    }

JavaScript

//access the canvas
var canvas = document.getElementById('myCanvas');
//access drawing environment
var context = canvas.getContext("2d");
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;
var canvasWM = canvas.width / 500; //Canvas width multiplier
var canvasHM = canvas.height / 500; //Canvas height multiplier
//run game
gameLoop = setInterval(draw, 60);

var vanishingPointWidth = 50 * canvasWM;
var vanishingPointHeight = 50 * canvasHM;
var vanishingPointX = canvas.width / 2;
var vanishingPointY = canvas.height / 2;

var topLeftDiagInt = 0;
var topRightDiagInt = 0;
var bottomRightDiagInt = 0;
var bottomLeftDiagInt = 0;

if (canvas.width % 2 === 0) {
  var canvasWidthEven = true;
  var recenterW = 1;
} else {
  var canvasWidthEven = false;
  var recenterW = 0;
}
if (canvas.height % 2 === 0) {
  var canvasHeightEven = true;
  var recenterY = 1;
} else {
  var canvasHeightEven = false;
  var recenterY = 0;
}

function draw() {
  context.fillStyle = "white";
  context.fillRect(0, 0, canvas.width, canvas.height);
  context.fillStyle = "black";
  //begin drawing
  context.beginPath();
  //top left corner
  context.moveTo(vanishingPointX - recenterW - vanishingPointWidth / 2, vanishingPointY - recenterY - vanishingPointHeight / 2);
  //top left diagonal
  context.lineTo(0 + topLeftDiagInt, 0 - topLeftDiagInt);
  //top left corner
  context.moveTo(vanishingPointX - recenterW - vanishingPointWidth / 2, vanishingPointY - recenterY - vanishingPointHeight / 2);
  //top right corner
  context.lineTo(vanishingPointX + vanishingPointWidth / 2, vanishingPointY - recenterY - vanishingPointHeight / 2);
  //top right diagonal
  context.lineTo(canvas.width, 0);
  //top right corner
  context.moveTo(vanishingPointX + vanishingPointWidth / 2, vanishingPointY - recenterY - vanishingPointHeight / 2);
  //bottom right corner
  context.lineTo(vanishingPointX + vanishingPointWidth / 2, vanishingPointY + vanishingPointHeight / 2);
  //bottom right...