agar3s/index.html

## index.html
<html>
<head>
	<meta charset="utf-8">
	<title>Fundamentos de física</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1>Aplicando físicas a videojuegos</h1>
	<canvas id="scene" width="600" height="400"></canvas>
	<script type="text/javascript" src="main.js"></script>
	<footer>
		<h2>BogotáJS</h2>
		<h3>bogotajs.com</h3>
	</footer>
</body>
</html>

## main.js
var context = document.getElementById("scene").getContext("2d");

/*
dai
000
100 derecha = 4
010 arriba = 2
001 izquierda = 1

110 derecha | arriba = 6
100
2 = 010
*/
var keyMap = 0;
var keys = {
  '37': 1,  // izquierda
  '38': 2,  // arriba
  '39': 4  // derecha
};

var gravedad = 1;
var limiteV = 10;
var alto = 400;
var velocidadSalto = -15;
var anchoPlataforma = 100;
var altoPlataforma = 20;
var plataformas = [];

var personaje = {
  x: 40,
  y: 40,
  vy: 0,
  vx: 1,
  enPiso: false
};


var Plataforma = function(x, y){
  var x = x;
  var y = y;
  return {
    x: x,
    y: y,
    dibujar: function(){
      context.fillRect(x, y, anchoPlataforma, altoPlataforma);
    }
  }
};

function aplicarGravedad(){
  if(!personaje.enPiso){
    personaje.vy += gravedad;
    if(personaje.vy > limiteV){
      personaje.vy = limiteV;
    }
  }

  personaje.y += personaje.vy;
  // validamos que el personaje no se salga del escenario
  if(personaje.y > alto - 40){
    personaje.y = alto - 40;
    personaje.enPiso = true;
  }
};

function mover(){
  personaje.x = personaje.x + personaje.vx;
};

function crearPlataformas(){
  plataformas.push(new Plataforma(120, 300));
  plataformas.push(new Plataforma(220, 200));
  plataformas.push(new Plataforma(320, 100));
  plataformas.push(new Plataforma(220, 50));
};

function dibujar(){
  context.fillStyle = "#fff";
  context.fillRect(0,0,600,400);

  //dibujar plataformas
  context.fillStyle = "#f00";
  for (var i = plataformas.length - 1; i >= 0; i--) {
    plataformas[i].dibujar();
  };

  context.fillStyle = "#000";
  context.fillRect(personaje.x, personaje.y, 40, 40);
  context.fillText(keyMap.toString(2), 10, 10);
};

function saltar(){
  if(personaje.enPiso){
    personaje.vy = velocidadSalto;
    personaje.enPiso = false;
  }
}

function leerEntradas(){
  if(keyMap & 4){
    personaje.vx = limiteV;
  }else if(keyMap & 1){
    personaje.vx = -limiteV;
  }else{
    personaje.vx = 0;
  }
  if(keyMap & 2){
    saltar();
  }
};

function validarColisiones(){
  if(personaje.vy<0){
    return;
  }
  for (var i = plataformas.length - 1; i >= 0; i--) {
    var plat = plataformas[i];
    if((personaje.x + 40 > plat.x && personaje.x+40 < plat.x + anchoPlataforma ||
        personaje.x > plat.x && personaje.x < plat.x + anchoPlataforma) &&
       (personaje.y + 40 > plat.y && personaje.y+40 < plat.y + altoPlataforma ||
        personaje.y > plat.y && personaje.y < plat.y + altoPlataforma)){

      personaje.enPiso = true;
      personaje.vy = 0;
      return;
    }
  };
  personaje.enPiso = false;
}

function actualizarMundo(){
  mover();
  validarColisiones();
  aplicarGravedad();
}

function loop(){
  leerEntradas();
  actualizarMundo();
  dibujar();

  requestAnimationFrame(loop);
}

crearPlataformas();
requestAnimationFrame(loop);


// manejo de los eventos del teclado para el personaje
document.addEventListener('keydown', function(e){
  var key = e.keyCode ? e.keyCode : e.which;
  if(keys[key]){
    keyMap = keys[key] | keyMap;
    e.preventDefault();
  }
});


document.addEventListener('keyup', function(e){
  var key = e.keyCode ? e.keyCode : e.which;
  if(keyMap & keys[key]){
    keyMap -= keys[key];
    e.preventDefault();
  }
});


