GeekUp Ninja

by Greg Bowler

HTML

<p>Don't let the ninja kill you!
<p>Press space to jump

<h1 id="killMessage" class="msg">KILL MESSAGE</h1>
<h1 id="safeMessage" class="msg">SAFE MESSAGE</h1>
    
<div id="container">
    <img id="player" src="http://octodex.github.com/images/orderedlistocat.jpg">
    <img id="ninja" src="http://www.chinatownconnection.com/images/ninja.gif">
</div>

CSS

#container {
    position: relative;
    width: 100%;
    height: 480px;
    overflow: hidden;
}

#player {
    position: absolute;
    width: 200px;
    bottom: 0;
    right: 320px;
    z-index: -10; 
    -webkit-transition: bottom 0.2s ease-in-out;
}
#player.jump {
    bottom: 320px;
}

#ninja {
    position: absolute;
    bottom: 0;
    right: -220px;
    -webkit-transition: right 0.8s ease-in-out;
}
#ninja.active {
    right: 320px;
}

#killMessage {
    position: absolute;
    width: 100%;
    text-align: center;
    background: red;
    color: white;
    font-size: 32px;
    display: none;
    z-index: 10;
}

#safeMessage {
    position: absolute;
    width: 100%;
    text-align: center;
    background: green;
    color: white;
    font-size: 32px;
    display: none;
}

.show {
    display: block !important;
}

JavaScript

(function() {
    var player = document.getElementById("player"),
        ninja = document.getElementById("ninja"),
        killMessage = document.getElementById("killMessage"),
        safeMessage = document.getElementById("safeMessage"),
        jumping;
    
    var enemy = {
        "failphrase": "YOU DIE SOON!!!!1",
        "killphrase": "I KILL YOU _ TIMES!!!!!!!!!!1111111",
        "kills": 0
    };
    
    var keydown = function(e) {
        if(e.keyCode !== 32 || jumping) {
            return;
        }
        player.classList.add("jump");
        jumping = true;
        setTimeout(function() { player.classList.remove("jump");}, 500);
        setTimeout(function() { jumping = false; }, 1000);
    };
    
    var kill = function() {
        ninja.classList.add("active");
        setTimeout(checkKill, 800);
        // Start first kill timer, between 5 and 20 seconds.
        setTimeout(kill, 5000 + Math.floor(Math.random()*15000));
    };
    
    var checkKill = function() {
        ninja.classList.remove("active");
        if(player.classList.contains("jump")) {
            safeMessage.innerText = enemy.failphrase;
            safeMessage.classList.add("show");
            console.log("JUMP");
        }
        else {
            enemy.kills ++;
            killMessage.innerText = enemy.killphrase.replace(/_/, enemy.kills);
            killMessage.classList.add("show");
            console.log(killMessage);
            console.log("KILL");
        }
        
        setTimeout(function() { 
            var msgList = document.querySelectorAll(".msg"),
                msgLen = msgList.length,
                i;
            for(i = 0; i < msgLen; i++) {
                msgList[i].classList.remove("show");
            }
        }, 2000);
    };
    // Attach key listener for space button.
    window.addEventListener("keydown", keydown);
    // Start first kill timer, between 5 and 20 seconds.
    setTimeout(kill, 5000 + Math.floor(Math.random()*15000));
}());