fire

tree/spring_river.css

@@ -124,7 +124,7 @@ div#player_img {
     top: 40%;
     left: 100%;
     position:absolute ;
-    z-index: 3;
+    z-index: 2;
     }
 
 .army {
@@ -140,7 +140,7 @@ div#player_img {
     top:50%;
     left: 80%;
     position: absolute;
-    z-index:0;
+    z-index:2;
 }
 #fighter2 {
     top:5%;
@@ -152,147 +152,127 @@ div#player_img {
     top:20%;
     left: 30%;
     position: absolute;
-    z-index:0;
+    z-index:2;
 }
 #fighter4 {
     top:100%;
     left: 45%;
     position: absolute;
-    z-index:0;
+    z-index:5;
 }
 #fighter5 {
     top:40%;
     left: 50%;
     position: absolute;
-    z-index:0;
+    z-index:2;
 }
 #fighter6 {
     top:70%;
     left: 65%;
     position: absolute;
-    z-index:0;
+    z-index:3;
 }
 #fighter7 {
-    top:58%;
-    left: 40%;
+    top:68%;
+    left: 44%;
     position: absolute;
-    z-index:0;
+    z-index:3;
 }
 #fighter8 {
     top:50%;
     left: 5%;
     position: absolute;
-    z-index:0;
+    z-index:3;
 }
 #fighter9 {
     top:50%;
     left: 5%;
     position: absolute;
-    z-index:0;
+    z-index:3;
 }
 
-/*images*/ 
-
-
-#tree1 {
-    top:6%;
-    left: 17%;
+.children1 {
+    top:5%;
+    right: 8%;
     position: absolute;
-    z-index:0;
-
 }
-#tree2 {
+
+.children2 {
     top:40%;
-    left: 14%;
+    right: 2%;
     position: absolute;
-    z-index:2;
 }
-#tree3 {
-    bottom:45%;
-    left: 30%;
+
+.decoration {
+    top:35%;
+    right: 13.5%;
     position: absolute;
-    z-index:2;
 }
 
-#tree4{
-    bottom: 20%;
-    left: 70%;
+.figure1{ 
+    top:15%;
+    right: 13%;
     position: absolute;
-    z-index:4;
 }
-#tree5{
-    top: 10%;
-    right: 4%;
+.figure2{ 
+    top:40%;
+    right: 8%;
     position: absolute;
-    z-index:1;
 }
-#tree6{
-    top: 10%;
-    left: 40%;
+.figure3{ 
+    top:50%;
+    right: 15%;
     position: absolute;
-    z-index:1;
 }
-
-#flower1 {
-    bottom:68%;
-    left: 5%;
+.figure4{ 
+    top:30%;
+    right: 3%;
     position: absolute;
-    z-index:0;
 }
 
-#flower2{
-    bottom: 28%;
-    left: 1.5%;
-    position: absolute;
-    z-index:17;
-}
 
-#flower3{
-    bottom: 50%;
-    left: 13%;
+
+
+/*images*/ 
+
+
+.tree1 {
+    top:6%;
+    left: 17%;
     position: absolute;
-    z-index:2;
+    z-index:1;
+
 }
-#flower4{
-    bottom: 35%;
-    left: 22%;
+.tree2 {
+    top:40%;
+    left: 14%;
     position: absolute;
-    z-index:2;
+    z-index:4;
 }
-#flower5{
-    bottom: 65%;
-    left: 17%;
+.tree3 {
+    bottom:38%;
+    left: 30%;
     position: absolute;
-    z-index:0;
+    z-index:4;
 }
 
-#flower6{
-    bottom: 65%;
-    left: 80%;
+.tree4{
+    bottom: 20%;
+    left: 60%;
     position: absolute;
-    z-index:2;
+    z-index:6;
 }
-
-#flower7{
-    bottom: 50%;
-    left: 55%;
+.tree5{
+    top: 10%;
+    right: 4%;
     position: absolute;
-    z-index:0;
+    z-index:1;
 }
-
-#flower8{
-    bottom: 30%;
-    left: 97%;
+.tree6{
+    top: 10%;
+    left: 40%;
     position: absolute;
     z-index:1;
- }
-
-#flower9{
-    top: 23%;
-    left: 32%;
-    position: absolute;
-    cursor: pointer;
-    z-index:0;
 }
 
 

tree/spring_river.html

@@ -23,25 +23,69 @@
       <img  id="fighter5" src="imgs/spring_river/fighter5.gif" height="120px">
       <img  id="fighter6" src="imgs/spring_river/fighter6.gif" height="160px">
       <img  id="fighter7" src="imgs/spring_river/fighter7.gif" height="120px"> 
-      <img  id="fighter8" src="imgs/spring_river/fighter8.gif" height="120px">
+      <img  id="fighter8" src="imgs/spring_river/fighter8.gif" height="150px">
   </div>
 
 <div id="ground"> 
+<div class="tree1">
+    <img  id="tree1" src="imgs/spring_river/tree.gif" height="160px">
+    <img  id="tree_flipped1" src="imgs/spring_river/tree_rotate.gif" height="160px"style="display: none;"> 
+</div>
+<div class="tree2">
+    <img  id="tree2" src="imgs/spring_river/tree.gif" height="160px">
+    <img  id="tree_flipped2" src="imgs/spring_river/tree_rotate.gif" height="160px"style="display: none;"> 
+  </div>  
+<div class="tree3">
+    <img  id="tree3" src="imgs/spring_river/tree.gif" height="160px">
+    <img  id="tree_flipped3" src="imgs/spring_river/tree_rotate.gif" height="160px"style="display: none;"> 
+  </div>
+<div class="tree4">
+    <img  id="tree4" src="imgs/spring_river/tree.gif" height="160px">
+    <img  id="tree_flipped4" src="imgs/spring_river/tree_rotate.gif" height="160px"style="display: none;"> 
+  </div>
+<div class="tree5">
+    <img  id="tree5" src="imgs/spring_river/tree.gif" height="160px">
+  </div>
+<div class="tree6">
+    <img  id="tree6" src="imgs/spring_river/tree.gif" height="160px">
+    <img  id="tree_flipped6" src="imgs/spring_river/tree_rotate.gif" height="160px"style="display: none;"> 
+  </div>
 
