Ship Demo

https://github.com/aercolino/Ship

by Andrea Ercolino

HTML

<html>

  <head>
    <title>Ship</title>
    <link rel="stylesheet" href="index.css">
    <script src="simple-javascript-inheritance.js"></script>
    <script src="index.js"></script>
  </head>

  <body>
    <canvas id="world" width="400" height="400"></canvas>
    <canvas id="background-canvas" class="background" width="400" height="400"></canvas>
    <div id="status" class="ui"></div>
    <div id="message" class="ui">
      <h2 id="title"></h2>
      <ol>
        <li>Move the mouse around for rotating the ship.</li>
        <li>Gather energy (green dots).</li>
        <li>Hold SPACE for firing bullets.</li>
      </ol>
      <a href="#" id="startButton">Start</a>
    </div>
  </body>

</html>

CSS

html {
  color: #000;
  background: #222222;
}

a {
  cursor: pointer;
}

html,
body,
div,
dl,
dt,
dd,
ul,
ol,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

fieldset,
img {
  border: 0;
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
  font-style: normal;
  font-weight: normal;
}

caption,
th {
  text-align: left;
}

/* h1,h2,h3,h4,h5,h6{font-size:100%;} */
q:before,
q:after {
  content: '';
}

abbr,
acronym {
  border: 0;
  font-variant: normal;
}

sup {
  vertical-align: text-top;
}

sub {
  vertical-align: text-bottom;
}

input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  outline-style: none;
  outline-width: 0pt;
}

legend {
  color: #000;
}

a:focus,
object,
h1,
h2,
h3,
h4,
h5,
h6 {
  -moz-outline-style: none;
  border: 0px;
}

/* input[type="Submit"]{cursor:pointer;} */
strong {
  font-weight: bold;
}

body {
  overflow: hidden;
  font-family: Helvetica, Arial, sans-serif;
  color: #333333;
  font-size: 11px;
  background-color: #222222;
}

canvas {
  cursor: crosshair;
  z-index: 1;
}

canvas.background {
  z-index: 0;
}

.ui {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  color: #999999;
  text-align: left;
  padding: 8px;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  z-index: 2;
  margin: 0;
}

#message {
  padding: 16px;
  margin: 130px 0 0 0;
}

#status {
  width: 100%;
  height: 15px;
  padding: 8px;
  display: none;
}

#status .fps {
  position: absolute;
  right: 20px;
  display: inline;
}

#status span {
  color: #bbbbbb;
  font-weight: bold;
  margin-right: 5px;
}

#title {
  margin-bottom: 20px;
  color: #eeeeee;
}

.ui ol {
  margin: 10px 0 10px 10px;
}

.ui a {
  outline: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 38px;
  text-decoration: none;
  color: #bbbbbb;
  padding: 2px;
 ...

JavaScript

/* Simple JavaScript Inheritance
 * By John Resig http://ejohn.org/
 * MIT Licensed.
 */
// Inspired by base2 and Prototype
(function(global){
  var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;
  // The base Class implementation (does nothing)
  global.Class = function(){};
  
  // Create a new Class that inherits from this class
  Class.extend = function(prop) {
    var _super = this.prototype;
    
    // Instantiate a base class (but only create the instance,
    // don't run the init constructor)
    initializing = true;
    var prototype = new this();
    initializing = false;
    
    // Copy the properties over onto the new prototype
    for (var name in prop) {
      // Check if we're overwriting an existing function
      prototype[name] = typeof prop[name] == "function" && 
        typeof _super[name] == "function" && fnTest.test(prop[name]) ?
        (function(name, fn){
          return function() {
            var tmp = this._super;
            
            // Add a new ._super() method that is the same method
            // but on the super-class
            this._super = _super[name];
            
            // The method only need to be bound temporarily, so we
            // remove it when we're done executing
            var ret = fn.apply(this, arguments);        
            this._super = tmp;
            
            return ret;
          };
        })(name, prop[name]) :
        prop[name];
    }
    
    // The dummy class constructor
    function Class() {
      // All construction is actually done in the init method
      if ( !initializing && this.init )
        this.init.apply(this, arguments);
    }
    
    // Populate our constructed prototype object
    Class.prototype = prototype;
    
    // Enforce the constructor to be what we expect
    Class.prototype.constructor = Class;

    // And make this class extendable
    Class.extend = arguments.callee;
    
    return Class;
 ...