_.js

var fog, board;

var createFog = function() {
  var canvas = document.createElement('canvas');
  canvas.width = board.width;
  canvas.height = board.height;
  var context = canvas.getContext('2d');
  context.fill('black', 0, 0, board.width, board.height);
  fog = canvas;
};

var updateFog = function() {
  var context = canvas.getContext('2d');
  context.globalCompositeOperation = 'destination-out';
  var radius=100;
  context.drawCircle('transparent', player.x, player.y, radius); // not sure?
};


var renderFog = function() {
  canvas.drawImage(fog);
};

var update = function() {
  updatePosition(player);
  updateFog();
};

var render = function() {
  renderFog();
};

var start = function() {
  createFog();
  while (true) {
    update();
    render();
  }
};

_2.js

//var keysDown = {};
//var guy, modifier;
var newBoard = function(image) {
  board = {};
  var width = image.width, height=image.height;
  var canvas = document.createElement('canvas');
  canvas.width = width; canvas.height = height;
  var context = canvas.getContext('2d');
  context.putImage(image);
  var imageData = context.getImageData(0, 0, width, height);
  board.data = imageData.data; board.width = width; board.height = height;
  board.isWall = function(x, y) {
    if (board.data[x + y * board.width] == 'red') {
      return true;
    }
    return false;
  };
  return board;
};

var currentBoard = newBoard;

var currentBoard = [
  [0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
  [0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0],
  [0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0],
  [0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0],
  [0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0],
  [0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0],
  [0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0],
];

var currentLevel = 0, board, level, player, levelChanged;

var updateLevel(level) {
  currentBoard.loadLevel(level);
  player.position = board.getInitialPosition;
}

var update = function(){
  if (levelChanged) {
    currentLevel += levelChanged.direction;
    updateLevel(currentLevel);
  }
};


var checkKeys = function() {
  if (keysDown[38] === true || keysDown[87] === true) {
    var nextYPixel = guy.y - guy.speed * modifier;
    if (!collision(guy.x, nextYPixel)) {
      guy.y = nextYPixel;
    }

//    guy.y -= guy.speed * modifier;
//
//    guy.y = guy.y - guy.speed * modifier;
//
//    nextYPixel = guy.y - guy.speed * modifier;
//    guy.y = nextYPixel;
  }
};

var collision = function(x, y) {
  for (var i=x; i < x+30; i++) {
    for (var j=y; j < y+30; j++) {
      if (Board.isWall(i, j)) {
        return true;
      }
    }
  }
};

var startgame = function() {
  var boardImage = new Image();
  boardImage.src = 'whereverits';
  boardImage.onload = function() {
    board = new Board(boardImage);
  };
};


//****************
//****************
//****************
//******xxxxxxxxxx
//****************
//****************
//****************