zzz

tree/park_N.html

@@ -35,6 +35,7 @@
       <img  id="sport2" src="imgs/park/fitness2.gif" height="70px">
       <img  id="newspaper_seller" src="imgs/park/newspaper_seller.gif" height="120px">
       <img  id="woman" src="imgs/park/woman.gif" height="140px">
+      <img  id="flower9" src="imgs/park/flower1.1.gif" height="30px"> 
       <img  id="dog" src="imgs/park/dog1.gif" height="90px">
       <img  id="ned" src="imgs/park/ned2.gif" height="120px">
       <img  id="grass2" src="imgs/park/grass1.gif" height="90px">
@@ -67,6 +68,7 @@
    
    // player moves 
 
+//adjust camera scroll
    var $div = $('#player_img');
     var screenLeftMin = 200;
     var screenLeftMax = 870;
@@ -89,10 +91,36 @@
   }    
 
   
+
+
+
+
+      
+//move the character 
+
 $(document).keydown(function(e) {
      var offset = $div.position();
     console.log("offset:", offset);   
 
+      // change z-index 
+      var parent_height = $("#ground").height(); 
+      var top_val_px   = $div.css('top');
+      var top_val_only = parseInt(top_val_px); 
+      var top_Percentage = (top_val_only/parent_height) * 100; 
+      console.log ("top %", top_Percentage);
+
+      if (top_Percentage > 65) {
+        $div.css ("zIndex", 5)
+      }
+      if (top_Percentage < 55 && top_Percentage > 39) {
+        $div.css ("zIndex", 4)
+      }
+      if (top_Percentage < 39) {
+        $div.css ("zIndex", 1)
+      }
+
+
+    
      switch (e.which) {
         case 37:
             offset.left -= 20;
@@ -111,7 +139,7 @@ $(document).keydown(function(e) {
              console.log("down");
               break;
        } 
-        //check the offset 
+          //check the offset and prevent the character to exceed the screen dimension 
             if (offset.left < 80) {
                 offset.left = 80;
             }
@@ -135,6 +163,19 @@ $(document).keydown(function(e) {
             
   })
       
+    /* manipulate the z-index of the character 
+
+      var offset_percent = offset 
+
+    if (offset */
+
+
+
+
+
+
+
+
 
 // saves game step in the local storage 
   window.onload = function() {

tree/park_walk.css

@@ -52,7 +52,7 @@
         bottom: 20%;
         left: 12%;
         position:absolute ;
-        z-index: 20;
+        z-index: 3;
         }
 
 
@@ -120,25 +120,27 @@ span.button_text{
     bottom: 32%;
     left: 6%;
     position: absolute;
-    z-index:18;
+    z-index:2;
 }
 
 #tree1 {
     top:8%;
     left: 10%;
     position: absolute;
+    z-index:0;
 
 }
 #tree2 {
     bottom:40%;
     left: 2.5%;
     position: absolute;
-    z-index:16;
+    z-index:2;
 }
 #tree3 {
     bottom:45%;
     left: 18%;
     position: absolute;
+    z-index:2;
 
 }
 
@@ -146,6 +148,7 @@ span.button_text{
     bottom:68%;
     left: 5%;
     position: absolute;
+    z-index:0;
 }
 
 #flower2{
@@ -159,78 +162,89 @@ span.button_text{
     bottom: 50%;
     left: 13%;
     position: absolute;
-    z-index:17;
+    z-index:2;
 }
 #flower4{
     bottom: 35%;
     left: 22%;
     position: absolute;
-    z-index:17;
+    z-index:2;
 }
 #flower5{
     bottom: 65%;
     left: 17%;
     position: absolute;
-    z-index:17;
+    z-index:0;
 }
 
 #grass1{
-    bottom: 30%;
+    bottom: 15%;
     left: 40%;
     position: absolute;
-    z-index:17;
+    z-index:4;
 }
 
 #grass2{
-    bottom: 25%;
+    bottom: 15%;
     left: 82%;
     position: absolute;
-    z-index:17;
+    z-index:4;
 }
 
 #statue{
-    bottom: 70%;
+    top: 5%;
     left: 60%;
     position: absolute;
-    z-index:17;
+    z-index:0;
 }
 
 #tree4{
-    bottom: 25%;
+    bottom: 20%;
     left: 70%;
     position: absolute;
+    z-index:4;
 }
 
 #flower6{
     bottom: 65%;
     left: 80%;
     position: absolute;
+    z-index:2;
 }
 
 #flower7{
     bottom: 50%;
     left: 55%;
     position: absolute;
+    z-index:2;
 }
 
 #flower8{
     bottom: 30%;
     left: 97%;
     position: absolute;
+    z-index:1;
  }
 
 #dog{
-    bottom: 26%;
+    bottom: 21%;
     left: 38%;
     position: absolute;
-    z-index:17;
+    z-index:4;
 }
 
 #tree5{
     top: 10%;
     right: 4%;
     position: absolute;
-    z-index:10;
+    z-index:1;
+}
+#flower9{
+    top: 23%;
+    left: 32%;
+    position: absolute;
+    cursor: pointer;
+    z-index:0;
 }
 
 
@@ -241,18 +255,21 @@ span.button_text{
         left: 30%;
         position: absolute;
         cursor: pointer;
+        z-index:0;
     }
     #newspaper_seller{
         bottom: 55%;
         left: 47%;
         position: absolute;
         cursor: pointer;
+        z-index:0;
     }
     #sport1{
-        bottom: 30%;
+        bottom: 20%;
         left: 66%;
         position: absolute;
         cursor: pointer;
+        z-index:5;
    
     }
     #sport2{
@@ -260,6 +277,7 @@ span.button_text{
         left: 63%;
         position: absolute;
         cursor: pointer;
+        z-index:0;
     }
 
     #ned {
@@ -267,6 +285,7 @@ span.button_text{
         right: 8%;
         position: absolute;
         cursor: pointer;
+        z-index:2;
     }
 
     .woman_bubble {
@@ -359,7 +378,7 @@ span.button_text{
     }
  
         .fit2_bubble {
-            bottom:44%;
+            bottom:30%;
             left: 65%;
             position: absolute;
             background: #ffffff;
@@ -401,7 +420,7 @@ span.button_text{
             display: block;
         }
         .fit1_bubble {
-            bottom:78%;
+            bottom:75%;
             left: 65%;
             position: absolute;
             background: #ffffff;