Javascript Touchstart? Zombie Game

Question

I am making a zombie game. You can view it at www.designedbychristian.com/u-vs-them

I had clickable div which worked. But when testing on my iphone5s and Ps vita the clickable divs lagged.

I decided to use raw javascript and avoid importing jquery mobile.

I wrote this into my code

    <script>
        localStorage.setItem('facing', 'right')



        function touchEvents() {

            document.getElementById('shoot').addEventListener("toustart", shoot, false);
            document.getElementById('left').addEventListener("touchstart", left, false);
            document.getElementById('right').addEventListener("touchstart", right, false);
            function shoot(e) {
                e.preventDefault()
                $('#player').append('<div id="bullet" class="bullet">');
                if (localStorage.getItem('facing') == "right") {
                    $('.bullet').animate({ "left": "1500px" }, 700, "linear", function () {
                        $(this).remove();
                    });
                } else if ((localStorage.getItem('facing') == "left")) {
                    $('.bullet').animate({ "right": "1500px" }, 700, "linear", function () {
                        $(this).remove();
                    });
                };
            };
            function left() {
                var p = $("#player");
                var poff = p.offset();
                var pleft = poff.left;
                if (pleft > 103) {
                    var element = document.getElementById("player");
                    element.style.left = parseInt(element.style.left) - 5 + 'px';
                    var bg = document.getElementById("bg");
                    bg.style.left = parseInt(bg.style.left) + 5 + 'px';
                    localStorage.setItem("facing", "left")
                } else { return false }
            }

            //right function

            function right() {

                var p = $("#player");
                var poff = p.offset();
                var pleft = poff.left;
                if (pleft < 962) {
                    var element = document.getElementById("player");
                    element.style.left = parseInt(element.style.left) + 5 + 'px';
                    var bg = document.getElementById("bg");
                    var zombz = document.getElementById("zombie");
                    bg.style.left = parseInt(bg.style.left) - 5 + 'px';
                    localStorage.setItem("facing", "right")
                } else { return false }

            }
        };
        window.onload = touchEvents;
        </script>

Now this works on my windows 8 touchscreen laptop with chrome using my touch screen not my mouse. (have not tested in ie or ff)

It does not work on anything else with a touch screen(iphone,ipad, ps vita). I do not know why. I have been trying to find out all day

You can look at my game further with the url above. If viewing on an iphone you must save it to your homescreen and change orientation to landscape

Answer 1

$('#player')

is a jQuery shortcut for

document.getElementById("player");

I would check whether you're getting the correct element.