WOF! The Javascript Game!

by Jon Eyrick

HTML

<div id="game">
    <div id="display"></div>
    <div id="playArea">
        <button id="spin">spin wheel</button>
        <button id="vowel">buy vowel</button>
        <button id="solve">solve puzzle</button>
        <button id="newpuzzle">new puzzle</button>
        <div id="moneyArea">Score: $<span id="money">0</span>

        </div>
    </div>
    <div class="clear"></div>
    <div id="tick">⇩</div>
    <img id="wheel" src="http://i.imgur.com/R7JYazp.png" data-rotation="0" />
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Changa+One);
 #game {
    font-family:'Changa One' serif;
}
#wheel {
    top: 0;
    left: 0;
    width: 500px;
    -moz-border-radius: 250px;
    -webkit-border-radius: 250px;
    border-radius: 250px;
    -webkit-transition: -webkit-transform 0.5s linear;
    -moz-transition: -moz-transform 0.5s linear;
    -opera-transition: -opera-transform 0.5s linear;
    -ms-transition: transform 0.5s linear;
}
#tick {
    margin-left: 244px;
    font-family: Arial;
    font-size: 14pt;
}
#display {
    background-color: #43759f;
    padding: 1em 2em;
    text-align: center;
    border-radius: 40px;
    border: 4px double #fff;
}
#display div.word {
    display: inline-block;
}
#display div.wordLetter {
    display: block;
    width: 50px;
    height: 65px;
    margin: 2px;
    border: 2px solid #43759f;
    float: left;
    line-height: 65px;
    font-size: 40px;
}
#display div.wordLetter.letter {
    border-color: #eee;
}
#playArea {
    clear: both;
}
#playArea button {
    text-transform: uppercase;
    z-index: 1000;
    border: 4px double #fff;
    background-color: #43759f;
    padding: 6px 14px;
    color: white;
    font-family: inherit;
    font-size: 12pt;
}
#playArea #moneyArea {
    float: right;
    position: relative;
    padding: 10px;
    border: 2px black solid;
    width: 200px;
    margin: 5px;
    font-size: 14pt;
}
#playArea #moneyArea #money {
}
.clear {
    clear: both;
}

JavaScript

Array.prototype.randomize = function () {
    //fisher yates from http://codereview.stackexchange.com/a/12200/3163
    var i = this.length;
    if (i === 0) return false;
    while (--i) {
        var j = Math.floor(Math.random() * (i + 1));
        var tempi = this[i];
        var tempj = this[j];
        this[i] = tempj;
        this[j] = tempi;
    }
};

Array.prototype.toObject = function () {
    var o = {};
    for (var i = 0; i < this.length; i++) {
        o[this[i]] = '';
    }
    return o;
};

function bindEvent(el, eventName, eventHandler) {
    if (el.addEventListener) {
        el.addEventListener(eventName, eventHandler, false);
    } else if (el.attachEvent) {
        el.attachEvent('on' + eventName, eventHandler);
    }
}

var Wheel = (function () {
    var wheel = document.getElementById('wheel'),
        wheelValues = [5000, 600, 500, 300, 500, 800, 550, 400, 300, 900, 500, 300, 900, 0, 600, 400, 300, -2, 800, 350, 450, 700, 300, 600],
        spinTimeout = false,
        spinModifier = function () {
            return Math.random() * 10 + 20;
        },
        modifier = spinModifier(),
        slowdownSpeed = 0.5,
        prefix = (function () {
            if (document.body.style.MozTransform !== undefined) {
                return "MozTransform";
            } else if (document.body.style.WebkitTransform !== undefined) {
                return "WebkitTransform";
            } else if (document.body.style.OTransform !== undefined) {
                return "OTransform";
            } else {
                return "";
            }
        }()),
        degreeToRadian = function (deg) {
            return deg / (Math.PI * 180);
        };

    function Wheel() {}

    Wheel.prototype.rotate = function (degrees) {
        var val = "rotate(-" + degrees + "deg)";
        if (wheel.style[prefix] !== undefined) wheel.style[prefix] = val;
        var rad = degreeToRadian(degrees % 360),
            filter =...