Simple Maze

Simple javascript maze game.

by realhunts

HTML

<canvas id="GameBoardCanvas" width="400px" height="400px">
</canvas>

CSS

#GameBoardCanvas {
    border: 1px solid red;
    padding: 5px;
    margin-left: auto;
    margin-right: auto;
}

body {
    background: black;
    padding: 5px;
}

JavaScript

var canvas = $('#GameBoardCanvas');
//The game board 1 = walls, 0 = free space, and -1 = the goal

var world = new Array();
var obstacleImg = new Image()
  obstacleImg.crossOrigin = "Anonymous";
	obstacleImg.src = 'https://www.babylonjs-playground.com/textures/heightMap.png?param='+Date();
  obstacleImg.width = 341;
  obstacleImg.height = 341;
	//TEMP ground img


	var obsCanvas = document.createElement('canvas');
	var obsCtx = obsCanvas.getContext('2d');
var grid = new Array();
	obstacleImg.onload = function(){
  var width = canvas.width();
    var blockSize = width/board.length;
    var ctx = canvas[0].getContext('2d');
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.clearRect(0, 0, width, width);
    ctx.fillStyle="white";
		//setup world width / depth with  obstacle image
		world.width = obstacleImg.width;
		world.depth = obstacleImg.height;

		obsCanvas.width = obstacleImg.width;
		obsCanvas.height = obstacleImg.height;
		obsCtx.drawImage(obstacleImg, 0, 0, obstacleImg.width, obstacleImg.height);
	
		

		for(z = 0; z < world.width; z++){
			var row = [];
			for(x = 0; x < world.depth; x++){
				var data = obsCtx.getImageData(z,world.depth - 1 - x, 1, 1).data;
				//red is the color that determines obstacles and avoidance lvl
				var red = data[0];
        
				row.push(red);
			}
		grid.push(row);
		}
    
     for(var z = 0; z < grid.length; z++){
			//var row = [];
			for(var x = 0; x < grid[z].length; x++){
       console.log(grid[z][x])
        if(grid[z][x] != 0){
          ctx.fillRect(x*blockSize, z*blockSize, blockSize, blockSize);
        	}
        }
        }
}

var board = [
    [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
    [ 1, 0, 1, 0, 0, 0, 0, 0, 1, 0],
    [ 0, 0, 0, 0, 1, 1, 1, 0, 1, 0],
    [ 0, 1, 1, 0, 0, 0, 1, 0, 1, 0],
    [ 0, 0, 1, 1, 1, 1, 1, 0, 1, 0],
    [ 1, 0, 1, 0, 0, 0, 1, 0, 1, 0],
    [ 1, 0, 1, 0, 1, 0, 1, 0, 0, 0],
    [ 1, 0, 1, 0, 1, 0, 0, 1, 1, 0],
    [-1, 0, 1, 0, 1, 1, 0, 0, 0, 0]
];
var...