fdoyle · April 5, 2017 22:43 · fdoyle · Apr 5, 2017
diff --git a/mario2.html b/mario2.html
 <!DOCTYPE html>
 <html>
 <body>
 	<h1>Arrow keys do stuff</h1>
 <canvas id="myCanvas" width="800" height="400"
 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 = 5;


 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);

 var controls = {
  left:false,
  right:false,
  jump:false
 }

 var groundHeight = 0;
 var state = {
  xPos:0,
  yPos:groundHeight,
  xVel:0,
  yVel:0
 }


 var gravity = -0.5;

 var xPosition = 0;
 var goingRight = true;
 setInterval(function() {
  ctx.clearRect(0, 0, c.width, c.height);

  if(controls.left){
    state.xVel = -2;
    goingRight = false
  }else
  if(controls.right){
    state.xVel = 2;
    goingRight = true;
  } else {
    state.xVel = 0;
  }

  if(controls.jump){
    if(state.yPos == groundHeight){
      state.yVel += 7;
    }
  }

 state.yVel += gravity;

  state.xPos += state.xVel;
  state.yPos += state.yVel;

 if(state.yPos <= groundHeight){
  state.yPos = groundHeight;
  state.yVel = 0;
 }



  if(goingRight) {
    drawSprite(state.xPos, c.height / pixelSize - state.yPos -16, mario);
  } else {
    drawSpriteBackwards(state.xPos, c.height / pixelSize - state.yPos-16, mario);
  }
 }, 20);

 document.addEventListener('keydown', function(event){
  if(event.key === "ArrowLeft"){
    controls.left = true;
  }
  if(event.key === "ArrowRight"){
    controls.right = true;
  }
  if(event.key === "ArrowUp"){
    controls.jump = true;
  }
 });

 document.addEventListener('keyup', function(event) {
  if(event.key === "ArrowLeft"){
    controls.left = false;
  }
  if(event.key === "ArrowRight"){
    controls.right = false;
  }
  if(event.key === "ArrowUp"){
    controls.jump = false;
  }
 });

 </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<body>
	<h1>Arrow keys do stuff</h1>
	<canvas id="myCanvas" width="800" height="400"
	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 = 5;


	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);

	var controls = {
	left:false,
	right:false,
	jump:false
	}

	var groundHeight = 0;
	var state = {
	xPos:0,
	yPos:groundHeight,
	xVel:0,
	yVel:0
	}


	var gravity = -0.5;

	var xPosition = 0;
	var goingRight = true;
	setInterval(function() {
	ctx.clearRect(0, 0, c.width, c.height);

	if(controls.left){
	state.xVel = -2;
	goingRight = false
	}else
	if(controls.right){
	state.xVel = 2;
	goingRight = true;
	} else {
	state.xVel = 0;
	}

	if(controls.jump){
	if(state.yPos == groundHeight){
	state.yVel += 7;
	}
	}

	state.yVel += gravity;

	state.xPos += state.xVel;
	state.yPos += state.yVel;

	if(state.yPos <= groundHeight){
	state.yPos = groundHeight;
	state.yVel = 0;
	}



	if(goingRight) {
	drawSprite(state.xPos, c.height / pixelSize - state.yPos -16, mario);
	} else {
	drawSpriteBackwards(state.xPos, c.height / pixelSize - state.yPos-16, mario);
	}
	}, 20);

	document.addEventListener('keydown', function(event){
	if(event.key === "ArrowLeft"){
	controls.left = true;
	}
	if(event.key === "ArrowRight"){
	controls.right = true;
	}
	if(event.key === "ArrowUp"){
	controls.jump = true;
	}
	});

	document.addEventListener('keyup', function(event) {
	if(event.key === "ArrowLeft"){
	controls.left = false;
	}
	if(event.key === "ArrowRight"){
	controls.right = false;
	}
	if(event.key === "ArrowUp"){
	controls.jump = false;
	}
	});

	</script>

	</body>
	</html>