Simple Canvas Movement

by Spencer Smith

HTML

<canvas id="canvas"></canvas>

CSS

canvas{
  background-color: white;
}
body{
	whitespace: break;
}

JavaScript

var b = document.body;
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var pressed = {up: false, right: false, down: false, left: false}

var c = {up: 38, right: 39, down: 40, left: 37};

//document.body.addEventListener('keydown', player.move);

var p = {
	x: 0,
	y: 0,
	volY: 0,
	falling: true,
	width: 15,
	height: 15
};

var solids = [];

function draw(){
	move();
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	drawSolids();
	drawPlayer();
	requestAnimationFrame(draw);
}
requestAnimationFrame(draw);

function drawSolids(){
	for(var i = 0; i < solids.length; i++){
		ctx.beginPath();
		ctx.fillStyle = "mediumseagreen";
		ctx.fillRect(solids[i].x, solids[i].y, solids[i].w, solids[i].h);
		ctx.fill();
	}
}

function collision(x, y){
	for(var i = 0; i < solids.length; i++){
		var s = solids[i];
		var leftInside = p.x > s.x && p.x < (s.x + s.w);
		var rightInside = (p.x + p.width) > s.x && (p.x + p.width) < (s.x + s.w);
		var bottomInside = (p.y + p.height) > s.y && (p.y + p.height) < s.y + s.h;
		var topInside = p.y > s.y && p.y < s.y + s.h;
		if((leftInside || rightInside) && (bottomInside || topInside)){
			return s.y;
		}
	}
}

function drawPlayer(){
	ctx.beginPath();
	ctx.fillStyle = "#000";
	ctx.fillRect(p.x, p.y, p.width, p.height);
	ctx.fill();
}

function keychange(e, s){
	var state = (s == 'down') ? true : false;
	switch(e.keyCode){
		case c.up:
			pressed.up = state;
			break;
		case c.right:
			pressed.right = state;
			break;
			//case c.down:
			//pressed.down = state;
			//break;
		case c.left:
			pressed.left = state;
			break;
	}
}

var toggle = s => !s;

function addSolid(x, y, w, h){
 solids.push({x: x, y: y, w: w, h: h});
}
addSolid(0, canvas.height/1.5, 50, 15);
addSolid(60, canvas.height - 30, 50, 30);
addSolid(60, canvas.height - 90, 50, 15);

function move(){
	var movementRate = 3;
	var gravety = .3;
	var jumpVel = 6;

	if(pressed.up && !p.falling){
		debugger;
		p.volY = jumpVel;
	}
	if(pressed.left &&...