Javascript Touchstart?僵尸游戏

时间:2014-05-04 21:10:52

标签: javascript html iphone touch

我正在做一个僵尸游戏。您可以在www.designedbychristian.com/u-vs-them

上查看

我有可点击的div工作。但是当我在iphone5s和Ps vita上进行测试时,可点击的divs落后了。

我决定使用原始javascript并避免导入jquery mobile。

我把它写进了我的代码

    <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>

现在这适用于我的Windows 8触摸屏笔记本电脑,使用我的触摸屏而不是我的鼠标。 (尚未在ie或ff中测试)

它不适用于任何其他触摸屏(iphone,ipad,ps vita)。 我不知道为什么。我一直试图找出一整天

您可以使用上面的网址进一步查看我的游戏。如果在iPhone上观看,您必须将其保存到主屏幕并将方向更改为横向

1 个答案:

答案 0 :(得分:0)

$('#player')

的jQuery快捷方式
document.getElementById("player");

我会检查你是否得到了正确的元素。