Week 7 added the running ninja

Author: noelking

www/css/style.css

@@ -116,6 +116,12 @@ div.cylinder .bottom {
 	box-shadow: 0px 0px 10px rdba(0,0,0,0.75);
 }
 
+img#ninja {
+    width: 80px;
+    margin-top: -120px;
+    position: absolute;
+}
+
 
 
 

www/index.html

@@ -24,6 +24,7 @@
         </div>
 
         <div class="ground">
+            <img src="img/ninjas-green.png" id="ninja"></img>
         </div>
 
         <script type="text/javascript" src="js/jquery.js">

www/js/jumpy.js

@@ -1,9 +1,16 @@
 var cylinder;
 var screenHeight = screen.height;
 var jumpBy = 10;
+var ninja;
+var screenWidth = screen.width;
+var runBy = 10;
 
 function startGame() {
 	cylinder = 	$("#cylinder");
+    ninja = $("#ninja");
+    ninja.click(function() {
+        run();
+    });
 	jump(10);
 }
 
@@ -15,10 +22,27 @@ function jump() {
 
     if(bottomPosition >= screenHeight) {
         cylinder.css('top','0px');
+        setRandomLeft();
     } else {
         cylinder.css('top', newPosition+"px");
     }
     setTimeout(jump, 30);
 }
 
+function setRandomLeft() {
+    var leftPosition = Math.floor(Math.random() * 50) + 20;
+    cylinder.css('margin-left', leftPosition + "%");
+}
+
+function run() {
+    var ninjaDimension = ninja.offset();
+    var ninjaLeft = ninjaDimension.left;
+    var newLeftPosition = ninjaLeft+runBy;
+    console.log(newLeftPosition);
+    ninja.css('left', newLeftPosition+"px");
+    
+    run();
+
+}
+
 startGame();