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