JSFiddle - React, Tailwind, and code Playground

Doodle Jump Game using HTML5 This is a recreation of Doodle Jump that originally comes for Android and iOS devices. This game is created using awesome HTML5 API and Canvas. It does not have all of the features that the original game has (for now) like Monsters, Power ups etc. http://cssdeck.com/labs/html5-doodle-jump

by Jennifer Perrin

HTML

<div class="container">
		<canvas id="canvas">
			Aww, your browser doesn't support HTML5!
		</canvas>

		<div id="mainMenu">
			<h1>doodle jump</h1>
			<h3>using HTML5</h3>

			<p class="info">
				use
				<span class="key left">←</span>
				<span class="key right">→</span>
				to move and space to (re) start...
			</p>
			<a class="button" href="javascript:init()">Play</a>
		</div>
		
		<div id="gameOverMenu">
			<h1>game over!</h1>
			<h3 id="go_score">you scored 0 points</h3>

			<a class="button" href="javascript:reset()">Restart</a>
		</div>
		
		
		<!-- Preloading image ;) -->
		<img id="sprite"...

CSS

@import url(http://fonts.googleapis.com/css?family=Gloria+Hallelujah);

*{box-sizing: border-box;}

body {
	margin: 0; padding: 0;
	font-family: 'Gloria Hallelujah', cursive;
}

.container {
	height: 552px;
	width: 422px;
	position: relative;
	margin: 20px auto 0; 
	overflow: hidden;
}

canvas {
	height: 552px;
	width: 422px;
	display: block;
	background:...

JavaScript

// RequestAnimFrame: a browser API for getting smooth animations
window.requestAnimFrame = (function() {
	return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
	function(callback) {
		window.setTimeout(callback, 1000 / 60);
	};
})();

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

var width = 422,
	height = 552;

canvas.width = width;
canvas.height = height;

//Variables for game
var platforms = [],
	image = document.getElementById("sprite"),
	player, platformCount = 10,
	position = 0,
	gravity = 0.2,
	animloop,
	flag = 0,
	menuloop, broken = 0,
	dir, score = 0, firstRun = true;

//Base object
var Base = function() {
	this.height = 5;
	this.width = width;

	//Sprite clipping
	this.cx = 0;
	this.cy = 614;
	this.cwidth = 100;
	this.cheight = 5;

	this.moved = 0;

	this.x = 0;
	this.y = height - this.height;

	this.draw = function() {
		try {
			ctx.drawImage(image, this.cx, this.cy, this.cwidth, this.cheight, this.x, this.y, this.width, this.height);
		} catch (e) {}
	};
};

var base = new Base();

//Player object
var Player = function() {
	this.vy = 11;
	this.vx = 0;

	this.isMovingLeft = false;
	this.isMovingRight = false;
	this.isDead = false;

	this.width = 55;
	this.height = 40;

	//Sprite clipping
	this.cx = 0;
	this.cy = 0;
	this.cwidth = 110;
	this.cheight = 80;

	this.dir = "left";

	this.x = width / 2 - this.width / 2;
	this.y = height;

	//Function to draw it
	this.draw = function() {
		try {
			if (this.dir == "right") this.cy = 121;
			else if (this.dir == "left") this.cy = 201;
			else if (this.dir == "right_land") this.cy = 289;
			else if (this.dir == "left_land") this.cy = 371;

			ctx.drawImage(image, this.cx, this.cy, this.cwidth, this.cheight, this.x, this.y, this.width, this.height);
		} catch (e) {}
	};

	this.jump = function() {
		this.vy = -8;
	};

	this.jumpHigh = function()...