- 
+ 
- -
+
- -
Use the left and right arrow to control the car!
+ +THIS IS VERA!
+
+ AND SHE IS UKRAINIAN WHICH IS SUPPORT UKRAINE!
+
LET'S HELP HER TO MAKE IT
++ Use the left and right arrow to control the gamer and space for + shooting! +
Stats
-Score: 0
-Lives: 3
+Orks: 0
+Drones: 0
+Chances: 3
Stats
-
- 
+
- + +
+
+
+
diff --git a/js/game.js b/js/game.js
index af4789c..c14f85a 100644
--- a/js/game.js
+++ b/js/game.js
@@ -1,3 +1,113 @@
class Game {
- // code to be added
-}
\ No newline at end of file
+ constructor() {
+ this.startScreen = document.querySelector("#game-intro");
+ this.gameScreen = document.querySelector("#game-screen");
+ this.endScreen = document.querySelector("#game-end");
+ this.gameContainer = document.querySelector("#game-container");
+ this.orksElement = document.getElementById("orks");
+ this.chancesElement = document.getElementById("chances");
+ this.dronesElement = document.getElementById("drones");
+ this.orksElementEnd = document.getElementById("orks/end");
+ this.dronesElementEnd = document.getElementById("drones/end");
+ this.player = new Player(350, 520, 90, 100, "images/Gamer.png");
+ this.height = 600;
+ this.width = 800;
+ this.obstacles = [new Obstacle("images/ork.PNG", "ork")];
+ this.projectiles = [];
+ this.orks = 0;
+ this.drones = 0;
+ this.chances = 3;
+ this.gameIsOver = false;
+ this.gameIntervalId = null;
+ this.gameLoopFrequency = 1000 / 60;
+ this.counter = 0;
+ this.verka = new Audio("sounds/verka.mp3");
+ this.verka.volume = 0.1;
+ }
+ start() {
+ this.verka.play();
+ this.gameScreen.style.height = `${this.height}px`;
+ this.gameScreen.style.width = `${this.width}px`;
+ this.startScreen.style.display = "none";
+ this.gameScreen.style.display = "block";
+
+ this.gameIntervalId = setInterval(() => {
+ this.gameLoop();
+ }, this.gameLoopFrequency);
+ }
+ gameLoop() {
+ this.update();
+ if (this.gameIsOver === true) {
+ clearInterval(this.gameIntervalId);
+ console.log("you loos");
+ }
+ }
+ update() {
+ this.counter++;
+ this.player.move();
+
+ for (let i = 0; i < this.projectiles.length; i++) {
+ const currentProjectile = this.projectiles[i];
+ currentProjectile.move();
+ for (let j = 0; j < this.obstacles.length; j++) {
+ const currentObstacleInProjectileLoop = this.obstacles[j];
+ const didCollideWithProjectile = currentProjectile.didCollide(
+ currentObstacleInProjectileLoop
+ );
+ if (didCollideWithProjectile) {
+ currentProjectile.element.remove();
+ currentObstacleInProjectileLoop.element.remove();
+ this.projectiles.splice(i, 1);
+ this.obstacles.splice(j, 1);
+ }
+ }
+ }
+ for (let i = 0; i < this.obstacles.length; i++) {
+ const currentObstacle = this.obstacles[i];
+ currentObstacle.move();
+
+ const didCollide = this.player.didCollide(currentObstacle);
+ console.log("did it collide", currentObstacle);
+ if (didCollide && currentObstacle.type === "ork") {
+ this.obstacles.splice(i, 1);
+ currentObstacle.element.remove();
+ this.chances--;
+ this.chancesElement.innerText = this.chances;
+ }
+ if (didCollide && currentObstacle.type === "Dron") {
+ this.obstacles.splice(i, 1);
+ currentObstacle.element.remove();
+ this.drones++;
+ this.dronesElement.innerText = this.drones;
+ }
+ if (currentObstacle.top > this.height + 100) {
+ this.orks++;
+ this.obstacles.splice(i, 1);
+ this.orksElement.innerText = this.orks;
+ currentObstacle.element.remove();
+ i--;
+ }
+ }
+ //gameIsOver
+ if (this.chances === 0) {
+ console.log("you loos");
+ this.gameIsOver = true;
+ this.player.element.remove();
+ this.verka.pause();
+ this.obstacles.forEach((oneObstacle) => {
+ oneObstacle.element.remove();
+ });
+ this.gameScreen.style.display = "none";
+ this.gameContainer.style.display = "none";
+ this.endScreen.style.display = "block";
+ this.orksElementEnd.innerText = this.orks;
+ this.dronesElementEnd.innerText = this.drones;
+ }
+ if (this.counter % 180 === 0) {
+ this.obstacles.push(new Obstacle("images/ork.PNG", "ork"));
+ }
+ if (this.counter % 250 === 0) {
+ this.obstacles.push(new Obstacle("images/Dron.PNG", "Dron"));
+ }
+ }
+}
diff --git a/js/obstacle.js b/js/obstacle.js
new file mode 100644
index 0000000..a3e356a
--- /dev/null
+++ b/js/obstacle.js
@@ -0,0 +1,28 @@
+class Obstacle {
+ constructor(img, type) {
+ this.gameScreen = document.querySelector("#game-screen");
+ this.positionsX = [120, 550];
+ this.randomIndex = Math.floor(Math.random() * this.positionsX.length);
+ this.left = this.positionsX[this.randomIndex];
+ this.top = -20;
+ this.width = 70;
+ this.height = 70;
+ this.type = type;
+ this.element = document.createElement("img");
+ this.element.style.position = "absolute";
+ this.element.src = img;
+ this.element.style.height = `${this.height}px`;
+ this.element.style.width = `${this.width}px`;
+ this.element.style.top = `${this.top}px`;
+ this.element.style.left = `${this.left}px`;
+ this.gameScreen.appendChild(this.element);
+ }
+ move() {
+ this.top += 3;
+ this.updatePosition();
+ }
+ updatePosition() {
+ this.element.style.top = `${this.top}px`;
+ this.element.style.left = `${this.left}px`;
+ }
+}
diff --git a/js/player.js b/js/player.js
new file mode 100644
index 0000000..344d9f5
--- /dev/null
+++ b/js/player.js
@@ -0,0 +1,48 @@
+class Player {
+ constructor(left, top, width, height, playerImage) {
+ this.gameScreen = document.querySelector("#game-screen");
+ this.left = left;
+ this.top = top;
+ this.width = width;
+ this.height = height;
+ this.directionX = 0;
+ this.directionY = 0;
+ this.element = document.createElement("img");
+ this.element.style.position = "absolute";
+ this.element.src = playerImage;
+ this.element.style.height = `${height}px`;
+ this.element.style.width = `${width}px`;
+ this.element.style.top = `${top}px`;
+ this.element.style.left = `${left}px`;
+ this.gameScreen.appendChild(this.element);
+ }
+ move() {
+ if (this.left > 20 && this.left + this.width < 800) {
+ this.left += this.directionX;
+ }
+ if (this.top > 10 && this.top + this.height < 640) {
+ this.top += this.directionY;
+ }
+ this.top += this.directionY;
+ this.updatePosition();
+ }
+ updatePosition() {
+ this.element.style.top = `${this.top}px`;
+ this.element.style.left = `${this.left}px`;
+ }
+ didCollide(obstacle) {
+ const playerRect = this.element.getBoundingClientRect();
+ const obstacleRect = obstacle.element.getBoundingClientRect();
+
+ if (
+ playerRect.left < obstacleRect.right &&
+ playerRect.right > obstacleRect.left &&
+ playerRect.top < obstacleRect.bottom &&
+ playerRect.bottom > obstacleRect.top
+ ) {
+ return true;
+ } else {
+ return false;
+ }
+ }
+}
diff --git a/js/projectile.js b/js/projectile.js
new file mode 100644
index 0000000..f8f19e7
--- /dev/null
+++ b/js/projectile.js
@@ -0,0 +1,40 @@
+class Projectile {
+ constructor(left, top) {
+ this.gameScreen = document.querySelector("#game-screen");
+ this.left = left;
+ this.top = top;
+ this.width = 20;
+ this.height = 30;
+ this.element = document.createElement("img");
+ this.element.style.position = "absolute";
+ this.element.src = "images/pirozhok.PNG";
+ this.element.style.height = `${this.height}px`;
+ this.element.style.width = `${this.width}px`;
+ this.element.style.top = `${this.top}px`;
+ this.element.style.left = `${this.left}px`;
+ this.gameScreen.appendChild(this.element);
+ }
+ move() {
+ this.top -= 3;
+ this.updatePosition();
+ }
+ updatePosition() {
+ this.element.style.top = `${this.top}px`;
+ this.element.style.left = `${this.left}px`;
+ }
+ didCollide(obstacle) {
+ const projectileRect = this.element.getBoundingClientRect();
+ const obstacleRect = obstacle.element.getBoundingClientRect();
+
+ if (
+ projectileRect.left < obstacleRect.right &&
+ projectileRect.right > obstacleRect.left &&
+ projectileRect.top < obstacleRect.bottom &&
+ projectileRect.bottom > obstacleRect.top
+ ) {
+ return true;
+ } else {
+ return false;
+ }
+ }
+}
diff --git a/js/script.js b/js/script.js
index 95e544f..f284cc6 100644
--- a/js/script.js
+++ b/js/script.js
@@ -1,12 +1,39 @@
window.onload = function () {
const startButton = document.getElementById("start-button");
const restartButton = document.getElementById("restart-button");
-
+ let ourGame;
startButton.addEventListener("click", function () {
startGame();
});
-
+ restartButton.addEventListener("click", () => {
+ window.location.reload();
+ });
+ document.addEventListener("keydown", (event) => {
+ if (event.code === "ArrowRight") {
+ ourGame.player.directionX = 3;
+ }
+ if (event.code === "ArrowLeft") {
+ ourGame.player.directionX = -3;
+ }
+ if (event.code === "ArrowUp") {
+ ourGame.player.directionY = -3;
+ }
+ if (event.code === "ArrowDown") {
+ ourGame.player.directionY = 3;
+ }
+ if (event.code === "Space") {
+ ourGame.projectiles.push(
+ new Projectile(ourGame.player.left + 35, ourGame.player.top - 40)
+ );
+ }
+ });
+ document.addEventListener("keyup", () => {
+ ourGame.player.directionX = 0;
+ ourGame.player.directionY = 0;
+ });
function startGame() {
console.log("start game");
+ ourGame = new Game();
+ ourGame.start();
}
};
diff --git a/sounds/verka.mp3 b/sounds/verka.mp3
new file mode 100644
index 0000000..2fe820a
Binary files /dev/null and b/sounds/verka.mp3 differ
diff --git a/styles/style.css b/styles/style.css
index cf0cff3..9ae68ed 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -1,6 +1,8 @@
body {
padding: 0;
text-align: center;
+ margin: 0;
+ width: 100vw;
}
#game-intro {
@@ -20,9 +22,9 @@ body {
padding: 20px 0px;
overflow: hidden;
position: relative;
- background-image: url(../images/road.png);
+ background-image: url(../images/backstage.jpg);
background-size: cover;
- animation: slide 5s linear infinite;
+ animation: none;
}
@keyframes slide {
@@ -39,6 +41,62 @@ body {
#game-end {
display: none;
+ align-content: top;
+ position: relative;
+ background-image: url(../images/lastBackground.jpg);
+ background-size: cover;
+ margin: 0;
+
+ height: 800px;
+ background-position: center;
+ background-repeat: no-repeat;
+}
+#game-container {
+ display: flex;
+ width: 100vw;
+ padding: 10px 0px;
+ justify-content: center;
+ align-content: center;
+}
+h3,
+h4,
+h5,
+h6,
+p {
+ margin: 0;
+ font-family: "Verdana";
+ font-size: 18px;
+}
+h3 {
+ text-decoration: underline;
+ font-style: italic;
+ color: #990c0c;
+ letter-spacing: 1px;
+ font-family: "Londrina Sketch";
+ font-size: 26px;
+}
+h1 {
+ font-family: "Londrina Sketch";
+ font-size: 40px;
+ color: #e20c0cc0;
+}
+h5 {
+ text-decoration: underline;
+ font-style: italic;
+ color: #990c0c;
+ letter-spacing: 1px;
+ font-family: "Londrina Sketch";
+ font-size: 26px;
+}
+
+#game-end div {
+ margin-bottom: 29px;
+}
+
+.Winner-img {
+ width: 250px;
+ padding: 20px 0px;
+ margin-top: 0px;
}
.game-intro p {
@@ -46,7 +104,7 @@ body {
font-family: "Verdana";
}
-.logo-img {
+.Vera-img {
width: 350px;
}
@@ -56,11 +114,12 @@ body {
body button {
font-size: 30px;
- background-color: #870007;
- color: #fff;
+ background-color: #2f31a5;
+ color: #f0ec0c;
padding: 20px 40px;
- border: 0;
- box-shadow: 0;
+ border: 100;
+ box-shadow: 100;
border-radius: 5px;
margin-bottom: 20px;
+ margin-top: 30px;
}
- Game Over
+
+ Be Brave as Ukraine!
- + +
+
+
+ Stats
+Orks:
+Drones:
+Chances: 0
+