Question

我正在使用HTML5和jQuery创建一个迷你游戏而没有画布（！），并且在开发弹跳部分时（当圆圈与舞台限制碰撞时），我发现了一个错误：

当圆圈与底部或右侧限制发生碰撞并且您一直按下向下/向右箭头键时，圆圈会继续以舞台限制弹跳，但是当您使用相反的舞台限制（顶部和左侧）执行相同的操作时，圆圈反弹一两次，然后停止（我想得到第二反应，当它反弹然后停止）。 我还发现这个bug只发生在Safari中。有人可以帮我解决吗？

JSFiddle

Demo on site

<!DOCTYPE html>
<html>

<head>
    <title>VelJS 3 Pre-Alpha</title>

    <!-- This app was coded by Tiago Marinho -->
    <!-- Special thanks to Drizr, from the interwebs -->
    <!-- Do not leech it! -->

    <link rel="shortcut icon" href="http://i.imgur.com/Jja8mvg.png">
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
    var yvel = 0, xvel = 0;
    var up = false, // W or arrow up
            left = false, // A or arrow left
            right = false, // D or arrow right
            down = false; // S or arrow down

            // Keydown:
            document.addEventListener("keydown", function (evt) {
                if (evt.keyCode == 87 || evt.keyCode == 38) { // up
                    up = true;
                }
                if (evt.keyCode == 65 || evt.keyCode == 37) { // left
                    left = true;
                }
                if (evt.keyCode == 68 || evt.keyCode == 39) { // right
                    right = true;
                }
                if (evt.keyCode == 83 || evt.keyCode == 40) { // down
                    down = true;
                }
                if (evt.keyCode == 8 || evt.keyCode == 80) { // del/p
                }
            });
            // Keyup:
            document.addEventListener("keyup", function (evt) {
                if (evt.keyCode == 87 || evt.keyCode == 38) { // up
                    up = false;
                }
                if (evt.keyCode == 65 || evt.keyCode == 37) { // left
                    left = false;
                }
                if (evt.keyCode == 68 || evt.keyCode == 39) { // right
                    right = false;
                }
                if (evt.keyCode == 83 || evt.keyCode == 40) { // down
                    down = false;
                }
            });

            function y(obj){
                return $(obj).offset().top;
            }
            function x(obj){
                return $(obj).offset().left;
            }

            setInterval(function(){

                // Keydown/keyup handler:
                if (up == true) {
                    yvel -= 2;
                } else {
                    if (yvel < 0) {
                        yvel++;
                    }
                }
                if (left == true) {
                    xvel -= 2;
                } else {
                    if (xvel < 0) {
                        xvel++;
                    }
                }
                if (right == true) {
                    xvel += 2;
                } else {
                    if (xvel > 0) {
                        xvel--;
                    }
                }
                if (down == true) {
                    yvel += 2;
                } else {
                    if (yvel > 0) {
                        yvel--;
                    }
                }

                var nextposx = $("circle").offset().left+xvel/16;
                var nextposy = $("circle").offset().top+yvel/16;

                if(nextposy < 0 || nextposy+20 > window.innerHeight){
                    yvel = Math.round(yvel*-0.5);
                }
                if(nextposx < 0 || nextposx+20 > window.innerWidth){
                    console.log(xvel);
                    xvel = Math.round(xvel*-0.5);
                    console.log(xvel);
                }
                $("circle").css({
                    top:$("circle").offset().top+yvel/16,
                    left:$("circle").offset().left+xvel/16
                });
            },8);
    </script>
    <style>
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'> * {
            margin: 0;
        }
        html,
        body {
            -webkit-text-smoothing: antialiased;
            height:100%;
            overflow:hidden;
            color: #fff;
            background-color: #181818;
        }
        circle{
            position:absolute;

            top:0;
            left:0;

            width:20px;
            height:20px;

            border-radius:10px;
            background:#fff;
        }
        </style>
</head>

<body>
    <circle></circle>
</body>

</html>

我没有使用画布，因为我已经尝试使用EaselJS创建这个迷你游戏，但我发现很多问题，并且在我的情况下没有理由使用它，因为这个游戏没有任何图像（然后不需要硬件加速。）

Answer 1

此答案是之前非工作答案的完整更新。答案的完整代码可以在底部找到。

我必须检查所有浏览器以查看问题：

- 所有Chrome都运行良好，所以我没有任何改变。

- 在Safari上，球在底部和右侧弹跳。我发现这个问题是由一个浮点而不是整数的位置引起的，所以我只需要绕位移。

$("circle").css({
top:Math.round($("circle").offset().top+yvel/16),
left:Math.round($("circle").offset().left+xvel/16)
});

我的第一个答案是通过欺骗行为来解决问题，这次答案就是解决问题。这种改进不应该影响Chrome（但我现在无法测试）。

- 在Firefox上，球在页面底部停止。我只需更改身体碰撞的比较器，并为其添加margin 0px。在旧版本的Firefox中，当你向上按UP时，球在上升之前有点下降，我这个错误归因于xvel--，xvel++，yvel--和{{1比yvel++，xvel+=2，xvel-=2和yvel+=2更快，所以我将它们替换为yvel-=2两次，++xvel两次，两次--xvel和两次++yvel应该更快（再次我现在无法测试它，所以我希望这是有效的）。这些改进不应影响Chrome和Safari。

然后我优化您的代码以提高效率。

您的HTML没有变化。

你的css现在是：

--yvel

您的JavaScript现在是：

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'> * {
            margin: 0;
        }

        html, body {
            -webkit-text-smoothing: antialiased;
        height:100%;
        overflow:hidden;
            color: #fff;
            background-color: #181818;
            margin: 0px;
        }

    circle {
        position:absolute;  
        top:0;
        left:0;
        width:20px;
        height:20px;
        border-radius:10px;
        background:#fff;
    }

你有一个结果为here的JSFiddle。

剩下的唯一错误是在Firefox中，圆圈在右边超过几个像素，但它非常小。

对不起，如果我的英语不好，我希望你能得到我写的所有内容。我觉得我的工作已经完成...... 玩得开心= D。

圆形弹跳bug

1 个答案: