Impossible Game Remake

Impossible Game Remake by Tgwizman Inspired by The Impossible Game by FlukeDude

by Tgwizman

HTML

<div id="wrapper">
    <canvas id="c" width="640" height="320"></canvas>
    <div id="player"></div>
    <div id="msg">The Impossible Game<br>By Beau<br><br>Press any key to start</div>
</div>

CSS

html {
    width: 100%;
    height: 100%;
    background: #31618c;
    background: -moz-linear-gradient(top,  #31618c 0%, #46adc9 50%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#31618c), color-stop(50%,#46adc9));
    background: -webkit-linear-gradient(top,  #31618c 0%,#46adc9 50%);
    background: -o-linear-gradient(top,  #31618c 0%,#46adc9 50%);
    background: -ms-linear-gradient(top,  #31618c 0%,#46adc9 50%);
    background: linear-gradient(top,  #31618c 0%,#46adc9 50%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#31618c', endColorstr='#46adc9',GradientType=0 );
}

#wrapper {
    position: absolute;
    width: 640px;
    height: 320px;
}

#canvas {
    position: absolute;
    top: 0px;
    left: 0px;
}

#msg {
    position: absolute;
    top: 60px;
    display: block;
    width: 640px;
    color: #FFF;
    font: 32pt monospace;
    text-align: center;
}

#player {
    position: absolute;
    top: 192px;
    left: 128px;
    display: none;
    width: 26px;
    height: 26px;
    border-radius: 2px;
    border: 3px solid #F00;background: #ff8c00;
    background: -moz-radial-gradient(center, ellipse cover,  #ff8c00 0%, #ff5000 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ff8c00), color-stop(100%,#ff5000));
    background: -webkit-radial-gradient(center, ellipse cover,  #ff8c00 0%,#ff5000 100%);
    background: -o-radial-gradient(center, ellipse cover,  #ff8c00 0%,#ff5000 100%);
    background: -ms-radial-gradient(center, ellipse cover,  #ff8c00 0%,#ff5000 100%);
    background: radial-gradient(center, ellipse cover,  #ff8c00 0%,#ff5000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8c00', endColorstr='#ff5000',GradientType=1 );
}

JavaScript

var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var pDiv = document.getElementById('player');

var tileSize = 32;
var cWidth = canvas.width / tileSize;
var cHeight = canvas.height / tileSize;

setInterval(function() {
    var wrapper = document.getElementById('wrapper').style;
    wrapper.top = window.innerHeight / 2 - 160 + 'px';
    wrapper.left = window.innerWidth / 2 - 320 + 'px';
}, 100);

var lastLoop = new Date().getTime();

var player = {
    'pos': {
        'x': -8,
        'y': 0
    },
    'y_v': 0,
    'jump': false,
    'pause': false,
    'attempts': 0,
};

var map = [
    [],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 1, 2, 2, 1, 0, 0, 0, 0, 1, 0, 0, 1, 1, 1, 0, 0, 2, 0, 0, 0, 1, 0, 0, 0, 0, 1, 2, 2, 1, 0, 0, 0, 1, 0, 0, 1, 2, 2, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    ];

function message(msg) {
    document.getElementById('msg').innerHTML = msg;
}

function drawCanvas() {
    canvas.width = canvas.width;

    for (x = -1; x < cWidth - 1; x++) {
        for (y = 0; y < cHeight; y++) {
            var a = x + Math.floor(player.pos.x) - 5;
            var b = y - Math.floor(player.pos.y);

            if (!map[b]) {
                map[b] = [];
            }

            if (!map[b][a]) {
                map[b][a] = 0;
            }

            if (b === 4) {
                map[b][a] = -1;
            }

            if (map[b][a]) {
                var color = '0,0,0';
                var height = tileSize;
          ...