Jump flappy

by Konstantin Cryman

HTML

<canvas id="myDisplay"></canvas><br>
<button id="restart"> restart </button>

CSS

#myDisplay{
  width: 300px ;
  height: 300px ;
  border: 1px #333 solid ;
}

#jump{
  /* width:  ; */
  /* height:  ; */
}


canvas {
    image-rendering: optimizeSpeed;             /* Older versions of FF          */
    image-rendering: -moz-crisp-edges;          /* FF 6.0+                       */
    image-rendering: -webkit-optimize-contrast; /* Safari                        */
    image-rendering: -o-crisp-edges;            /* OS X & Windows Opera (12.02+) */
    image-rendering: pixelated;                 /* Awesome future-browsers       */
    -ms-interpolation-mode: nearest-neighbor;   /* IE                            */
}

JavaScript

var can = document.getElementById('myDisplay');
var ctx = can.getContext('2d');
var restart = document.getElementById('restart');

var gravity = 0.07;
var frame = 0;
var land = false;

can.width = 50;
can.height = 50;

var Player = {
		x: can.width/5,
    y: can.height/2,
    vx: 0,
    vy: 0
};

function checkPlayerPosition(){
  
  if( Player.y >= can.height ){
  	console.log('Landing!!!');
  	land = true;
    Player.y = can.height-3;
    Player.vy = 0;
  }
  
  if(!land){
      Player.vy += gravity;
  		Player.y += Player.vy;
  }
  
}

var animation = function(){
	frame++;
	
  checkPlayerPosition();
  
  ctx.clearRect( 0, 0, can.width, can.height );
  
  ctx.fillStyle = '#ff0000';
  ctx.fillRect( Player.x, Math.round(Player.y), 3, 3 );
  
};


var animate = function(){
    animation();
    requestAnimationFrame( animate );
}; animate();


can.addEventListener( 'mouseup', function(){
		// if( land ){
    		console.log('jump!');
    		land = false;
    		Player.vy = -1.5;
    // }
}, false );

restart.addEventListener( 'mouseup', function(){
		window.location.reload();
}, false );