Skip to content

Commit

Permalink
Full Version
Browse files Browse the repository at this point in the history
  • Loading branch information
@PhilipBuresh
PhilipBuresh committed Nov 27, 2024
1 parent 42e865a commit cf82337
Show file tree
Hide file tree
Showing 26 changed files with 519 additions and 266 deletions.
32 changes: 18 additions & 14 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="icon" type="image/x-icon" href="./res/img/icon.png">
Expand Down Expand Up @@ -87,7 +87,10 @@ <h1>
</div>
</span>
</div>
<div id="credits_list"></div>
<div id="credits_list">
<img id="red_cross_credits" src="./res/img/red_cross.png" draggable="false" alt="cross">
</div>

<img id="red_cross_achievements" src="./res/img/red_cross.png" draggable="false" alt="cross">
<div id="achievements_list">
<h2>Hall of Achievements</h2>
Expand Down Expand Up @@ -119,7 +122,7 @@ <h3 id="achievements_counter">0 / 30</h3>
</div>
<div id="achievement_in_list" style="background-image: url('./res/img/achievement_bronze.png');">
<img id="achievement_img_in_list" src="./res/achievements/ship.png" alt="Ship Achievement">
<p id="achievement_text_in_list">I knew that you would wreck the ship</p>
<p id="achievement_text_in_list">Why did I give you a rocket driver's license?</p>
<img id="correct_symbol_in_list" src="./res/img/correct_transparent.png" alt="Correct Symbol">
</div>
<div id="achievement_in_list" style="background-image: url('./res/img/achievement_bronze.png');">
Expand Down Expand Up @@ -361,13 +364,18 @@ <h3>PLAYER 2</h3>
</div>
</div>
<div id="game">
<div id="myHp">
<img id="heart1" src="./res/img/heart_rioter.png" alt="heart" draggable="false">
<img id="heart2" src="./res/img/heart_rioter.png" alt="heart" draggable="false">
<img id="heart3" src="./res/img/heart_rioter.png" alt="heart" draggable="false">
<div id="myStats">
<div id="myHp">
<img id="heart1" src="./res/img/heart_rioter.png" alt="heart" draggable="false">
<img id="heart2" src="./res/img/heart_rioter.png" alt="heart" draggable="false">
<img id="heart3" src="./res/img/heart_rioter.png" alt="heart" draggable="false">
</div>
<div id="deadImage">
<img id="deadImg" src="./res/img/dead_rioter.png" alt="dead" draggable="false">
<p id="deathCounterShow"></p>
</div>
</div>
<div id="hps">
<div id="name">BOSS</div>
<div id="hp_bar">
<div class="divider" id="divider1"></div>
<div class="divider" id="divider2"></div>
Expand All @@ -379,6 +387,7 @@ <h3>PLAYER 2</h3>
<div class="alien_divider" id="alien_divider3"></div>
<div id="hp"></div>
</div>
<div id="name">BOSS</div>
</div>
<div id="canvas_container">
<img id="rising" src="./res/gif/rising.gif" alt="rising">
Expand All @@ -390,14 +399,9 @@ <h2>CREDITS:</h2>
</div>
<canvas id="canvas" width="1024" height="576"></canvas>
<canvas id="canvas_darkness" width="1024" height="576"></canvas>
<canvas id="canvas_transition" width="1024" height="576"></canvas>
<p id="timer">Time: 0s</p>
<img id="black" src="./res/img/black.png" alt="black">
<video id="transition1">
<source src="./res/vid/transition1.webm" type="video/webm" draggable="false">
</video>
<video id="transition2">
<source src="./res/vid/transition2.webm" type="video/webm" draggable="false">
</video>
<div id="achievement">
<img id="achievement_img" src="#" alt="draezlyr">
<p id="achievement_text"></p>
Expand Down
129 changes: 93 additions & 36 deletions res/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,15 @@ body {
height: 100vh;
width: auto;
background-image: url("../img/wall_dark.png");
pointer-events: none;
padding-top: env(safe-area-inset-top);
}

html, body {
overflow: hidden; /* Zamezí scrollování */
margin: 0;
padding: 0;
height: 100%;
}
}


#background-video {
Expand Down Expand Up @@ -47,10 +47,16 @@ p{
display: none;
}
}

