Wizard Game

by Jake Cattrall

HTML

<script src="https://rawgit.com/jQueryKeyframes/jQuery.Keyframes/master/jquery.keyframes.min.js"></script>
<script src="https://rawgit.com/jQueryKeyframes/Keyframes.Pathfinder/master/keyframes.pathfinder.js"></script>
<div class="ui">
    <div class="life pull-right">1000</div>
    <div class="dev"></div>
    <button id="back">Back</button><button id="forward">Forward</button>
</div>

<div class="wholeSides top"></div>
<div class="wholeSides left"></div>
<div class="wholeSides right"></div>
<div class="wholeSides bottom"></div>

SCSS

html, body{
    height: 100%;
    margin: 0;
    padding: 0;
}
.pull-right{
    float: right;
}
.ui{
    box-sizing: border-box;
    color: white;
    position: absolute;
    width: 100%;
    padding: 5px;
    z-index: 2;
}
.life{
    background-color: black;
}
.wholeSides{
    position: absolute;
    background: white;
    &.top, &.bottom{
        width: 100%;
    }
    &.left, &.right{
        height: 100%; 
    }
    &.top, &.left{
        top: 0;
        left: 0;
    }
    &.right{
        right: 0;
        top: 0;
    }
    &.bottom{
        left: 0;
        bottom: 0;
    }
}

CoffeeScript

audio = new Audio "http://darelfen.com/compilations/NRJ%20Winter%20Hits%202014/CD1/20140120090436-18.%20Martin%20Garrix%20&%20Jay%20Hardway%20-%20Wizard%20(Radio%20Edit).mp3"

currenttime = 0
testTime = (about) ->
    if currenttime > about and currenttime < about + 0.3
        return true
    else
       return false
    
reset = -> $(this).resetKeyframe()

$('#back').click -> audio.currentTime -= 10
$('#forward').click -> audio.currentTime += 10
$(audio).on 'timeupdate', ->
    if currenttime < 50
        if testTime 1
            $(document.body).playKeyframe 'backFade 3500 linear 0 1 normal forwards'
        else if testTime 22.5
            DomParty.perform 'wholeSidesTop'
        else if testTime 26.5
            DomParty.perform 'wholeSidesRight'
        else if testTime 30
            DomParty.perform 'wholeSidesBottom'
        else if testTime 33.8
            DomParty.perform 'wholeSidesLeft'
        else if testTime 37.6
            DomParty.perform 'wholeSidesLeft'
            DomParty.perform 'wholeSidesBottom'
        else if testTime 41.3
            DomParty.perform 'wholeSidesRight'
            DomParty.perform 'wholeSidesTop'
        else if testTime 45.3
            DomParty.perform 'wholeSidesRight'
            DomParty.perform 'wholeSidesBottom'
        else if testTime 49
            DomParty.perform 'wholeSidesLeft'
            DomParty.perform 'wholeSidesTop'
mousex = mousey = prevx = prevy = 0
life = 1000
isplaying = false
init = ->
    $(window).mousemove (e) ->
        mousex = e.clientX
        mousey = e.clientY
        if isplaying is false
            audio.play()
            $('body, div').resumeKeyframe()
            isplaying = true
        currenttime = audio.currentTime
        $('.dev').html currenttime
    $('.wholeSides').mousemove -> $('.life').html(life--)
    setInterval ->
        if prevx is mousex and prevy is mousey
             audio.pause()
             $('body, div').pauseKeyframe()
             isplaying = false
 ...