JSFiddle - React, Tailwind, and code Playground

by Alex Bergin

JavaScript

var keyControler = {
    init: function(){
        this.bind();
    },
    
    bind: function(){
        window.addEventListener( "keydown" , keyControler.register );
    },
    
    register: function( event ){
        if ( event.keyCode == 88 ){
            keyControler.active = "x";
        }
        
        if ( event.keyCode == 89 ){
            keyControler.active = "y";
        }
        
        if ( event.keyCode == 90 ){
            keyControler.active = "z";
        }
        
        if ( event.keyCode == 38 ){
            if ( keyControler.active != undefined ){
                keyControler.perform[keyControler.active].up();
            }
        }
        
        if ( event.keyCode == 40 ){
            if ( keyControler.active != undefined ){
                keyControler.perform[keyControler.active].down();
            }
        }
    },
    
    active: undefined,
    
    perform: {
        x: {
            up: function(){
                console.log("pressing up for x")
            },
            
            down: function(){
                console.log("pressing down for x")
            }
        },
        
        y: {
            up: function(){
                console.log("pressing up for y")
            },
            
            down: function(){
                console.log("pressing down for y")
            }
        },
        
        z: {
            up: function(){
                console.log("pressing up for z")
            },
            
            down: function(){
                console.log("pressing down for z")
            }
        }
    }
}

keyControler.init();