Key controls without conditions

by Julien Etienne

HTML

<canvas id='canvas'></canvas>

CSS

canvas {
    background: yellow;
    width: 100%;
    height: 100vw;
}

JavaScript

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext("2d"),
    key;
canvas.width = canvas.height = 400;

var midHt = canvas.width / 2,
    midWd = canvas.height / 2;

window.addEventListener("keydown", function (e) {
    var newKp = 'key' + e.keyCode;
    key = {
        'key38': function () {
            alert('up');
        },
            'key40': function () {
            alert('down');
        },
            'key37': function () {
            alert('left');
        },
            'key39': function () {
            alert('right');
        },
            'key32': function () {
            alert('space');
        },
        action: function (keyID) {
            this[keyID]();
        }
    }.action(newKp);
});

var sprite = {
    width: 20,
    height: 20,
    init: function () {
        ctx.fillStyle = '#000';
        ctx.fillRect(midWd - (this.width / 2), midHt - (this.width / 2), this.width, this.height);
    }
}.init();