Mobile Success

I got my buttons working on select mobile devices. I tested it on iOS on Safari and Chrome and on Android on the default browser and Chrome. The Android experience was slow, but my test was on an HP Touchpad running Cyanogenmod so I assume it is the hardware/software combination that caused it to be slow since it ran perfectly on my iPhone 5. Since I have all the basic mechanics done, I will be able to start on actual level design and eventually add in enemies.


Here is the basic code for anyone interested:

var j = document.getElementById('jump');

j.addEventListener('touchstart', function(event){ jump(event,true); }, false);
j.addEventListener('touchend', function(event){ jump(event,false); }, false);

function jump(e,bool) {
    if(e.target.localName != 'select'){
        e.preventDefault();
    }
    direction.up= bool;
}

I get the DOM element for the button and set a 'touchstart' and 'touchend' event that calls a function. This function overrides the default highlighting that mobile devices do while the person holds there finger over an element. I then set the direction.up variable to true or false depending on whether it was a start or end event. The player jumps constantly while direction.up is true. This does lead to a problem is a user does not make the touchend event occur, but I will worry about that later. And that is how a button can be done with touch :D