advanced

Hello developers nothing here yet but soon you will be in luck later if you are looking for something to do scroll down to the very bottom and you might find a game to play:) also here is a random game scource code first person to make it work will get a free ebook (Tip:my email is on the home page) Also rally drifting dosent seem to work at the moment bye.

index.html

<!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="newgame.css">
<!-- <script src="newgame.js"></script> -->
</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="game.js"></script>
</body>
</html>

styles.css

* {
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;
}

game.js

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');
}

Advanced

index.html

styles.css

game.js

Free drift game

Rally drifting

Top speed 3d