road racer game

kunjgit · Oct 5, 2023 · 9321b59 · 9321b59
1 parent b3f6e00
commit 9321b59
Show file tree

Hide file tree

Showing 9 changed files with 309 additions and 0 deletions.
diff --git a/Games/Road_Racer/README.md b/Games/Road_Racer/README.md
diff --git a/Games/Road_Racer/assets/car.png b/Games/Road_Racer/assets/car.png
diff --git a/Games/Road_Racer/assets/car2.png b/Games/Road_Racer/assets/car2.png
diff --git a/Games/Road_Racer/assets/images/Road_Racer.PNG b/Games/Road_Racer/assets/images/Road_Racer.PNG
diff --git a/Games/Road_Racer/assets/scenery.png b/Games/Road_Racer/assets/scenery.png
diff --git a/Games/Road_Racer/index.html b/Games/Road_Racer/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Game</title>
+<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="styles.css">
+
+</head>
+<body>
+<div class="game">
+<div class="score"></div>
+<div class="highScore"></div>
+<div class="startScreen">
+<p class="ClickToStart">Click here to start the game <br><br></p>
+<p> INSTRUCTIONS: <br>
+Use Arrow keys to move the car <br>
+If you hit any car then game will end</p>
+</div>
+<div class="gameArea"></div>
+</div>
+<script src="script.js"></script>
+</body>
+</html>
diff --git a/Games/Road_Racer/script.js b/Games/Road_Racer/script.js
@@ -0,0 +1,125 @@
+const score = document.querySelector('.score');
+const highScore = document.querySelector('.highScore');
+const startScreen = document.querySelector('.startScreen');
+const gameArea = document.querySelector('.gameArea');
+const ClickToStart = document.querySelector('.ClickToStart');
+// const grass = document.querySelector('.grass');
+// const garden = document.querySelector('.garden');
+ClickToStart.addEventListener('click', Start);
+document.addEventListener('keydown', keydown);
+document.addEventListener('keyup', keyup);
+let keys = {
+ArrowUp: false,
+ArrowDown: false,
+ArrowLeft: false,
+ArrowRight: false,
+}
+let player = {
+speed: 5,
+score: 0,
+highScore: 0
+};
+function keydown(e) {
+keys[e.key] = true
+}
+function keyup(e) {
+keys[e.key] = false;
+}
+// starting the game
+function Start() {
+gameArea.innerHTML = "";
+startScreen.classList.add('hide');
+player.isStart = true;
+player.score = 0;
+window.requestAnimationFrame(Play);
+// creating the road lines
+for (i = 0; i < 5; i++) {
+let roadLines = document.createElement('div');
+roadLines.setAttribute('class', 'roadLines');
+roadLines.y = (i * 140);
+roadLines.style.top = roadLines.y + "px";
+gameArea.appendChild(roadLines);
+}
+// creating the opponents car
+for (i = 0; i < 3; i++) {
+let Opponents = document.createElement('div');
+Opponents.setAttribute('class', 'Opponents');
+Opponents.y = ((i) * -300);
+Opponents.style.top = Opponents.y + "px";
+gameArea.appendChild(Opponents);
+Opponents.style.left = Math.floor(Math.random() * 350) + "px";
+// Opponents.style.backgroundColor=randomColor();
+}
+let car = document.createElement('div');
+car.setAttribute('class', 'car');
+gameArea.appendChild(car);
+player.x = car.offsetLeft;
+player.y = car.offsetTop;
+}
+function randomColor(){
+function c(){
+let hex=Math.floor(Math.random()*256).toString(16);
+return ("0"+String(hex)).substr(-2);
+}
+return "#"+c()+c()+c();
+}
+//play the game
+function Play() {
+let car = document.querySelector('.car');
+let road = gameArea.getBoundingClientRect();
+if (player.isStart) {
+moveLines();
+moveOpponents(car);
+if (keys.ArrowUp && player.y > (road.top + 70)) { player.y -= player.speed }
+if (keys.ArrowDown && player.y < (road.height - 75)) { player.y += player.speed }
+if (keys.ArrowRight && player.x < 350) { player.x += player.speed }
+if (keys.ArrowLeft && player.x > 0) { player.x -= player.speed }
+car.style.top = player.y + "px";
+car.style.left = player.x + "px";
+highScore.innerHTML = "HighScore" + ":" + (player.highScore - 1);
+player.score++;
+player.speed += 0.01;
+if (player.highScore < player.score) {
+player.highScore++;
+highScore.innerHTML = "HighScore" + ":" + (player.highScore - 1);
+highScore.style.top="80px";
+}
+score.innerHTML = "Score" + ":" + (player.score - 1);
+window.requestAnimationFrame(Play);
+}
+}
+function moveLines() {
+let roadLines = document.querySelectorAll('.roadLines');
+roadLines.forEach(function (item) {
+if (item.y >= 700)
+item.y -= 700;
+item.y += player.speed;
+item.style.top = item.y + "px";
+})
+}
+function moveOpponents(car) {
+let Opponents = document.querySelectorAll('.Opponents');
+Opponents.forEach(function (item) {
+if (isCollide(car, item)) {
+endGame();
+}
+if (item.y >= 750) {
+item.y -= 900;
+item.style.left = Math.floor(Math.random() * 350) + "px";
+}
+item.y += player.speed;
+item.style.top = item.y + "px";
+})
+}
+//check whether the cars collide or not
+function isCollide(a, b) {
+aRect = a.getBoundingClientRect();
+bRect = b.getBoundingClientRect();
+return !((aRect.top > bRect.bottom) || (aRect.bottom < bRect.top) || (aRect.right < bRect.left) || (aRect.left > bRect.right))
+}
+//game is end
+function endGame() {
+player.isStart = false;
+player.speed = 5;
+startScreen.classList.remove('hide');
+}
diff --git a/Games/Road_Racer/style.css b/Games/Road_Racer/style.css
@@ -0,0 +1,78 @@
+* {
+	margin: 0;
+	padding: 0;
+	font-family: 'Lobster', cursive;
+	}
+	.game{
+	background-image: url(bg.jpg);
+	background-repeat: no-repeat;
+	background-size: 100% 100%;
+	}
+	.hide {
+	display: none;
+	}
+	.startScreen {
+	width: 500px;
+	height: 107px;
+	line-height: 20px;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	z-index: 2;
+	margin: auto;
+	background-color: rgb(43, 205, 226);
+	text-align: center;
+	border-bottom: 2px solid rgb(132, 197, 197);
+	}
+	.score,
+	.highScore {
+	position: absolute;
+	top: 10px;
+	left: 20px;
+	text-align: center;
+	background-color: rgb(100, 224, 156);
+	width: 200px;
+	color: rgb(59, 40, 40);
+	line-height: 40px;
+	border-radius: 4px;
+	font-size: 1.2em;
+	}
+	.ClickToStart {
+	cursor: pointer;
+	}
+	.gameArea {
+	height: 100vh;
+	width: 400px;
+	margin: auto;
+	position: relative;
+	background-color: rgb(32, 32, 32);
+	overflow: hidden;
+	border-left: 4px dashed white;
+	border-right: 4px dashed white;
+	}
+	.car{
+	background: url(car.png);
+	background-repeat: no-repeat;
+	background-size: 100% 100%;
+	height: 75px;
+	width: 50px;
+	position: absolute;
+	top: 520px;
+	}
+	.Opponents {
+	background: url( opponent car.png);
+	background-repeat: no-repeat;
+	background-size: 100% 100%;
+	height: 75px;
+	width: 50px;
+	position: absolute;
+	top: 520px;
+	}
+	.roadLines {
+	height: 100px;
+	width: 10px;
+	background-color: white;
+	position: absolute;
+	margin-left: 195px;
+	}
diff --git a/Games/Road_Racer/styles.css b/Games/Road_Racer/styles.css
@@ -0,0 +1,81 @@
+* {
+    margin: 0;
+    padding: 0;
+    font-family: 'Lobster', cursive;
+    }
+    .game{
+    background-image: url(assets/scenery.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    }
+    .hide {
+    display: none;
+    }
+    .startScreen {
+    width: 500px;
+    height: 107px;
+    line-height: 20px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 2;
+    margin: auto;
+    background-color: rgb(43, 205, 226);
+    text-align: center;
+    border-bottom: 2px solid rgb(132, 197, 197);
+    }
+    .score,
+    .highScore {
+    position: absolute;
+    top: 10px;
+    left: 20px;
+    text-align: center;
+    background-color: rgb(100, 224, 156);
+    width: 200px;
+    color: rgb(59, 40, 40);
+    line-height: 40px;
+    border-radius: 4px;
+    font-size: 1.2em;
+    }
+    .ClickToStart {
+    cursor: pointer;
+    }
+    .gameArea {
+    height: 100vh;
+    width: 400px;
+    margin: auto;
+    position: relative;
+    background-color: rgb(32, 32, 32);
+    overflow: hidden;
+    border-left: 4px dashed white;
+    border-right: 4px dashed white;
+    }
+    .car{
+    background: url(assets/car.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    height: 75px;
+    width: 50px;
+    position: absolute;
+    top: 520px;
+    }
+
+    .Opponents {
+    background: url(assets/car2.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    height: 75px;
+    width: 50px;
+    position: absolute;
+    top: 520px;
+    }
+
+    .roadLines {
+    height: 100px;
+    width: 10px;
+    background-color: white;
+    position: absolute;
+    margin-left: 195px;
+    }
+