diff --git a/Games/Road_Racer/README.md b/Games/Road_Racer/README.md new file mode 100644 index 0000000000..e69de29bb2 diff --git a/Games/Road_Racer/assets/car.png b/Games/Road_Racer/assets/car.png new file mode 100644 index 0000000000..11ca12c52b Binary files /dev/null and b/Games/Road_Racer/assets/car.png differ diff --git a/Games/Road_Racer/assets/car2.png b/Games/Road_Racer/assets/car2.png new file mode 100644 index 0000000000..241a24659a Binary files /dev/null and b/Games/Road_Racer/assets/car2.png differ diff --git a/Games/Road_Racer/assets/images/Road_Racer.PNG b/Games/Road_Racer/assets/images/Road_Racer.PNG new file mode 100644 index 0000000000..12a5991ac5 Binary files /dev/null and b/Games/Road_Racer/assets/images/Road_Racer.PNG differ diff --git a/Games/Road_Racer/assets/scenery.png b/Games/Road_Racer/assets/scenery.png new file mode 100644 index 0000000000..223a07bc9a Binary files /dev/null and b/Games/Road_Racer/assets/scenery.png differ diff --git a/Games/Road_Racer/index.html b/Games/Road_Racer/index.html new file mode 100644 index 0000000000..8dd3bb3beb --- /dev/null +++ b/Games/Road_Racer/index.html @@ -0,0 +1,25 @@ + + + + + +Game + + + + + +
+
+
+
+

Click here to start the game

+

INSTRUCTIONS:
+Use Arrow keys to move the car
+If you hit any car then game will end

+
+
+
+ + + \ No newline at end of file diff --git a/Games/Road_Racer/script.js b/Games/Road_Racer/script.js new file mode 100644 index 0000000000..310742b70e --- /dev/null +++ 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'); +} \ No newline at end of file diff --git a/Games/Road_Racer/style.css b/Games/Road_Racer/style.css new file mode 100644 index 0000000000..7a8ceeaf2c --- /dev/null +++ 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; + } \ No newline at end of file diff --git a/Games/Road_Racer/styles.css b/Games/Road_Racer/styles.css new file mode 100644 index 0000000000..c8b5239064 --- /dev/null +++ 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; + } +