Week8 -SIT120

<html>

        <head>
            <script type="text/javascript" src="jquery-2.1.3.min.js"></script>
            <script type="text/javascript" src="introtoapps.min.js"></script>

            <script type="text/javascript">

                /*
                  When webpage/webapp is loaded create a frog,
                  Let him bounce to the right
                  Add a tap handler to the entire window
                */
                $(document).ready(function() {
                  for (var i = 1; i <= 3; i++) {
                    var x = i * 75;
                    $("body").append("<div class='frog' style='top: " + x + "px'></div>");
                  }

                  for (var i = 1; i <= 3; i++) {
                    var x = i * 75;
                    $("body").append("<div class='frog2' style='top: " + x + "px'></div>");
                  }


                  var myScore;
                  var duckNumber = 1;

                  $(".frog").moveTo(180);
                  $(".frog").speed(0.1);
                  $(".frog").autoBounceOff(true);
                  $(".frog").onCollision(function(otherObject) {
                    if (otherObject.hasClass("duck")) {
                      this.remove();
                      otherObject.remove();
                    }

                  // Creates a tap handler for the entire window, to create a new duck and fire him up on the screen
                  $("body").onTap(function(event) {
                    //Coordinates for the event, Y and X axis where it was clicked/tapped.
                    console.log(event.clientX);


                    //Creates: <div id ='duck1' class='duck'></div>
                    $("body").append("<div id ='duck" + duckNumber + "' class='duck'></div>");
                    $("#duck" + duckNumber).moveTo(0);
                    $("#duck" + duckNumber).speed(0.9);
                    $("#duck" + duckNumber).css("bottom","0px");
                    $("#duck" + duckNumber).css("left", event.clientX + "px");


                    duckNumber++;
                  })


                });


            </script>
            <style type="text/css">
              body {
                background-color: white;
              }

              .frog {
                background-image: url('images/frog.png');
                background-size: 50px 50px;
                width: 50px;
                height: 50px;
                position: absolute;
                top: 100px;
                left: 100px;
                z-index: 10;
              }

              #leftwall {
                position: absolute;
                z-index: 10;
                width: 10px;
                background-color: black;
                height: 100vh;
                top: 0px;
                left: 0px;
              }
              #rightwall {
                position: absolute;
                z-index: 10;
                width: 10px;
                background-color: black;
                height: 100vh;
                top: 0px;
                right: 0px;
              }
              .duck {
                background-image: url(images/duck.png);
                background-size: 25px 50px;
                width: 25px;
                height: 50px;
                position: absolute;
                z-index: 10;
              }


            </style>
          </head>
          <body>


            <div id='leftwall'></div>
            <div id='rightwall'></div>


          </body>


</html>