-    <img  id="tree1" src="imgs/spring_river/tree4.gif" height="160px">
-    <img  id="tree2" src="imgs/spring_river/tree4.gif" height="160px">
-    <img  id="tree3" src="imgs/spring_river/tree4.gif" height="160px">
-    <img  id="tree4" src="imgs/spring_river/tree4.gif" height="160px">
-    <img  id="tree5" src="imgs/spring_river/tree4.gif" height="160px">
-    <img  id="tree6" src="imgs/spring_river/tree4.gif" height="160px">
+<div class="children1">
+  <img  id="cage1" class="bad" src="imgs/spring_river/children_cage_fire_1.gif" height="240px">
+  <img  id="free1" class="good"src="imgs/spring_river/children_free_1.gif" height="240px" style="display: none;">
+</div>
+<div class="children2">
+  <img  id="cage2" class="bad" src="imgs/spring_river/children_cage_fire_2.gif" height="300px">
+  <img  id="free2" class="good" src="imgs/spring_river/children_free_2.gif" height="300px" style="display: none;">
+</div>
 
+<div class="figure1">
+  <img  id="satan1" class="bad"  src="imgs/spring_river/satan1.gif" height="150px">
+  <img  id="teacher1" class="good" src="imgs/spring_river/teacher1.gif" height="130px" style="display: none;">
+</div>
+<div class="figure2">
+  <img  id="satan2" class="bad"  src="imgs/spring_river/satan2.gif" height="140px">
+  <img  id="teacher2" class="good" src="imgs/spring_river/teacher2.gif" height="130px" style="display: none;">
+</div>
+<div class="figure3">
+  <img  id="satan3" class="bad"  src="imgs/spring_river/satan3.gif" height="150px">
+  <img  id="teacher3" class="good" src="imgs/spring_river/teacher3.gif" height="130px" style="display: none;">
+</div>
+<div class="figure4">
+  <img  id="satan4" class="bad" src="imgs/spring_river/satan4.gif" height="150px">
+  <img  id="teacher4" class="good" src="imgs/spring_river/teacher4.gif" height="130px" style="display: none;">
+</div>
+<div class="decoration"> 
+<img  id="decoration_bad" class="bad"  src="imgs/spring_river/decoration.gif" height="110px">
+<img  id="decoration_good" class="good"  src="imgs/spring_river/decoration_good.gif" height="150px" style="display: none;">
 </div>
 
 <div class="text_container invert" > 
 
   <div class="message1">
     You and your army arrived at the Spring River Natural Park.<br>
-  <span class="instructions"><span class="instructions_arrow">→</span> Move with the right arrow to find the children!</span>
+  <span class="instructions"><span class="instructions_arrow">→</span> Move around with your army to find the children!</span>
     </div>
     <div class="message2" style="display: none;">
     </div>
@@ -69,8 +113,8 @@
 
 //adjust camera scroll
 var $div = $('.army');
-    var screenLeftMin = 100;
-    var screenLeftMax = 780;
+    var screenLeftMin = 50;
+    var screenLeftMax = 400;
       
   function adjustScroll() {
       var playerLeft = parseInt($div.css("left"));
@@ -101,17 +145,34 @@ $(document).keydown(function(e) {
       var left_val_only = parseInt(left_val_px); 
       var left_Percentage = (left_val_only/parent_width) * 100; 
       console.log ("left %", left_Percentage);
-/*
-      if (top_Percentage > 65) {
-        $div.css ("zIndex", 5)
+
+      if (left_Percentage >= 9) {
+        $("#tree1,#tree2").hide();
+        $("#tree_flipped1, #tree_flipped2").show();
       }
-      if (top_Percentage < 55 && top_Percentage > 39) {
-        $div.css ("zIndex", 4)
+
+      if (left_Percentage >= 22) {
+        $("#tree3").hide();
+        $("#tree_flipped3").show();
+      }
+
+      if (left_Percentage >= 33) {
+        $("#tree6").hide();
+        $("#tree_flipped6").show();
       }
-      if (top_Percentage < 39) {
-        $div.css ("zIndex", 1)
+      if (left_Percentage >= 54) {
+        $("#tree4").hide();
+        $("#tree_flipped4").show();
+      }
+
+      /*
+      if (left_Percentage < 55 && top_Percentage > 39) {
+
       }
-      */
+      if (left_Percentage < 39) {
+
+      }*/
+
 
      switch (e.which) {
         case 37:
@@ -129,11 +190,15 @@ $(document).keydown(function(e) {
             if (offset.left < 80) {
                 offset.left = 80;
             }
-            if (offset.left >  $("#ground").width()  - 250) {
-                offset.left = $("#ground").width() - 250;
-                
+            if (offset.left >  $("#ground").width()  - 1350) {
+                offset.left = $("#ground").width() - 1350;
+                $(document).scrollLeft(4000);
+
+                /* maybe here add message end*/
             }
 
+
+
             $div.css("left", offset.left);
             $div.css("top", offset.top);
             e.preventDefault();