Simple Canvas Movement Only Jump

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
}

function draw(){
	move();
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	ctx.beginPath();
	ctx.fillRect(p.x, p.y, p.width, p.height);
	ctx.fill();
	requestAnimationFrame(draw);
}
requestAnimationFrame(draw);

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 move(){
	var movementRate = 3;
	var gravety = .3;
  var jumpVel = 5.5;
	
	if(pressed.up && !p.falling){
		p.volY = jumpVel;
	}
	if(pressed.left && p.x >= movementRate){
		p.x -= movementRate;
	}
	if(pressed.right && p.x <= canvas.width - p.width - movementRate){
		p.x += movementRate;
	}
	
	// Physics
	safeSubtract(p.y, p.volY);
  p.volY -= gravety;
}

function safeSubtract(position, val){
	var result = position - val;
	if(result >= canvas.height - p.height){
  	p.y = (canvas.height - p.height);
    p.falling = false;
    p.volY = - p.volY/2;
    return;
  }
  p.falling = true;
  p.y = result;
}

var keydown = (e, s) => keychange(e, 'down');
var keyup = (e, s) => keychange(e, 'up');

b.addEventListener('keydown', keydown);
b.addEventListener('keyup', keyup);