Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <meta charset="utf-8" />
        <title>Game</title>
        <style>
            body{
                position: absolute;
                background: green;
            }
            .point{
                position: absolute;
                width: 15px;
                height: 15px;
                background: red;
                border-radius: 10px;
                margin: 0px 400px 0;
            }
            .player{
                position: absolute;
                text-align: center;
                width: 200px;
                height: 20px;
                background: #0005ff;
                margin: 550px 550px 0px;
            }
        </style>
        <script>
            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;
                        var rand = Math.floor(Math.random() * widthMax);
                        $div.css({
                            marginLeft: rand,
                            marginTop: 150,
                        });
                      clearInterval(flagtouch);
                    });
                }
                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;
            }
        </script>
    </head>
    <body>
        <div class="point" id="point"></div>
        <div class="player" id="player">Score: <div id="score"></div></div>
    </body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
CME64pro
0viewers