3D Library

by Tgwizman

HTML

<div id="top"></div>
<div id="bottom">
    <p>Controls:</p><br>
    <p>Up, Down, Left, Right:<br>States what button is pressed</p><br>
    <p>A:<br>Clears the top screen</p>
</div>

CSS

body {
    margin: 0px;
}

#top {
    width: 320px;
    height: 220px;
    overflow: hidden;
    background-color: #CCC;
}

#bottom {
    width: 320px;
    height: 212px;
    overflow: hidden;
    background-color: #999;
}

</style>
<meta name="viewport" content="width=320">
<style>

JavaScript

setInterval(function(){document.body.scrollLeft=40},1);
setInterval(function(){document.body.scrollTop=220},1);

$ = {
    add : function(element, parent, id, html) {
        var child = document.createElement(element);
        
        if (id) {child.setAttribute("id", id)};
        if (html) {child.innerHTML = html};
        
        document.querySelector(parent).appendChild(child);
    },
    del : function(parent, child) {
        parent = document.querySelector(parent);
        child = document.querySelector(child);
        parent.removeChild(child);
    },
    keys : {
        Up : false,
        Down : false,
        Left : false,
        Right : false,
        A : false,
    },
};

document.onkeydown = function(e) {
    if (window.event) {
        var keycode = window.event.keyCode;
    } else if (e) {
        var keycode = e.which;
    }
    switch(keycode) {
        case 38:
            $.keys.Up = true;
            break;
        case 40:
            $.keys.Down = true;
            break;
        case 37:
            $.keys.Left = true;
            break;
        case 39:
            $.keys.Right = true;
            break;
        case 13:
            document.querySelector('#top').innerHTML = "Cleared";
            break;
    }
    void(0);
    return false;
}

document.onkeyup = function(e) {
    if (window.event) {
        var keycode = window.event.keyCode;
    } else if (e) {
        var keycode = e.which;
    }
    switch(keycode) {
        case 38:
            $.keys.Up = false;
            break;
        case 40:
            $.keys.Down = false;
            break;
        case 37:
            $.keys.Left = false;
            break;
        case 39:
            $.keys.Right = false;
            break;
    }
    void(0);
    return false;
};

setInterval(function(){
    if ($.keys.Up) {$.add('p','#top','','Up key Pressed')}
    if ($.keys.Down) {$.add('p','#top','','Down key Pressed')}
    if ($.keys.Left) {$.add('p','#top','','Left key...