All geek questions in one place

Circle Bounce Error

I am creating a mini-game using HTML5 and jQuery without a canvas (!) And, developing part of the failures (when the circle collides with the scene limit), I found an error:

When the circle collides with the lower or right limit, and you continue to press the down / right arrow key, the circle continues to jump with the scene limit, but when you do the same with the opposite ends of the scene (top and left), the circle bounces once or twice and then stops (I want to get a second reaction when it bounces and then stops). I also found that this error only occurs in Safari. Can someone help me solve it?

Jsfiddle

Demo on the 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>

canvas, - EaselJS, , , ( ).

+4
1

. .

, , :

- Chrome , .

- Safari . , , ​​ float, , .

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

, . Chrome ( ).

- Firefox . margin of 0px. Firefox, UP, , , - xvel--, xvel++, yvel-- yvel++, , xvel+=2, xvel-=2, yvel+=2 yvel-=2, ++xvel, --xvel, ++yvel --yvel, ( " t , , ). Chrome Safari.

, .

HTML .

css:

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

JavaScript :

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) {
                    --yvel;
                    --yvel;
                } else if (yvel < 0) {
                        yvel++;
                }
                if (left) {
                    --xvel;
                    --xvel;
                } else if (xvel < 0) {
                        xvel++;
                }
                if (right) {
                    ++xvel;
                    ++xvel;
                } else if (xvel > 0) {
                        xvel--;
                }
                if (down) {
                    ++yvel;
                    ++yvel;
                } else if (yvel > 0) {
                    yvel--;
                }

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

                if(nextposy < 0 || nextposy+20 > $('body').height()){
                    yvel = Math.round(yvel*-0.5);
                }
                if(nextposx < 0 || nextposx+20 > $('body').width()){
                    xvel = Math.round(xvel*-0.5);
                }
                $('circle').css({
                    top:Math.round($('circle').offset().top+yvel/16),
                    left:Math.round($('circle').offset().left+xvel/16)
                });
            },8);

JSFiddle .

, , Firefox , .

, , , , . , ... = D.

+3

Source: https://habr.com/ru/post/1530865/

More articles:


All Articles