Asteroids

Experiment in jQuery and KineticJS

HTML

<script src="http://rawgit.com/ericdrowell/KineticJS/v5.1.0/kinetic.min.js"></script>
<head>
</head>
<body>
    <div id="container"></div>
</body>

CSS

body {
    margin: 0px;
    overflow: hidden;
}
canvas {
    border: 1px solid #000000;
}

JavaScript

/* constants */
var MAX_SPEED = 5;
var DRAG = 0.005;
var BACKGROUND_SIZE_MULT = 1.5;
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;

$(document).ready(function() {
    $(document).keydown(function(e) {
        switch (e.keyCode) {
        case 37:
        case 65:
            // left arrow - a
            Ship.instance().turn(-10);
            break;
        case 38:
        case 87:
            // up arrow - w
            Ship.instance().accelerate(.5);
            break;
        case 39:
        case 68:
            // right arrow - d
            Ship.instance().turn(10);
            break;
        case 40:
        case 83:
            // down arrow - s
            Ship.instance().accelerate(-.5);
            break;
        case 32:
            // space bar - shoot
            Ship.instance().shoot();
            break;
        }

        e.preventDefault();
    });

    Asteroids.instance().start();
});

/* Singletons */
var Asteroids = (function() {
    var instantiated;

    function init() {
        var stage = new Kinetic.Stage({
       container: document.getElementById('container'),
       width: SCREEN_WIDTH,
       height: SCREEN_HEIGHT
   			});

        // background
        var backgroundLayer = new Kinetic.Layer();
        backgroundLayer.add(new Kinetic.Rect({
            width: SCREEN_WIDTH,
            height: SCREEN_HEIGHT,
            fill: "#001E4A"
        }));

        $.each(Stars.instance().stars, function(i, star) {
            backgroundLayer.add(star);
        });

        stage.add(backgroundLayer);

        // create ship
        var shipLayer = new Kinetic.Layer();
        shipLayer.add(Ship.instance().shape);
        stage.add(shipLayer);

        // bullets
        var bulletLayer = new Kinetic.Layer();
        stage.add(bulletLayer);

        stage.onFrame(function(frame) {
            Stars.instance().update();
            Ship.instance().update();
        });

        function start() {
          ...