HTML5 SIMON

by rlemon [email protected] http://github.com/rlemon/

by manoj

HTML

<div class="container">
    <h1>SIMON</h1>
    <div class="simon">
        <div class="pad red" ></div>
        <div class="pad green" ></div>
        <div class="pad yellow" ></div>
        <div class="pad blue" ></div>
        <div class="display" id="display"></div>
    </div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Press+Start+2P|Righteous);
body {
 font-family: 'Righteous', cursive;
 padding: 0;
 margin: 0;
 background-color: #666;
}
.container {
    width: 400px;
    margin: 0 auto;
}
.container h1 {
    text-align: center;
    font-size: 78px;
    padding: .2em 0 0 0;
    margin: 0;
}
.pad.red {
    left:15px;
    top:15px;
    background:rgb(255,0,0);
    border-radius:320px 20px 20px;
}
.pad.green {
    right:15px;
    top:15px;
    background:rgb(0,255,0);
    border-radius:20px 320px 20px 20px;
}
.pad.yellow {
    bottom:15px;
    right:15px;
    background:rgb(255,255,0);
    border-radius:20px 20px 320px 20px;
}
.pad.blue {
    bottom:15px;
    left:15px;
    background:rgb(0,0,255);
    border-radius:20px 20px 20px 320px;
}
.simon {
    position:relative;
    border-radius:50%;
    width:400px;
    height:400px;
    background:#000;
    margin:20px;
    background:rgb(0,0,0);
    background:-moz-linear-gradient(45deg,rgba(0,0,0,1) 0%,rgba(28,36,45,1) 100%);
    background:-webkit-gradient(linear,left bottom,right top,color-stop(0%,rgba(0,0,0,1)),color-stop(100%,rgba(28,36,45,1)));
    background:-webkit-linear-gradient(45deg,rgba(0,0,0,1) 0%,rgba(28,36,45,1) 100%);
    background:-o-linear-gradient(45deg,rgba(0,0,0,1) 0%,rgba(28,36,45,1) 100%);
    background:-ms-linear-gradient(45deg,rgba(0,0,0,1) 0%,rgba(28,36,45,1) 100%);
    background:linear-gradient(45deg,rgba(0,0,0,1) 0%,rgba(28,36,45,1) 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000',endColorstr='#1c242d',GradientType=1 );
}
.simon::before {
    content:' ';
    left:50%;
    top:50%;
    border-radius:85px;
    position:absolute;
    display:block;
    width:170px;
    height:170px;
    background:#000;
    z-index:99;
    margin: -85px;
}
.simon .display {
    font-family: 'Press Start 2P', cursive;
    font-size: 17px;
    line-height: 160%;
    position:absolute;
    cursor: pointer;
    display:block;
   ...

JavaScript

//game
(function() {

    var pads = document.getElementsByClassName('pad'),
        display = document.getElementById('display'),
        pattern = [],
        hold = [],
        level, speed;

    function playerMouseDown(e) {
        this.className += ' active';
    }

    function playerMouseUp(e) {
        simonMouseUp.apply(this);
        playerClick.apply(this);
    }

    function simonMouseUp() {
        this.className = this.className.replace(/ active/, '');
    }

    function playerHoverOver(e) {
        this.className += ' hover';
    }

    function playerHoverOut(e) {
        this.className = this.className.replace(/ hover/, '');
    }

    function playerClick() {
        if (pads[hold.shift()] != this) {
            gameOver();
            return;
        }
        playerSays();
    }

    function clearContents(element) {
        while (element.hasChildNodes()) {
            element.removeChild(element.lastChild);
        }
    }

    function updateDisplay(text) {
        clearContents(display);
        display.appendChild(document.createTextNode(text));
    }
    /* solution: 
    just add a active class to every pad and tie the hover event and active event to that?
    do css events work well on mobile?
    then when not ready you can just remove that class from each element and presto!
    */
    function registerHandlers() {
        Array.prototype.forEach.call(pads, function(pad) {
            pad.style.cursor = 'pointer';
            pad.addEventListener('mouseover', playerHoverOver, false);
            pad.addEventListener('touchenter', playerHoverOver, false);
            pad.addEventListener('mouseout', playerHoverOut, false);
            pad.addEventListener('touchleave', playerHoverOut, false);
            pad.addEventListener('mousedown', playerMouseDown);
            pad.addEventListener('mouseup', playerMouseUp);
            pad.addEventListener('touchstart', playerMouseDown);
            pad.addEventListener('touchend',...