ZAMBIE GAM

by ElijahCirioli

HTML

<canvas id="myCanvas" width="800" height="550" style="border:1px solid #000000;"></canvas>

JavaScript

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

//The Variables
var tileSize = 16;
var key = 0;
var newX = 0;
var newY = 0;
var bullets = [];
var mapWidth = 0;
var mapHeight = 0;
var screenWidth = 800;
var stripWidth = 2;
var fov = 60 * Math.PI / 180;
var numRays = Math.ceil(screenWidth / stripWidth);
var fovHalf = fov / 2;
var viewDist = (screenWidth/2) / Math.tan((fov / 2));
var twoPI = Math.PI * 2;

//Initialization Function
function init() {
	var thread = setInterval(gameCycle, 1000/30);
  mapWidth = map[0].length;
	mapHeight = map.length;
}

//The Map
var map = [
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
[1,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,1,0,0,0,1,1,1,1,1,1,0,0,0,1],
[1,0,0,0,1,0,0,0,1,0,0,0,0,1,0,0,0,1],
[1,0,0,0,1,0,0,0,1,0,0,0,0,1,0,0,0,1],
[1,0,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
];

//The Guy
var player = {
	x : 32,
	y : 32,
	dir : 0,
	rot : 1.5707963268,
	speed : 0,
	moveSpeed : 2,
	rotSpeed : 6 * Math.PI / 180,
  strafe : 0
}

function bullet() {
	this.x = player.x;
  this.y = player.y;
  this.rot = player.rot;

}

//That One Function That Does Everthing
function gameCycle() {
	move();
	drawMap();
  drawPlayer();
  castRays();
  bulletUpdate();
  context.fillStyle = "black";
  context.font = "40px Arial";
  context.fillText("Key:" + key, 300, 40);
	context.fillText("Speed:" + player.speed, 300, 80);
  context.fillText("Direction:" + player.dir, 300, 120);
  context.fillText("Rotation:" + player.rot, 300, 160);
  context.fillText("X:" + player.x, 300, 200);
  context.fillText("Y:" + player.y, 300, 240);
  context.fillText("Strafe:" + player.strafe, 300, 280);
  context.fillText("i:" + i, 300, 320);
  context.fillText("Map Width:" + mapWidth, 300, 360);
 ...