fdoyle/mario.html

## mario.html
<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="10000" height="1000"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradient

var colors = ["#0000","#333","#500","#050","#005","#999", "#D2691E", "#B29600"]

var pixelSize = 20;


function drawPixel(x, y, color){

  var grd= ctx.createRadialGradient(0,0,5,20,20,200);
  grd.addColorStop(0,colors[color]);
  grd.addColorStop(1,"#000");

  // Fill with gradient
  ctx.fillStyle = grd;
	ctx.translate(pixelSize * x, pixelSize * y);
	ctx.fillRect(0,0,pixelSize,pixelSize);
	ctx.setTransform(1, 0, 0, 1, 0, 0);
}

function drawSprite(xPos, yPos, sprite){
	for(var y = 0; y != sprite.length; y++){
    	for(var x = 0; x != sprite[y].length; x++){
        	var color = sprite[y][x];
            if(color){
            	drawPixel(xPos + x, yPos + y, color)
            }
        }
    }
}

function drawSpriteBackwards(xPos, yPos, sprite){
	for(var y = 0; y != sprite.length; y++){
    	for(var x = 0; x != sprite[y].length; x++){
        	var color = sprite[y][sprite[y].length - x-1];
            if(color){
            	drawPixel(xPos + x, yPos + y, color)
            }
        }
    }
}

function drawSpriteUpsidedown(xPos, yPos, sprite){
	for(var y = 0; y != sprite.length; y++){
    	for(var x = 0; x != sprite[y].length; x++){
        	var color = sprite[sprite.length - y - 1][x];
            if(color){
            	drawPixel(xPos + x, yPos + y, color)
            }
        }
    }
}

function drawSpriteFlipped(xPos, yPos, sprite){
	for(var y = 0; y != sprite.length; y++){
    	for(var x = 0; x != sprite[y].length; x++){
        	var color = sprite[sprite.length - y - 1][sprite[y].length - x - 1];
            if(color){
            	drawPixel(xPos + x, yPos + y, color)
            }
        }
    }
}

var sprite = [[1,1,1],
			  [1,3,1],
              [1,1,1]];

var mario =  [[0,0,0,2,2,2,2,2,0,0,0,0],
			        [0,0,2,2,2,2,2,2,2,2,2,0],
              [0,0,1,1,1,6,6,1,6,0,0,0],
              [0,1,6,1,6,6,6,1,6,6,6,0],
              [0,1,6,1,1,6,6,6,1,6,6,6],
              [0,1,1,6,6,6,6,1,1,1,1,0],
              [0,0,0,6,6,6,6,6,6,6,0,0],
              [0,0,2,2,4,2,2,2,2,0,0,0],
              [0,2,2,2,4,2,2,4,2,2,2,0],
              [2,2,2,2,4,4,4,4,2,2,2,2],
              [5,5,2,4,7,4,4,7,4,2,5,5],
              [5,5,5,4,4,4,4,4,4,5,5,5],
              [5,5,4,4,4,4,4,4,4,4,5,5],
              [0,0,4,4,4,0,0,4,4,4,0,0],
              [0,1,1,1,0,0,0,0,1,1,1,0],
              [1,1,1,1,0,0,0,0,1,1,1,1]];

drawSprite(0,0,mario);

drawSpriteBackwards(13,0,mario);

drawSpriteUpsidedown(0,17,mario);

drawSpriteFlipped(13,17,mario);


</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<body>

	<canvas id="myCanvas" width="10000" height="1000"
	style="border:1px solid #d3d3d3;">
	Your browser does not support the HTML5 canvas tag.</canvas>

	<script>
	var c = document.getElementById("myCanvas");
	var ctx = c.getContext("2d");

	// Create gradient

	var colors = ["#0000","#333","#500","#050","#005","#999", "#D2691E", "#B29600"]

	var pixelSize = 20;


	function drawPixel(x, y, color){

	var grd= ctx.createRadialGradient(0,0,5,20,20,200);
	grd.addColorStop(0,colors[color]);
	grd.addColorStop(1,"#000");

	// Fill with gradient
	ctx.fillStyle = grd;
	ctx.translate(pixelSize * x, pixelSize * y);
	ctx.fillRect(0,0,pixelSize,pixelSize);
	ctx.setTransform(1, 0, 0, 1, 0, 0);
	}

	function drawSprite(xPos, yPos, sprite){
	for(var y = 0; y != sprite.length; y++){
	for(var x = 0; x != sprite[y].length; x++){
	var color = sprite[y][x];
	if(color){
	drawPixel(xPos + x, yPos + y, color)
	}
	}
	}
	}

	function drawSpriteBackwards(xPos, yPos, sprite){
	for(var y = 0; y != sprite.length; y++){
	for(var x = 0; x != sprite[y].length; x++){
	var color = sprite[y][sprite[y].length - x-1];
	if(color){
	drawPixel(xPos + x, yPos + y, color)
	}
	}
	}
	}

	function drawSpriteUpsidedown(xPos, yPos, sprite){
	for(var y = 0; y != sprite.length; y++){
	for(var x = 0; x != sprite[y].length; x++){
	var color = sprite[sprite.length - y - 1][x];
	if(color){
	drawPixel(xPos + x, yPos + y, color)
	}
	}
	}
	}

	function drawSpriteFlipped(xPos, yPos, sprite){
	for(var y = 0; y != sprite.length; y++){
	for(var x = 0; x != sprite[y].length; x++){
	var color = sprite[sprite.length - y - 1][sprite[y].length - x - 1];
	if(color){
	drawPixel(xPos + x, yPos + y, color)
	}
	}
	}
	}

	var sprite = [[1,1,1],
	[1,3,1],
	[1,1,1]];

	var mario = [[0,0,0,2,2,2,2,2,0,0,0,0],
	[0,0,2,2,2,2,2,2,2,2,2,0],
	[0,0,1,1,1,6,6,1,6,0,0,0],
	[0,1,6,1,6,6,6,1,6,6,6,0],
	[0,1,6,1,1,6,6,6,1,6,6,6],
	[0,1,1,6,6,6,6,1,1,1,1,0],
	[0,0,0,6,6,6,6,6,6,6,0,0],
	[0,0,2,2,4,2,2,2,2,0,0,0],
	[0,2,2,2,4,2,2,4,2,2,2,0],
	[2,2,2,2,4,4,4,4,2,2,2,2],
	[5,5,2,4,7,4,4,7,4,2,5,5],
	[5,5,5,4,4,4,4,4,4,5,5,5],
	[5,5,4,4,4,4,4,4,4,4,5,5],
	[0,0,4,4,4,0,0,4,4,4,0,0],
	[0,1,1,1,0,0,0,0,1,1,1,0],
	[1,1,1,1,0,0,0,0,1,1,1,1]];

	drawSprite(0,0,mario);

	drawSpriteBackwards(13,0,mario);

	drawSpriteUpsidedown(0,17,mario);

	drawSpriteFlipped(13,17,mario);


	</script>

	</body>
	</html>