simon of the future

by TimPietrusky

HTML

<script src="https://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js"></script>
<script src="https://raw.github.com/phiggins42/bloody-jquery-plugins/55e41df9bf08f42378bb08b93efcb28555b61aeb/pubsub.js"></script>
<script src="http://timpietrusky.com/js/riffwave.js"></script>
<!--
     ## asdf

     A remake of the 1978 launched Simon electronic game!

     This is a Keyboard-Only-Game (KOG).
     So please use your keyboard. There will maybe a clickable version later.

     Best played with the latest WebKit-browsers (Chrome or Safari) 
     because WebKit has much better performance, css filter and 
     css repeating-radial-gradient support.

     # 2012 by Tim Pietrusky for js13kGames 2012

     ---

     ## Thanks to

     ### Pub/sub
     https://github.com/phiggins42/bloody-jquery-plugins/blob/master/pubsub.js

     ### riffwave.js
     http://codebase.es/riffwave/
-->

<div class="wrapper">
  <span role="hole">
      <div id="status"></div>
  </span>
  <section id="gaming-buttons">
      <button role="one" class="a"></button>
      <button role="two" class="s"></button>
      <button role="three" class="d"></button>
      <button role="four" class="f"></button>
  </section>
    
  <div id="info">
      <div id="score">0000000</div>
      <div id="level">0</div>
      <div id="mode-text">normal</div>
  </div>
</div>

<div id="controls">
    <button id="space" class="key">space bar</button> <span><b>new game</b></span>
    <button id="esc" class="key">esc</button> <span><b>reset</b></span>
    
    <hr />
    
    <b>mode</b>
    <form id="mode">
        <input type="radio" name="mode" id="normal" checked>
        <label id="one" class="key" for="normal">1</label>
        <input type="radio" name="mode" id="expert">
        <label id="two" class="key" for="expert">2</label>
        <input type="radio" name="mode" id="hell">
        <label id="three" class="key" for="hell">3</label>
    <form>
        
    <hr />
    
    <b>volume</b> 
   ...

CSS

* {
    box-sizing: border-box;
}

body {
  height: 100%;
  padding:40px 0 0 0;
  overflow-x:hidden;
  font:18px "Lucida Grande", Lucida, Arial, sans-serif;
  margin: 0;
  background: linear-gradient(top, rgba(46,46,46,1) 0%,rgba(49,49,49,1) 1%,rgba(55,55,55,1) 2%,rgba(58,58,58,1) 2%,rgba(60,60,60,1) 3%,rgba(61,61,61,1) 4%,rgba(59,59,59,1) 10%,rgba(50,50,50,1) 28%,rgba(48,48,48,1) 37%,rgba(48,48,48,1) 41%,rgba(50,50,50,1) 45%,rgba(55,55,55,1) 51%,rgba(60,60,60,1) 55%,rgba(61,61,61,1) 57%,rgba(62,62,62,1) 59%,rgba(62,62,62,1) 61%,rgba(61,61,61,1) 66%,rgba(51,51,51,1) 82%,rgba(48,48,48,1) 89%,rgba(49,49,49,1) 92%,rgba(54,54,54,1) 98%,rgba(55,55,55,1) 100%);
    
      background: linear-gradient(left, rgba(238,196,135,.5) 0%,rgba(243,207,154,.5) 3%,rgba(248,216,162,.5) 6%,rgba(243,207,154,.5) 6%,rgba(243,207,154,.5) 9%,rgba(241,202,136,.5) 12%,rgba(243,207,154,.5) 15%,rgba(244,208,158,.5) 17%,rgba(243,207,154,.5) 19%,rgba(243,207,154,.5) 21%,rgba(250,221,176,.5) 23%,rgba(250,221,176,.5) 25%,rgba(243,207,154,.5) 27%,rgba(238,200,138,.5) 29%,rgba(243,207,154,.5) 29%,rgba(243,207,154,.5) 32%,rgba(243,207,154,.5) 34%,rgba(243,207,154,.5) 37%,rgba(250,221,176,.5) 40%,rgba(250,221,176,.5) 43%,rgba(243,207,154,.5) 43%,rgba(243,207,154,.5) 44%,rgba(243,207,154,.5) 47%,rgba(238,200,138,.5) 49%,rgba(243,207,154,.5) 52%,rgba(250,221,176,.5) 54%,rgba(244,208,158,.5) 56%,rgba(243,207,154,.5) 59%,rgba(244,208,158,.5) 61%,rgba(250,221,176,.5) 64%,rgba(243,207,154,.5) 64%,rgba(244,208,158,.5) 66%,rgba(243,207,154,.5) 69%,rgba(248,216,162,.5) 71%,rgba(243,207,154,.5) 74%,rgba(243,207,154,.5) 76%,rgba(243,207,154,.5) 77%,rgba(243,207,154,.5) 80%,rgba(250,221,176,.5) 81%,rgba(243,207,154,.5) 83%,rgba(250,221,176,.5) 83%,rgba(250,221,176,.5) 85%,rgba(243,207,154,.5) 87%,rgba(250,221,176,.5) 89%,rgba(250,221,176,.5) 91%,rgba(243,207,154,.5) 92%,rgba(248,216,162,.5) 96%,rgba(243,207,154,.5) 97%,rgba(243,207,154,.5) 97%,rgba(243,207,154,.5) 98%,rgba(243,207,154,.5)...

JavaScript

(function() {
    var _this;
    
    /*
     * Constructor
     */
    Asdf = function() {
        // Reference to root
        _this = this;
        
        // Get dom elements
        var buttons = this.getButtons();
       
        this.dom = {};
        this.dom.body = document.getElementsByTagName('body')[0];
        this.dom.wrapper = document.getElementsByClassName('wrapper')[0];
        this.dom.controls = this.getId('controls');
        this.dom.spacebar = this.getId('space');
        this.dom.esc = this.getId('esc');
        this.dom.one = this.getId('one');
        this.dom.two = this.getId('two');
        this.dom.three = this.getId('three');
        this.dom.up = this.getId('up');
        this.dom.down = this.getId('down');
        this.dom.message = this.getId('message');
        this.dom.status = this.getId('status');
        this.dom.score = this.getId('score');
        this.dom.level = this.getId('level');
        this.dom.noclick = this.getId('noclick');
        this.dom.info = this.getId('info');
        this.dom.mode = this.getId('mode');
        this.dom.modetext = this.getId('mode-text');
        
        // Options
        this.o = {};
        this.o.elements = {};
        this.o.elements['a'] = buttons[0];
        this.o.elements['s'] = buttons[1];
        this.o.elements['d'] = buttons[2];
        this.o.elements['f'] = buttons[3];
        this.o.types = ['a', 's', 'd', 'f'];
        
        // Audio
        this.o.audio = [];
        this.o.volume = .15;
        this.o.wave = [];
        this.o.data = [];
        this.o.data['a'] = [];
        this.o.data['s'] = [];
        this.o.data['d'] = [];
        this.o.data['f'] = [];
        
        // Game
        this.o.list = [];
        this.o.count = 0;
        this.o.started = false;
        
        // Register listener
        document.onkeydown = this.keyboard.receive;
        document.onkeyup = this.keyboard.receive;
        document.onclick = this.clickizr;
        
        //...