game-shooting

http://jlongster.com/Making-Sprite-based-Games-with-Canvas

by vishalvasani

HTML

<body>
    <div id="game-over-overlay">
    </div>

    <div id="game-over">
      <h1>GAME OVER</h1>
      <button id="play-again">Play Again</button>
    </div>

    <div class="wrapper">
      <div id="instructions">
        <div>
          move with <span class="key">arrows</span> or <span class="key">wasd</span>
        </div>
        <div>
          shoot with <span class="key">space</span>
        </div>
      </div>

      <div id="score"></div>
    </div>


  </body>

CSS

html, body {
    margin: 0;
    padding: 0;
    background-color: #151515;
}

canvas {
    display: block;
    margin: auto;

    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.wrapper {
    width: 512px;
    margin: 0 auto;
    margin-top: 2em;
}

#instructions {
    float: left;
    font-family: sans-serif;
    color: #757575;
}

#score {
    float: right;
    color: white;
    font-size: 2em;
}

.key {
    color: #aaffdd;
}

#game-over, #game-over-overlay {
    margin: auto;
    width: 512px;
    height: 480px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: none;
}

#game-over-overlay {
    background-color: black;
    opacity: .5;
}

#game-over {
    height: 200px;
    text-align: center;
    color: white;
}

#game-over h1 {
    font-size: 3em;
    font-family: sans-serif;
}

#game-over button {
    font-size: 1.5em;
}

JavaScript

////////////////////////////////////////////////////////
// resources.js
////////////////////////////////////////////////////////

(function() {
    var resourceCache = {};
    var loading = [];
    var readyCallbacks = [];

    // Load an image url or an array of image urls
    function load(urlOrArr) {
        if(urlOrArr instanceof Array) {
            urlOrArr.forEach(function(url) {
                _load(url);
            });
        }
        else {
            _load(urlOrArr);
        }
    }

    function _load(url) {
        if(resourceCache[url]) {
            return resourceCache[url];
        }
        else {
            var img = new Image();
            img.onload = function() {
                resourceCache[url] = img;
                
                if(isReady()) {
                    readyCallbacks.forEach(function(func) { func(); });
                }
            };
            resourceCache[url] = false;
            img.src = url;
        }
    }

    function get(url) {
        return resourceCache[url];
    }

    function isReady() {
        var ready = true;
        for(var k in resourceCache) {
            if(resourceCache.hasOwnProperty(k) &&
               !resourceCache[k]) {
                ready = false;
            }
        }
        return ready;
    }

    function onReady(func) {
        readyCallbacks.push(func);
    }

    window.resources = { 
        load: load,
        get: get,
        onReady: onReady,
        isReady: isReady
    };
})();



////////////////////////////////////////////////////////
// input.js
////////////////////////////////////////////////////////

(function() {
    var pressedKeys = {};

    function setKey(event, status) {
        var code = event.keyCode;
        var key;

        switch(code) {
        case 32:
            key = 'SPACE'; break;
        case 37:
            key = 'LEFT'; break;
        case 38:
            key = 'UP'; break;
        case 39:
            key = 'RIGHT'; break;
       ...