@media (max-width: 1919px) {
#clock {
display: none;
}
}
#container {
position: relative;
height: 100vh;
width: 100%;
height: 100dvh;
width: 100vw;
margin: 0;
padding: 0;
overflow: hidden;
Expand Down Expand Up @@ -85,6 +91,7 @@ p{
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin-top:5vh;
}
#running_rioter{
position: absolute;
Expand Down Expand Up @@ -132,16 +139,16 @@ p{
}
#recommend{
position: absolute;
bottom: -25px;
bottom: 0;
left: 0;
letter-spacing: 2px;
font-family: 'VT323', monospace;
color:white;
transition: 0.2s;
background-color: rgba(0, 0, 0, 0.8);
border-radius: 0 15px;
border-radius: 0 15px 0 0;
text-align: center;
padding: 5px;
padding: 0 20px;
}
#recommend:hover{
color:rgb(194, 194, 194)
Expand All @@ -154,21 +161,35 @@ p{
margin-top: -1em;
}
#credits_list{
z-index: 6;
background-color: rgb(15, 15, 15);
background-image: url("../img/wall_verydark.png");
margin-top:1em;
color:white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 90%;
height: 80%;
width: fit-content;
border:5px solid rgb(0, 0, 0);
border-radius: 10px;
font-family: 'VT323', monospace;
box-shadow: 1px -1px 40px 7px rgb(0, 0, 0);
overflow-y: auto;
display:none;
cursor: pointer;
}
#red_cross_credits{
color:white;
position: sticky;
top: 5%;
left: 93%;
transform: translate(-50%, -50%);
height: auto;
width: 2vw;
z-index: 4;
filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px -1px 0 black) drop-shadow(1px -1px 0 black) drop-shadow(-1px 1px 0 black);
cursor: pointer;
}
#credits_list::-webkit-scrollbar{
width: 8px;
Expand Down Expand Up @@ -466,14 +487,40 @@ p{
margin-top:-10px;
font-size: 20px;
}
#myStats{
position: absolute;
display: flex;
flex-direction: column;
margin-left:0.2em;
margin-right:0.2em;
}
#deathCounterShow{
color:white;
font-family: 'VT323', monospace;
font-size: 2.5vw;
margin:0;
margin-left:0.4vw;
}
#deadImage{
display: flex;
flex-direction: row;
justify-content: left;
align-items: center;
height: fit-content;
margin-top: 1vh;
margin-left: 1vh;
}
#deadImage img{
height: 6vh;
width: auto;
filter: drop-shadow(1px 1px 0 white) drop-shadow(-1px -1px 0 white) drop-shadow(1px -1px 0 white) drop-shadow(-1px 1px 0 white);
}
#myHp{
display: none;
position: absolute;
}
#myHp img{
margin-left:0.2em;
margin-right:0.2em;
width: 60px;
margin-right:5%;
}
#hp {
width: 100%;
Expand Down Expand Up @@ -525,24 +572,19 @@ p{
border-radius: 0 0 10px 10px;
width: 100%;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-family: 'VT323', monospace;
font-family: 'VT323', monospace;
letter-spacing: 3px;
font-size: 25px;
margin-top:-15px;
}
#hps {
display: none;
flex-direction: column;
width: 30%;
position: absolute;
top: 7%;
top: 4%;
left: 50%;
transform: translate(-50%, -50%);
height: 100px;
}
#right_buttons{
display: flex;
Expand Down Expand Up @@ -951,7 +993,7 @@ p{

#canvas_container {
width: 70%;
padding-bottom: 39.2%;
padding-bottom: 38.8%;
position: absolute;
top: 50%;
left: 50%;
Expand All @@ -972,14 +1014,23 @@ p{
background-color: black;
}
#canvas_darkness {
width: 100%;
width: 101%;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
#canvas_transition {
width: 100%;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 3;
}
#esc{
font-family: ' VT323', monospace;
width: 200px;
Expand Down Expand Up @@ -1320,16 +1371,6 @@ p{
opacity: 0;
pointer-events: none;
}
#transition1, #transition2 {
width: 300%;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
z-index: 6;
opacity: 0;
pointer-events: none;
}
#text{
width: 50vw;
top: 50%;
Expand All @@ -1349,15 +1390,17 @@ p{
display:none;
}
#buttons img{
max-width: 70px;
max-height: 70px;
max-width: 65px;
max-height: 65px;
z-index:-1;
pointer-events: none;
}
#button_enter{
display: none;
justify-content: center;
align-items: center;
width: 83px;
height: 83px;
width: 78.5px;
height: 78.5px;
margin-left:0.5em;
color:white;
font-size: 15px;
Expand Down Expand Up @@ -1396,6 +1439,7 @@ p{
background-color:rgba(0, 0, 0, 0.6);
margin-bottom: 10px;
border-radius: 1em;
filter: invert(0.15);
}

#button_right, #button_left {
Expand All @@ -1405,6 +1449,7 @@ p{
background-color:rgba(0, 0, 0, 0.6);
margin-left: 10px;
border-radius: 1em;
filter: invert(0.15);
}
#button_down img{
transform: rotate(180deg);
Expand Down Expand Up @@ -1437,6 +1482,9 @@ p{
#text{
width: 100vw;
}
#middleHatImg{
margin-bottom: 5vh;
}
}
@media (max-height: 650px) {
#canvas_container{
Expand Down Expand Up @@ -1472,6 +1520,15 @@ p{
#chooseDungeon img{
width: 10vw;
}
#middleHatImg{
margin-bottom: 5vh;
}
}
@media (max-height: 400px) {
#canvas_container{
width: 50%;
padding-bottom: 27%;
}
}
@media (max-height: 900px) {
#myHp img{
Expand Down
Binary file added res/img/dead_rioter.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added res/img/dead_ruby.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 2 additions & 3 deletions res/js/achievements.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,6 @@ const processNextAchievement = () => {
achievement_img.src = imgSrc;
achievement_text.innerHTML = text;
achievement.style.backgroundImage = `url(${backImgSrc})`;
console.log(backImgSrc)
showAchievement();
}
}
Expand Down Expand Up @@ -237,8 +236,8 @@ const achievementShip = () => {
if (!achievementShipCompleted && player1.flying) {
achievementShipCompleted = true;
localStorage.setItem('achievementShipCompleted', 'true');
queueAchievement("./res/achievements/ship.png", "I knew that you would wreck the ship", "./res/img/achievement_bronze.png");
achievementDoneInTheList("I knew that you would wreck the ship");
queueAchievement("./res/achievements/ship.png", "Why did I give you a rocket driver's license?", "./res/img/achievement_bronze.png");
achievementDoneInTheList("Why did I give you a rocket driver's license?");
}
}

Expand Down
Loading

0 comments on commit cf82337

Please sign in to comment.