From f06f9718e7d6a153381074fd5c273e6a60b3525e Mon Sep 17 00:00:00 2001 From: *anna* Date: Thu, 27 May 2021 21:23:51 +0200 Subject: [PATCH] fight --- tree/park_N.html | 11 +-- tree/spring_river.css | 162 +++++++++++++++++++++++++++++++++++--- tree/spring_river.html | 125 +++++++++++++++++++++-------- tree/square_satanism.html | 2 +- 4 files changed, 250 insertions(+), 50 deletions(-) diff --git a/tree/park_N.html b/tree/park_N.html index 616cb99..eb6c3b0 100644 --- a/tree/park_N.html +++ b/tree/park_N.html @@ -46,8 +46,8 @@ - - + + @@ -91,12 +91,7 @@ } - - - - - - + //move the character $(document).keydown(function(e) { diff --git a/tree/spring_river.css b/tree/spring_river.css index 559d08d..2d27546 100644 --- a/tree/spring_river.css +++ b/tree/spring_river.css @@ -131,8 +131,8 @@ div#player_img { position: absolute; top:10%; left: 5%; - width: 450px; - height: 300px; + width: 350px; + height: 280px; } @@ -182,7 +182,7 @@ div#player_img { top:50%; left: 5%; position: absolute; - z-index:3; + z-index:2; } #fighter9 { top:50%; @@ -193,7 +193,7 @@ div#player_img { .children1 { top:5%; - right: 8%; + right: 6%; position: absolute; } @@ -201,36 +201,69 @@ div#player_img { top:40%; right: 2%; position: absolute; + z-index:3; } .decoration { top:35%; - right: 13.5%; + right: 10%; position: absolute; } .figure1{ - top:15%; - right: 13%; + bottom: 60%; + right: 5%; position: absolute; + z-index: 2; + cursor: pointer; } + .figure2{ top:40%; - right: 8%; + right: 6%; position: absolute; + cursor: pointer; } .figure3{ top:50%; - right: 15%; + right: 10%; position: absolute; + cursor: pointer; } .figure4{ top:30%; right: 3%; position: absolute; + cursor: pointer; +} + +.shooting_place1{ + top:60%; + right: 7%; + position: absolute; + z-index: 10; +} + +.shooting_place2{ + top:10%; + right: 2%; + position: absolute; + z-index: 10; } +.shooting_place3{ + top:15%; + right: 10%; + position: absolute; + z-index: 10; +} +#amanda{ + right: 11.5%; + top:33%; + position: absolute; + z-index: 10; +} /*images*/ @@ -275,6 +308,96 @@ div#player_img { z-index:1; } +/* amanda baloons*/ + +.bubble1 { + right: 8.5%; + top:12%; + position: absolute; + background: #ffffff; + color: #000000; + font-family: sinistre; + font-size: 16px; + line-height: 17px; + text-align: center; + width: 140px; + height: 57px; + border-radius: 10px; + padding: 18px; + border: #000000 solid 1px; + z-index: 50; +} +.bubble1:after { + content: ''; + position: absolute; + display: block; + width: 0; + z-index: 1; + border-style: solid; + border-width: 20px 20px 0 0; + border-color: #ffffff transparent transparent transparent; + bottom: -20px; + left: 32%; + margin-left: -10px; +} +.bubble1:before { + content: ''; + position: absolute; + width: 0; + z-index: 0; + border-style: solid; + border-width: 21px 21px 0 0; + border-color: #000000 transparent transparent transparent; + bottom: -22px; + left: 32%; + margin-left: -11px; + display: block; +} + +.bubble2 { + right: 13%; + top:10%; + position: absolute; + background: #ffffff; + color: #000000; + font-family: sinistre; + font-size: 16px; + line-height: 17px; + text-align: center; + width: 188px; + height: 57px; + border-radius: 10px; + padding: 18px; + border: #000000 solid 1px; + z-index: 50; +} +.bubble2:after { + content: ''; + position: absolute; + display: block; + width: 0; + z-index: 1; + border-style: solid; + border-width: 0 20px 20px 0; + border-color: transparent #ffffff transparent transparent; + bottom: -20px; + left: 81%; + margin-left: -10px; +} +.bubble2:before { + content: ''; + position: absolute; + width: 0; + z-index: 0; + border-style: solid; + border-width: 0 21px 21px 0; + border-color: transparent #000000 transparent transparent; + bottom: -22px; + left: 81%; + margin-left: -10px; + display: block; +} + @@ -298,4 +421,23 @@ div#player_img { /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: black; - } \ No newline at end of file + } + + .scrollbar { + overflow-x: hidden; + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: -100px !important; + + } + + .scrollbar::-webkit-scrollbar { + display: none; + + } + + .scroll-pane{ + width: 100%; + height: 200px; + overflow: auto; + +} diff --git a/tree/spring_river.html b/tree/spring_river.html index 0d110d5..fe37238 100644 --- a/tree/spring_river.html +++ b/tree/spring_river.html @@ -4,15 +4,15 @@ spring river - + - + -
+
-
+
@@ -26,7 +26,7 @@
-
+
@@ -52,44 +52,59 @@
- +
- +
- +
- - + +
- +
- +
- - + +
-
+ + + + + + + + + +
You and your army arrived at the Spring River Natural Park.
→ Move around with your army to find the children!
+
@@ -100,7 +115,8 @@ // saves game step in the local storage window.onload = function() { window.localStorage.setItem("spring_river","opened"); - console.log ("spring river:",localStorage.spring_river); + console.log ("spring river:",localStorage.spring_river); + $('.scroll-pane').jScrollPane(); } //get player avatar from local storage @@ -110,6 +126,9 @@ var player_img = document.querySelector("#player_img"); player_img.appendChild(img); + //get player name from local storage + document.querySelector('#player_name').innerHTML = localStorage.playerName; + //adjust camera scroll var $div = $('.army'); @@ -165,15 +184,6 @@ $(document).keydown(function(e) { $("#tree_flipped4").show(); } - /* - if (left_Percentage < 55 && top_Percentage > 39) { - - } - if (left_Percentage < 39) { - - }*/ - - switch (e.which) { case 37: offset.left -= 20; @@ -190,15 +200,13 @@ $(document).keydown(function(e) { if (offset.left < 80) { offset.left = 80; } - if (offset.left > $("#ground").width() - 1350) { - offset.left = $("#ground").width() - 1350; + if (offset.left > $("#ground").width() - 1090) { + offset.left = $("#ground").width() - 1090; $(document).scrollLeft(4000); - - /* maybe here add message end*/ + $(".message1").hide(); + $(".message2").show(); } - - $div.css("left", offset.left); $div.css("top", offset.top); e.preventDefault(); @@ -206,6 +214,61 @@ $(document).keydown(function(e) { }) + var shooting_counter = 0; + + $("#figure1").click(function () { + shooting_counter ++; + console.log(shooting_counter); + $(".shooting_place1").show(); + reach_counter() + }); + + $(".figure2").click(function () { + shooting_counter ++; + console.log(shooting_counter); + $(".shooting_place2").show(); + reach_counter() + }); + + $(".figure3").click(function () { + shooting_counter ++; + console.log(shooting_counter); + $(".shooting_place3").show(); + reach_counter() + }); + + $(".figure4").click(function () { + shooting_counter ++; + console.log(shooting_counter); + $(".shooting_place1").show(); + reach_counter() + }); + + function reach_counter() { + if ( shooting_counter == 3 ) { + $("#amanda").show(); + $(".message2").hide(); + $(".message3").show(); + setTimeout( function () { + $(".bubble1").show(); + setTimeout( function () { + $(".bubble2").show(); + $(".bad").hide(); + $(".good").show(); + $(".stop_invert").removeClass("invert"); + setTimeout( function () { + $(".message3").hide(); + $(".message4").show(); + }, 2000); + }, 3000); + }, 2000); + }; + + + } + + + diff --git a/tree/square_satanism.html b/tree/square_satanism.html index 78ff4fe..2bb79c9 100644 --- a/tree/square_satanism.html +++ b/tree/square_satanism.html @@ -80,7 +80,7 @@ → Click on the villagers to share with them your findings!