## style.css
body {
	background: #0095CB;
	color: #fff;
	font-family: Whitney, helvetica, arial, sans-serif;
}
h1 {
	text-align: center;
}
h2, h3 {
	line-height: 0.7rem;
}
footer {
	position: absolute;
	bottom: 0rem;
	left: 2rem;
}
#scene {
	border: 2px solid #129EA3;
	background: #fff;
	display: block;
	margin: 0 auto;
}
	<html>
	<head>
	<meta charset="utf-8">
	<title>Fundamentos de física</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
	<h1>Aplicando físicas a videojuegos</h1>
	<canvas id="scene" width="600" height="400"></canvas>
	<script type="text/javascript" src="main.js"></script>
	<footer>
	<h2>BogotáJS</h2>
	<h3>bogotajs.com</h3>
	</footer>
	</body>
	</html>
	var context = document.getElementById("scene").getContext("2d");

	/*
	dai
	000
	100 derecha = 4
	010 arriba = 2
	001 izquierda = 1

	110 derecha \| arriba = 6
	100
	2 = 010
	*/
	var keyMap = 0;
	var keys = {
	'37': 1, // izquierda
	'38': 2, // arriba
	'39': 4 // derecha
	};

	var gravedad = 1;
	var limiteV = 10;
	var alto = 400;
	var velocidadSalto = -15;
	var anchoPlataforma = 100;
	var altoPlataforma = 20;
	var plataformas = [];

	var personaje = {
	x: 40,
	y: 40,
	vy: 0,
	vx: 1,
	enPiso: false
	};


	var Plataforma = function(x, y){
	var x = x;
	var y = y;
	return {
	x: x,
	y: y,
	dibujar: function(){
	context.fillRect(x, y, anchoPlataforma, altoPlataforma);
	}
	}
	};

	function aplicarGravedad(){
	if(!personaje.enPiso){
	personaje.vy += gravedad;
	if(personaje.vy > limiteV){
	personaje.vy = limiteV;
	}
	}

	personaje.y += personaje.vy;
	// validamos que el personaje no se salga del escenario
	if(personaje.y > alto - 40){
	personaje.y = alto - 40;
	personaje.enPiso = true;
	}
	};

	function mover(){
	personaje.x = personaje.x + personaje.vx;
	};

	function crearPlataformas(){
	plataformas.push(new Plataforma(120, 300));
	plataformas.push(new Plataforma(220, 200));
	plataformas.push(new Plataforma(320, 100));
	plataformas.push(new Plataforma(220, 50));
	};

	function dibujar(){
	context.fillStyle = "#fff";
	context.fillRect(0,0,600,400);

	//dibujar plataformas
	context.fillStyle = "#f00";
	for (var i = plataformas.length - 1; i >= 0; i--) {
	plataformas[i].dibujar();
	};

	context.fillStyle = "#000";
	context.fillRect(personaje.x, personaje.y, 40, 40);
	context.fillText(keyMap.toString(2), 10, 10);
	};

	function saltar(){
	if(personaje.enPiso){
	personaje.vy = velocidadSalto;
	personaje.enPiso = false;
	}
	}

	function leerEntradas(){
	if(keyMap & 4){
	personaje.vx = limiteV;
	}else if(keyMap & 1){
	personaje.vx = -limiteV;
	}else{
	personaje.vx = 0;
	}
	if(keyMap & 2){
	saltar();
	}
	};

	function validarColisiones(){
	if(personaje.vy<0){
	return;
	}
	for (var i = plataformas.length - 1; i >= 0; i--) {
	var plat = plataformas[i];
	if((personaje.x + 40 > plat.x && personaje.x+40 < plat.x + anchoPlataforma \|\|
	personaje.x > plat.x && personaje.x < plat.x + anchoPlataforma) &&
	(personaje.y + 40 > plat.y && personaje.y+40 < plat.y + altoPlataforma \|\|
	personaje.y > plat.y && personaje.y < plat.y + altoPlataforma)){

	personaje.enPiso = true;
	personaje.vy = 0;
	return;
	}
	};
	personaje.enPiso = false;
	}

	function actualizarMundo(){
	mover();
	validarColisiones();
	aplicarGravedad();
	}

	function loop(){
	leerEntradas();
	actualizarMundo();
	dibujar();

	requestAnimationFrame(loop);
	}

	crearPlataformas();
	requestAnimationFrame(loop);


	// manejo de los eventos del teclado para el personaje
	document.addEventListener('keydown', function(e){
	var key = e.keyCode ? e.keyCode : e.which;
	if(keys[key]){
	keyMap = keys[key] \| keyMap;
	e.preventDefault();
	}
	});


	document.addEventListener('keyup', function(e){
	var key = e.keyCode ? e.keyCode : e.which;
	if(keyMap & keys[key]){
	keyMap -= keys[key];
	e.preventDefault();
	}
	});
	body {
	background: #0095CB;
	color: #fff;
	font-family: Whitney, helvetica, arial, sans-serif;
	}
	h1 {
	text-align: center;
	}
	h2, h3 {
	line-height: 0.7rem;
	}
	footer {
	position: absolute;
	bottom: 0rem;
	left: 2rem;
	}
	#scene {
	border: 2px solid #129EA3;
	background: #fff;
	display: block;
	margin: 0 auto;
	}