Akshay Kumar Kushwaha
3 years ago
parent
7a6611486d
commit
414ee962e8
@ -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
|
||||||
|
|
||||||
|
|
||||||
|
* Red car is the player car
|
||||||
|
* Blue cars are enemies and you need to save your car from enemies
|
||||||
|
|
||||||
|
---
|
||||||
|
🙏 Thank You
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
<!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>Ultimate Car Race</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="./src/style.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="road" id="road">
|
||||||
|
<div class="score" id="score">
|
||||||
|
score : 0
|
||||||
|
</div>
|
||||||
|
<div class="main" id="main">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="message" id="message">
|
||||||
|
🛠
|
||||||
|
Start The Game 🛠
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="./src/script.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
After Width: | Height: | Size: 610 KiB |
|
After Width: | Height: | Size: 40 KiB |
@ -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);
|
||||||
|
}
|
||||||
@ -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;
|
||||||
|
}
|
||||||
Loading…
Reference in new issue