diff --git a/8-UltimateCarGame/README.md b/8-UltimateCarGame/README.md new file mode 100644 index 00000000..38a3200d --- /dev/null +++ b/8-UltimateCarGame/README.md @@ -0,0 +1,17 @@ +# Car Game 🚕 +Everyone loves playing games. And in this project I am done with a simple game which can make you happpy. + +--- +## 🔗 Introduction +--- +In this game, I have used simple `HTML` `CSS` and `JavaScript`. In `HTML` I created some `div` and some lines with some importaing informations. In `CSS` there is lines of code to design `HTML` to look web page better. `Javascript` is the file where all the structure is running. Programmed that for increasing the level of Game and it will be more harder to play. + +--- +### Car Game Screenshort +![Image](./ultimateCar/src/Images/GameImage.png) + +* Red car is the player car +* Blue cars are enemies and you need to save your car from enemies + +--- +🙏 Thank You diff --git a/8-UltimateCarGame/ultimateCar/index.html b/8-UltimateCarGame/ultimateCar/index.html new file mode 100644 index 00000000..9af48980 --- /dev/null +++ b/8-UltimateCarGame/ultimateCar/index.html @@ -0,0 +1,34 @@ + + + + + + + + Ultimate Car Race + + + + + + +
+
+
+ score : 0 +
+
+ +
+ +
+
+ 🛠 + Start The Game 🛠 +
+
+ + + + + \ No newline at end of file diff --git a/8-UltimateCarGame/ultimateCar/src/Images/GameImage.png b/8-UltimateCarGame/ultimateCar/src/Images/GameImage.png new file mode 100644 index 00000000..571d3973 Binary files /dev/null and b/8-UltimateCarGame/ultimateCar/src/Images/GameImage.png differ diff --git a/8-UltimateCarGame/ultimateCar/src/back.jpg b/8-UltimateCarGame/ultimateCar/src/back.jpg new file mode 100644 index 00000000..3c9177b7 Binary files /dev/null and b/8-UltimateCarGame/ultimateCar/src/back.jpg differ diff --git a/8-UltimateCarGame/ultimateCar/src/script.js b/8-UltimateCarGame/ultimateCar/src/script.js new file mode 100644 index 00000000..cdc7887c --- /dev/null +++ b/8-UltimateCarGame/ultimateCar/src/script.js @@ -0,0 +1,172 @@ +const tootalScore = document.getElementById('score'); +const mainRoad = document.getElementById('main'); +const message = document.getElementById('message'); + +console.log(mainRoad); +message.addEventListener('click', start); + +let keys = { + ArrowUp: false, + ArrowDown: false, + ArrowLeft: false, + ArrowRight: false +} + +let player = { + speed: 5, + score: 0 +}; + +document.addEventListener('keydown', keyDown); +document.addEventListener('keyup', keyUp); + +function keyDown(e) { + e.preventDefault(); + keys[e.key] = true; + console.log(e.key); + console.log(keys); +} + +function keyUp(e) { + e.preventDefault(); + keys[e.key] = false; + console.log(e.key); +} + +function isCollide(line,eCar){ + lineRect = line.getBoundingClientRect(); + enemyrect = eCar.getBoundingClientRect(); + + return !((lineRect.bottom < enemyrect.top) || (lineRect.top > enemyrect.bottom) || (lineRect.right < enemyrect.left) || (lineRect.left > enemyrect.right)); +} + +function moveLines(){ + let roadLine = document.querySelectorAll('.roadLine'); + roadLine.forEach(function(items){ + if(items.y > 800){ + items.y = 0; + } + items.y += player.speed; + items.style.top = items.y + "px"; + }) +} + +function moveEnemyCar(car){ + let enemyCar = document.querySelectorAll('.enemyCar'); + enemyCar.forEach(function(items){ + if(isCollide(car,items)){ + console.log("BooM"); + // alert("khatam!! nikal ab"); + player.start = false; + message.classList.remove('hide'); + } + + if(items.y > 800){ + items.y = -400; + items.x = Math.floor(Math.random() * 350); + items.style.left = items.x + "px"; + } + items.y += player.speed; + items.style.top = items.y + "px"; + }) +} + +let scoreCounter = 0; // counter for increasing score +let speedCounter = 0; // counting speed and if condition filled then increase speed with given amount + +function gamePlay() { + console.log("game is running"); + + let car = document.querySelector('.car'); + let roadPos = mainRoad.getBoundingClientRect(); + // console.log(roadPos); + + if (player.start) { + + moveLines(); + moveEnemyCar(car); + + if (keys.ArrowUp && player.y > 90) { + player.y -= player.speed + } + if (keys.ArrowDown && player.y < (roadPos.height - 70)) { + player.y += player.speed + } + + if (keys.ArrowLeft && player.x > 5) { + player.x -= player.speed + } + if (keys.ArrowRight && player.x < (roadPos.width - 50)) { + player.x += player.speed + } + + car.style.top = player.y + 'px'; + car.style.left = player.x + 'px'; + + // console.log("position " + player.y + " " + player.x); + window.requestAnimationFrame(gamePlay); + // console.log(player.score++); + scoreCounter++; + if(scoreCounter===5){ + scoreCounter = 0; + player.score++; + speedCounter++; + } + tootalScore.innerText = "score : " + (player.score); + + if(speedCounter===100){ + speedCounter = 0; + player.speed += 0.6; + } + + // if(player.score>100){ + // mainRoad.style.width = 200 + "px"; + // } + } +} + +function start() { + + // everything restart + message.classList.add('hide'); + // mainRoad.classList.add('hide'); // for removing class simply write remove + mainRoad.innerHTML = ""; + player.speed = 5; + + player.start = true; + player.score = 0; + window.requestAnimationFrame(gamePlay); + + // lines in mid of road + for (let i = 0; i < 8; i++) { + let roadLine = document.createElement('div'); + roadLine.setAttribute('class', 'roadLine'); + // roadLine.innerText = "hey i am here"; + roadLine.y = (i*100); + roadLine.style.top = roadLine.y + "px"; + mainRoad.appendChild(roadLine); + } + + //enemy car + for (let i = 0; i < 4; i++) { + let enemyCar = document.createElement('div'); + enemyCar.setAttribute('class', 'enemyCar'); + enemyCar.y = ((i+1)*350) * -1; + enemyCar.style.top = enemyCar.y + "px"; + enemyCar.x = Math.floor(Math.random() * 350); + enemyCar.style.left = enemyCar.x + "px"; + mainRoad.appendChild(enemyCar); + } + + //main car + let car = document.createElement('div'); + car.setAttribute('class', 'car'); + // car.innerText = "hey i'm in"; // for checking new set div using js + mainRoad.appendChild(car); + + // finding position of car + player.x = car.offsetLeft; + player.y = car.offsetTop; + + console.log("position " + player.y + " " + player.x); +} \ No newline at end of file diff --git a/8-UltimateCarGame/ultimateCar/src/style.css b/8-UltimateCarGame/ultimateCar/src/style.css new file mode 100644 index 00000000..fb48cdcf --- /dev/null +++ b/8-UltimateCarGame/ultimateCar/src/style.css @@ -0,0 +1,114 @@ +:root{ + --black: #000; + --lightBlack: #504f4f; + --white: #fff; + --darkWhite: #999999; + --lightWhite: #c9c9c9; + --mainBackground: #40b876; + --scoreBoard: #5aebf0; + --scoreBorder: #392c50; + --messageBox: rgb(138, 61, 61); + --roadColor: #5f5f5fbb; + --roadlineCol: #fff; + --scoreRes: #7d39eb; +} +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body{ + /* background: var(--mainBackground); */ + display: inline-block; + height: 100vh; + width: 100vw; + overflow: hidden; + background-image: url('./back.jpg'); + background-repeat: no-repeat; + background-size: auto 100%; +} + +.road{ + position: absolute; + width: 450px; + height: 100%; + background: var(--darkWhite); + left: 50%; + transform: translateX(-50%); + border: 2px solid var(--roadColor); +} + +.score{ + float: right; + background-color: var(--scoreBoard); + color: var(--scoreRes); + height: 40px; + width: 170px; + margin-top: 10px; + border: 2px solid var(--scoreBorder); + border-radius: 20px 0 0 10px; + text-align: center; + font-size: 25px; +} + +.message { + position: absolute; + height: 120px; + width: 600px; + background-color: var(--messageBox); + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border: 1px solid var(--white); + border-radius: 20px 0 20px 0; + text-align: center; + font-size: 25px; + padding: 20px 0 ; + color: var(--lightWhite); + visibility: visible; +} + +.main{ + width: 440px; + height: 100%; + margin: 0 5px; + background: var(--roadColor); + visibility: visible; + border-right: 7px dashed #c8d6e5; + border-left: 7px dashed #c8d6e5; +} + +.message.hide{ + visibility: hidden; +} + +.car{ + width: 50px; + height: 70px; + background-color: red; + position: absolute; + left: 50px; + top: 450px; +} + +.roadLine{ + width: 5px; + height: 70px; + background: var(--roadlineCol); + position: absolute; + left: 50%; + /* top: 50px; */ + transform: translateX(-50%); + border: 1px solid #fff; + border-radius: 10px; +} + +.enemyCar{ + width: 50px; + height: 70px; + background-color: #252147; + position: absolute; + left: 50px; + top: 450px; +} \ No newline at end of file