jonleung/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p>Try to move your mouse through the maze without touching the walls.</p>
  <p>Refresh the page to try again.</p>


  <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.12/p5.js"></script>
  <script src="https://rawgit.com/jonleung/79234327a76b2eb4953e/raw/62bbd37c23950be576afac9d8f78112ec46445a2/p5.play.js"></script>
  <script src="main.js"></script>
</body>
</html>

## main.js
var maze;
var mazeImg;

function setup() {
  createCanvas(200,200);

  maze = createSprite(100, 100);
  mazeImg = loadImage("http://i.filmot.org/7xDfW51.png");
  maze.addImage(mazeImg);
}

function draw() {
  background(255, 255, 255);
  drawSprites();

  if(maze.overlapPixel(mouseX, mouseY)){
    maze.remove();
  }
}

## style.css
body {
  text-align: center;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>JS Bin</title>
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<p>Try to move your mouse through the maze without touching the walls.</p>
	<p>Refresh the page to try again.</p>


	<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.12/p5.js"></script>
	<script src="https://rawgit.com/jonleung/79234327a76b2eb4953e/raw/62bbd37c23950be576afac9d8f78112ec46445a2/p5.play.js"></script>
	<script src="main.js"></script>
	</body>
	</html>
	var maze;
	var mazeImg;

	function setup() {
	createCanvas(200,200);

	maze = createSprite(100, 100);
	mazeImg = loadImage("http://i.filmot.org/7xDfW51.png");
	maze.addImage(mazeImg);
	}

	function draw() {
	background(255, 255, 255);
	drawSprites();

	if(maze.overlapPixel(mouseX, mouseY)){
	maze.remove();
	}
	}