JGGPLe

index.html

<canvas id="canvas" width="400" height="500" class="playable"></canvas>

JGGPLe.markdown

JGGPLe

Forked from Captain Anonymous's Pen OMMLRJ.

A Pen by AJ Nadel on CodePen.

License.

script.js

var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')
var image = new Image();
image.src = 'http://24.media.tumblr.com/0843bd3a76e38ea60e1e926529382dc2/tumblr_n0bz5nRgp81svwlszo1_r1_250.gif'

var bird = {x: 0, y: 0, size: 75}

var intercept = 0
var f = (x) => -0.2*Math.pow(x, 2)+10*x+intercept

let renderPrecision = 2
let framesPerTick = renderPrecision/2

var i = 0
function loop(){
  i += framesPerTick
  
  bird.x = 0
  bird.y = f(i)
  if (isOutsideCanvas()) {die()}
  
  draw()
  console.log(bird.x, bird.y)
}

function draw(){
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  
  var invertedHeight = (canvas.height-bird.size)-bird.y
  ctx.drawImage(image, bird.x, invertedHeight, bird.size, bird.size);
}

function isOutsideCanvas() {
  return bird.y < 0 || (bird.y+bird.size) > canvas.height
}
canvas.addEventListener('click', jump)
document.body.addEventListener('keydown', jump);
document.body.focus()

function jump(){
  i = 0
  intercept = bird.y
}

var gameLoop = setInterval(loop, 10*renderPrecision)
var die = () => { 
  clearInterval(gameLoop)
  canvas.style.backgroundColor = 'red'
}

style.css

canvas {
  background-color: #eee
}