Math.Random - Javascript

Question

I've this code:

            var num = 550;
            $(document).keydown(function (event) {
                switch (event.keyCode) {
                    // Left Arrow                
                    case 37: num = num-- - 15;
                        document.getElementById('player').style.margin = '550px ' + num + 'px 0px ';
                        break;
                    // Right Arrow                
                    case 39: num = 15 + num++;
                        document.getElementById('player').style.margin = '550px ' + num + 'px 0px ';
                        break;
                }
            });
            var nump = 0;
            var touch = false;
            var flagtouch;
            $(document).ready(function () {
                flagtouch = setInterval(function () {
                    movePoint(nump);

                }, 10);
            });
            function movePoint() {
                document.getElementById('point').style.margin = nump + 'px 615px 0px';
                touch = chekTouch($('#point'), $('#player'))   // check whether the divs touches and return true if touched
                if (touch) {
                    $('.point').ready(function () {
                        var docWidth = $(document).width();
                        var $div = $('.point');
                        var divWidth = $div.width();
                        var widthMax = docWidth - divWidth;
                        $div.css({
                            marginLeft: Math.floor(Math.random() * widthMax),
                            marginTop: 150,
                        });
                    });
                }
                else {
                    nump++;
                }
            }

            function chekTouch($div1, $div2) {
                var x1 = $div1.offset().left;
                var y1 = $div1.offset().top;
                var h1 = $div1.outerHeight();
                var w1 = $div1.outerWidth();
                var b1 = y1 + h1;
                var r1 = x1 + w1;
                var x2 = $div2.offset().left;
                var y2 = $div2.offset().top;
                var h2 = $div2.outerHeight();
                var w2 = $div2.outerWidth();
                var b2 = y2 + h2;
                var r2 = x2 + w2;

                if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
                return true;
            }

Now, I got this touch function, when div point touches div player he excute marginLeft in random way and marginTop to 0px.

So its working but only 1 issue, the random isn't stop working, he keep move when the div has physicall contact each other.

My question is how can I make the random margin work only when he touch the div?

Thanks!

At least for me your code is much too large to work it through. Isolate the real problem and just post the relevant parts of your code. This increases the chances, that anybody here will help you. — Sirko
– Sirko, Commented Jun 18, 2013 at 9:28
From a quick look: remove the $('.point').ready(function () { part in movePoint() --> just execute the code immediately. — marsze
– marsze, Commented Jun 18, 2013 at 9:28

CME64 · Accepted Answer · 2013-06-18 09:36:54Z

2

// - it is because you are using setInterval which plays forever every 10ms

Edit:

Sorry I misunderstood what you meant,

after it touches you should clear the interval like this :

clearInterval(flagtouch);

then the loop will stop

DEMO

edited Jun 18, 2013 at 9:36

answered Jun 18, 2013 at 9:31

CME64

1,67213 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

copypaste Over a year ago

Then what should i use, got any solution for me? EDIT: You should try the code, he working fine.. I think you wrong..

copypaste Over a year ago

But you still didn't gave me a solution, what should i use?

CME64 Over a year ago

Sorry, now I think I did :)

copypaste Over a year ago

Can you perhaps help me moving it down? should i add return true?

CME64 Over a year ago

here you go jsbin.com/araten/1/edit but I think you could implement this game in a better way using position absolute ..

|

marsze · Accepted Answer · 2013-06-18 09:37:40Z

1

In movePoint(), after you set the randomly set the margin when touch was true, you still set the margin with document.getElementById('point').style.margin = nump + 'px 615px 0px'; at every interval, but don't increase nump, so touch will always be true after that.

answered Jun 18, 2013 at 9:37

marsze

17.5k6 gold badges59 silver badges67 bronze badges

Collectives™ on Stack Overflow

Math.Random - Javascript

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related