Skip to content

Commit

Permalink
Added main screen
Browse files Browse the repository at this point in the history
  • Loading branch information
Rescor committed May 3, 2022
1 parent 28834f6 commit 0b8e0f0
Show file tree
Hide file tree
Showing 9 changed files with 208 additions and 52 deletions.
Binary file added assets/bg_fox.jpg
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 assets/bg_texture.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed assets/boss.jpg
Binary file not shown.
Binary file added assets/favicon.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes.
47 changes: 47 additions & 0 deletions game.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>~Ahri</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="game.css">
</head>
<body>
<div id="gameField">
<div id="statusbar">
<div class="hpElement">
<span>Health: </span>
<span id="hp"></span>
</div>

<div class="scoreElement">
<span>Score: </span>
<span id="score"></span>
</div>

<div class="highscore">
<span>Highscore: </span>
<span id="highscore"></span>
</div>
</div>
<div id="tank">
<div id="weapon"></div>
</div>
<div id="enemy"></div>

</div>
<div id="gameOver">
GAME OVER<br><br>
<div class="scoreElement">
<span>Your score: </span>
<span class="scoreCounter"></span>
</div>
<button onclick="window.location.reload();">Start again</button>
</div>
<script src="game.js"></script>
</body>
</html>
51 changes: 18 additions & 33 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,44 +4,29 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>~Ahri</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="assets/favicon.jpg" type="image/x-icon">
<title>RAW</title>
<link rel="stylesheet" href="start.css">
</head>
<body>
<div id="gameField">
<div id="statusbar">
<div class="hpElement">
<span>Health: </span>
<span id="hp"></span>
</div>
<div class="scoreElement">
<span>Score: </span>
<span id="score"></span>
</div>
<div id="startScreen">
<div id="logo">
<pre>
__________ _____ __ __
\______ \ / _ \/ \ / \
| _/ / /_\ \ \/\/ /
| | \/ | \ /
|____|_ /\____|__ /\__/\ /
\/ \/ \/

</pre>

<div class="highscore">
<span>Highscore: </span>
<span id="highscore"></span>
</div>
</div>
<div id="tank">
<div id="weapon"></div>
</div>
<div id="enemy"></div>

</div>
<div id="gameOver">
GAME OVER<br><br>
<div class="scoreElement">
<span>Your score: </span>
<span class="scoreCounter"></span>
<div id="startScreen_menu">
<a href="game.html">Новая игра</a>
<a href="" class="disabled">Бесконечный режим</a>
<a href="" class="disabled">Благодарности</a>
</div>
<button onclick="window.location.reload();">Start again</button>
</div>
<script src="game.js"></script>
</body>
</html>
143 changes: 143 additions & 0 deletions start.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,143 @@
* {
font-family: 'Roboto', sans-serif;
font-size: 30px;
margin: 0px;
}
body {
background-blend-mode: multiply;
/* background:url("assets/main_bg2.jpg") top repeat fixed rgba(3, 2, 2, 0.651); */
background:url("assets/bg_fox.jpg") top repeat fixed rgba(238, 95, 0, 0.719);

background-position-y: 85%;
background-size:cover;
overflow: hidden;
}


/* ======== START SCREEN ======== */

#logo pre {
color: rgb(255, 38, 0);
font-family: monospace;
margin-top: 50px;
margin-bottom: -30px;
transition: all 500ms ease;
}

#logo:hover {
color: rgb(247, 119, 0);
text-shadow: 0px 0px 25px rgb(245, 57, 0);
transition: all 200ms ease;
cursor:default;
}
#startScreen {
display: flex;
align-items: center;
flex-direction: column;
height: 100vh;
}

#startScreen_menu a {
color: rgb(223, 101, 1);
background-color: rgba(46, 46, 46, 0.404);
border: 2px solid rgba(255, 107, 39, 0.575);
padding: 25px 35px;
margin: 25px;
text-decoration: none;
display: block;
border-radius: 5px;
text-align: center;
transition: all 175ms ease;
}
#startScreen_menu .disabled {
color: gray;
text-decoration:line-through;
border: 2px solid gray;
}

#startScreen_menu a:hover {
background-color: rgba(49, 49, 49, 0.651);
color: rgb(247, 119, 0);
text-shadow: 0px 0px 1px rgb(197, 62, 0);
box-shadow: 0px 0px 10px rgb(255, 102, 0);
transition: all 175ms ease;
}




/* ======== GAME FIELD ======== */

#statusbar {
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
flex: auto;
width: 100%;
background-color: gray;
color: rgb(139, 236, 60);
}


.hpElement, .scoreElement, .highscore {
padding: 5px 10px;
}

#tank {
position: absolute;
/* background-color: rgb(255, 0, 0); */
background: url('assets/player.png');
background-size: cover;
width: 80px;
height: 50px;
top: 400px;
left: 100px;
}

/* #weapon {
background-color: blue;
position: absolute;
width: 40px;
height: 8px;
left: 50px;
top: 21px;
} */

.bullet {
width: 20px;
height: 6px;
background-color: rgb(255, 136, 0);
position: absolute;
}

.lightShip {
width: 66px;
height: 45px;
background: url('assets/enemy_01.png');
background-size: cover;
position: absolute;
}

.boss {
position: absolute;
height: 300px;
}
.boss img {
max-height:100%;
width: 500px;
}

.explosion {
width: 40px;
height: 40px;
background-image: url("assets/explosion.gif");
background-size: 100%;
position: absolute;
}

#gameOver {
color: red;
display: none;
flex-direction: column;
align-items: center;
}
19 changes: 0 additions & 19 deletions start.html

This file was deleted.

0 comments on commit 0b8e0f0

Please sign in to comment.