HTML5 Milo Jump Game

HTML

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <title>Jump</title>
</head>
<body>
    <div class="container">
        <canvas id="canvas">
            Aww, your browser doesn't support HTML5!
        </canvas>

        <div id="mainMenu">
            <h1>Сессия квест</h1>
            <h3>sponsored,</h3>
            <h3>...by <a href="https://www.hse.ru" target="_blank">HSE</a></h3>
           

            <p class="info">
                Используй
                <span class="key left">←</span>
                <span class="key right">→</span>
                и "пробел" чтобы начать сессию
            </p>
            <a class="button" href="javascript:init()">На экзамен!</a>
        </div>
        
        <div id="gameOverMenu">
            <h1>упс, пересдача!</h1>
            <h3 id="go_score">ваш накоп 0</h3>

            <a class="button" href="javascript:reset()">На пересдачу</a>
            <a id="tweetBtn" target="_blank" class="button tweet" href="#">Рассказать в twi</a>

            <a id="fbBtn" target="_blank" class="button fb" href="#">Рассказать в FB</a>
        </div>
        
        
        <!-- Preloading image ;) -->
        <img id="sprite" src="http://i12.pixs.ru/storage/5/8/1/eeepng_4097046_28780581.png "/>

        <div id="scoreBoard">
            <p id="score">0</p

    </div>
</body>
</html>

CSS

@import url(https://fonts.googleapis.com/css?family=Pangolin|Roboto);

*{box-sizing: border-box;}

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

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

canvas {
    height: 552px;
    width: 422px;
    display: block;
    background: url(http://i.imgur.com/vCoBB.png) top left;
}

#scoreBoard {
    width: 420px;
    height: 50px;
    background: rgba(45, 179, 221, 0.7);
    position: absolute;
    top: -3px;
    left: 0;
    z-index: -1;    
    border-image: url(http://i.imgur.com/YXNA9.png) 100 5 round;
}

#scoreBoard p {
    font-size: 20px;
    padding: 0;
    line-height: 47px;
    margin: 0px 0 0 5px;
}

img {display: none}

#mainMenu, #gameOverMenu {
    height: 100%;
    width: 100%;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

#gameOverMenu {
    visibility: hidden;
}

h2, h3, h1 {font-weight: normal}
h1 {
    font-size: 65px; 
    color: #3b49d3; 
    transform: rotate(0deg);
    margin: 0px;
}

h3 {
    font-size: 15px;
    text-align: right;
    margin: 0px 20px 0 0;
    color: #3b49d3
}

h3 a {color: #EBA000}

.button {
    width: 105px;
    height: 31px;
    background: url(http://i.imgur.com/Q3sLW.png) 0 0 no-repeat;
    display: block;
    color:  #000;
    font-size: 12px;
    line-height: 31px;
    text-decoration: none;
    position: absolute;
    left: 50%;
    bottom: 50px;
    margin-left: -53px;
}

.button.tweet {bottom: 100px; background-position: 0 -90px}
.button.fb {bottom: 150px; background-position: 0 -60px}

.info {position: absolute; right: 20px; bottom: 00px; margin: 0; color: black}

.info .key {
    width: 16px;
    height: 16px;
    background: url(http://i.imgur.com/b6ySa.png) no-repeat;
    text-indent: -9999px;
    display: inline-block;
}

.info .key.left {background-position: -92px -621px;}
.info .key.right {background-position: -92px...

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;

           ...