testing 2-d array

by Kyle Bezio

HTML

<p id="p" style="font-family:monospace; letter-spacing:.8em;">hey</p>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #000000;"></canvas>
<br/>
<br/>
<a href="http://www.etch.wlwv.k12.or.us/~windl/tiles/index.html" target="0">Build a new map</a>

CSS

p {
  color: green;
}

JavaScript

//2D Array defines the map!!!
var map = [
 [0,0,0,0,0,1,0,0,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,1,1,1,1,1,1,0],
 [0,0,0,1,1,0,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],
 [0,0,0,0,0,0,0,1,1,1,1,1,1,0,0,0,0,0,0,0],
 [0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0],
 [1,1,1,1,1,1,0,0,0,0,0,0,1,1,1,1,1,0,0,0],
 [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,1,1],
 [1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,0,0,0],
 [1,1,1,1,1,1,0,0,0,0,1,1,1,0,0,0,1,0,0,0],
 [0,0,1,1,1,1,0,0,0,0,0,0,1,1,1,1,1,0,1,1],
 [0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0],
 [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,0,0,0,0,0,0],
 [0,0,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0,0,1,1],
 [0,0,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,0,1,1,1],
 [0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1],
 [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1],
 [0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1] 
 ]  ;
//access the canvas
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
//and the text output
var p = document.getElementById('p');
//variable for output
var output = "";
//set the tile colors
var tiles = ["white", "black"];
//size of tiles
var tileSize = canvas.width / map[0].length;
//man color
var man = "red";
var manText = "<span style='background-color:red;color:black'>X</span>";
//location of man
var manX = 1;
var manY = 1;
/**
Draw the game
**/
function draw() {
  context.fillStyle = "white";
  context.fillRect(0, 0, canvas.width, canvas.height);
  /**
   add code here
   **/
  //nested for loop accesses 2D array
	for (i = 0; i < map.length; i++) {
  	for (j = 0; j < map[i].length; j++) {
  		var tile = map[i][j];
      //get the color
      context.fillStyle = tiles[tile];
      //draw the tile
      context.fillRect(j * tileSize, i * tileSize, tileSize, tileSize);
  	}
  }
  //draw the man
  context.fillStyle = man;
  context.fillRect(manX * tileSize, manY * tileSize, tileSize, tileSize);
  //text output
 ...