Simon says HTML5

Here's a little game written in HTML5 using bleeding edge audio. Since I don't do much HTML5 or Javascript, I'm particularly interested in:

• Structure Is this a reasonable way to structure the Javascript? Should I encapsulate everything in an object?

• Compatibility I believe the older versions of Internet Explorer won't work with this. Are there other issues with modern browsers?

The in-game instructions are terse, but the keys j, k, d and f correspond to upper left, upper right, lower left and lower right quadrants respectively. Alternatively, you can use the mouse. It may also work with a touchscreen -- I'd be interested in learning if it does. It works with at least some touchscreens (Windows 8 and iPhone), but I'd be interested in learning of touchscreens where it does not seem to work.



`var litcolors = ['red', 'yellow', 'lightblue', 'lightgreen'];
var colors = ['darkred', 'darkorange', 'darkblue', 'darkgreen'];
var ctx, innerRadius, outerRadius;
var states = [ false, false, false, false ];
var keys = [ 74, 75, 70, 68 ];
var notes = [ 261.626, 329.628, 391.995, 523.251 ];
var sequence = [];
var seqitem = 0;
var c;
var turn = 0;
var timeout;

function instructions() {
alert("After the computer shows a sequence,\ntry to reproduce it.\nYou can use the keys kldf or the mouse");
}
function init() {
c = document.getElementById('simon');
ctx = c.getContext("2d");
paintToy(-1);
instructions();
c.addEventListener('mousedown', function(evt) {
var mousePos = getMousePos(c, evt);
var quadrant = getQuadrant(mousePos);
if (turn == 1) {
tryMove(quadrant);
}
}, false);

c.addEventListener('mouseup', function(evt) {
paintToy(-1);
}, false);

document.addEventListener('keyup', function(evt) {
paintToy(-1);
}, false);

document.addEventListener('keydown', function(evt) {
var quadrant = getQuadrantKey(evt.keyCode);
if (turn == 1) {

First, bravo! It's very fun and highly nostalgic. I may or may not have forced encouraged my children to play it well past their bedtime.

As to the structure, in 2014, it is absolutely recommended that you encapsulate your game inside a module. This ensures that it's portable, that it doesn't cause conflicts in the global namespace, and (from a self-discipline perspective) it will benefit from a bit more code organization and thinking about things like DRY, scoping, subclasses, etc.

So some general pseudocode from a more OO-style would be:

SimonGame {

    Oscillator {
        Type
        Frequency
        Start()
        Disconnect()
        Beep()
   }

    Canvas {
        WriteMessage()
        Paint()
        Quadrants
            Quadrant
                Color
                LitColor
                State
   }

    Guess()

    Init(options)   
}

That's just a rough start, but the general idea would be to call things like Canvas.Paint() and Oscillator.Beep(), etc. rather than your global functions.

You might also want take a document element or ID in your Init() method arguments so the user can pass in the canvas they want to "simonize".

StackExchange Code Review Q#71835, answer score: 6