3D Car Driving Game Using Html CSS And JavaScript
Introduction
Hello friends, welcome to today’s new blog post. Today we have created an amazing and easy project for you which is a car game which you must have played in your childhood. Today we have created it for you which we can also play and we will also learn a lot from it. If you have difficulty in creating a coding project, then this project is going to be absolutely right for you. To create this car game, we have taken the help of html, css and javascript and it is very easy to create it, but if you do not have knowledge of javascript then you may face problem. If you can then let’s go, now let’s understand the code
HTML (index.html)
Get Discount on Top Educational Courses
First of all we have to create the structure of a game, maybe we will have to create it with the help of HTML and this is quite an easy task. We have created a landing page in the front of the game, which will have some text and button through which the user will be able to play the game. So let us understand step by step how we have written the code in the game.
- First comes <!DOCTYPE_html> From this we come to know that this code is HTML code and this is an important part of our HTML code
- After this comes the language which we can set through this element <html lang=”en”>
- Friends, this tag is the tag of HTML in which if we want to add any link or icon link, then we can do it in it, it also has a close tag </head>
- If we want to add the title of the project then you can do it like this <title>3D Car Driving Game developergtm</title>
- To link the css file to the html file we have to use this link tag <link rel=”stylesheet” href=”./style.css”> Make sure you have added the correct url name
- To create a score box in the game, we have created a box <div id=”scorediv”> in which the user’s score will be shown
- In the score box the score will be shown as <span id=”score”>0</span> and in this we have also used coin png which is like this <img src=”…coin.png” id=”cn”>
- To create the game page, we have created a <div> <div class=”gamehome” id=”startpage”> which will act as a landing page
- In the game page we have added a heading <div id=”gameTitle”>3D Car Drive</div> and next to it we have created a button <button onclick=”ld()” id=”playBtn </button> In this we have also added some text
- We have created a container in the game <div id=”mainContainer” style=”background:#0f0″ > and we have also added an image to it <img id=”city” src=”https://image.ibb.co/jCGU0y/cty.jpg”>
Friends, this is the code of HTML in which we have used some images and font icons which you will see in the code.
<title>3D Car Drive</title>
<div id="scoreDiv">
<span id="score">0</span>
<img decoding="async" src="https://image.ibb.co/jRAp0y/coin.png" id="cn">
</div>
<div class="gameHome" id="startPage">
<div id="gameTitle">3D Car Drive</div>
<button id="playBtn"><span style="font-size:18px">Loading Assets<br>Please Wait...<br>This may take a few seconds for first time</span></button><br>
<div id="ldc"><div id="loading"></div></div>
<p>Rotate your phone & tilt left/right or tap left/right side of screen to move the car<br>Use left/right arrow key on your PC</p>
<div id="mainContainer" style="background:#0f0">
<img decoding="async" id="city" src="https://image.ibb.co/jCGU0y/cty.jpg">
</div>
<img decoding="async" class="aImg" id="t1" src="https://image.ibb.co/dZi5Ly/t1.png">
<img decoding="async" class="aImg" id="t2" src="https://image.ibb.co/jajjDJ/t2.png">
<img decoding="async" class="aImg" id="t3" src="https://image.ibb.co/it4jDJ/t5.png">
<img decoding="async" class="aImg" id="t4" src="https://image.ibb.co/ksy0nd/t4.png">
<img decoding="async" class="aImg" id="c1" src="https://image.ibb.co/f4v7YJ/c2.png">
<!-- partial -->
CSS (Style.css)
Friends now let’s talk about CSS, it will help in giving a good look to our game, if you have good knowledge of CSS then you can make the game even better, we have made this game at a beginner’s level, so that if you can understand everything then play it, now we will understand the CSS codes.
- We’ve set our game to height:100y; and margins to 0 so there won’t be unnecessary gaps.
- We have created the most important container for the game in which we have kept position:absolute; or overflow: hidden; so that the content is displayed properly, we have also used transform in this transform: translateX(0px) rotate(0deg);
- We have also used a background image for the game in which we have kept height:30vw; and width 100% and most importantly z-index:-1; so that the rest of the content is also displayed properly
- In the game’s landing page we have used this color background:#ffff; and centered the text text-align:center;
- In the game’s play button we have used this color background:#1642ea; and in this we have also used padding padding:3px 25px; and to make it look good we have also used shadow box-shadow:3px 4px #000;
- We have also used animations in this game for which we have used Cass’s @kefarmes
Friends, in CSS, properties like width, height, border are mostly used. I have told you all the things that are important for you, the rest you can check in the code. Now we have designed our game nicely using HTML and CSS. Now we have to make it live with the help of Javascript.
body{
margin:0;
height:100vh;
width:100vw;
}
#mainContainer {
position:absolute;
top:0;
left:0;
transform-origin:0% 0%;
width:100%;
transform: translateX(0px) rotate(0deg);
overflow: hidden;
}
#city {
position:absolute;
top:0;
left:0;
height:30vw;
width:100%;
z-index:-1;
display: block;
}
#myCanvas {
background:transparent;
z-index: 100;
}
.aImg {
display:none;
}
#mainContainer {
display:none;
}
#scoreDiv {
position:absolute;
right:0;
background:transparent;
display:inline-block;
border:3px solid red;
padding:3px 50px 3px 10px;
border-radius:20px;
font-weight:700;
font-size:24px;
height:30px;
margin:10px;
z-index:1000;
transform-origin:100% 0%;
}
#cn {
height:52px;
width:52px;
background:red;
position:absolute;
right:-8px;
top:-8px;
border-radius:50%;
}
.gameHome {
position:absolute;
top:0;
left:0;
background:#fff;
height:100vh;
width:100vw;
transform-origin:0% 0%;
text-align:center;
}
#gameTitle {
text-align:center;
font-family:cursive;
font-size:35px;
margin-top:50px;
font-weight:800;
}
#playBtn {
font-size:20px;
display:inline-block;
background:#1642ea;
color:#fff;
padding:3px 25px;
margin-top: 100px;
border:none;
border-radius:10px;
box-shadow:3px 4px #000;
outline:none;
}
#gameConf {
width:50%;
height:100%;
background:red;
}
#gameDifficulty {
width:100%;
height:50%;
background:blue;
padding:0;
margin:0;
}
.diffOpt {
background:green
font-family:cursive;
font-size:20px;
text-align:center;
}
#loading {
height:60px;
width:60px;
background:transparent;
display:inline-block;
border:10px solid transparent;
border-bottom-color:red;
border-left-color:red;
border-radius:50%;
animation:ld 1s linear infinite;
}
@keyframes ld {
0% {
transform:translateY(-165px) rotate(0deg);
}
100% {
transform:translateY(-165px) rotate(360deg);
}
}
Javascript (Script.js)
This is the javascript code, with the help of which we have completed our game. Friends, this code is very important for our game. If you do not use this code, then your game will not work. So let us now understand some important codes.
- First of all we have created a function in which we have added the start button and score button of our game (function(){ To link the buttons we have written code like this var gameHome = document.getElementById(“startPage”);
- We have also added score to the game which we have transformed with the help of javascript so that the position of the coin is set correctly scoreDiv.style.transform = “rotate(90deg) translateX(40px)”;
- After this we have created another function in which we have linked the html to the button to play the game and all this work will be done with the help of javascript function done()
Friends, with the help of javascript we have created another function in this game in which the user will be out and in which the score will also be correct. You will get to see this entire code below and if you have good knowledge of javascript then you can develop it even better.
(function(){
"use strict"
var hw = window.innerWidth || 360;
var hh = window.innerHeight || 560;
var gameHome = document.getElementById("startPage");
var scoreDiv = document.getElementById("scoreDiv");
if(hh > hw){
gameHome.style.height = hw+"px";
gameHome.style.width = hh+"px";
gameHome.style.transform = "translateX("+hw+"px) rotate(90deg)";
scoreDiv.style.bottom = 0;
scoreDiv.style.transform = "rotate(90deg) translateX(40px)";
}
})();
var ld;
var loaded = false;
function done(){
document.getElementById("ldc").innerHTML="";
document.getElementById("ldc").style.display = "none";
document.getElementById("playBtn").innerHTML = "PLAY";
loaded = true;
}
(function(){
var w = window.innerWidth || 360;
var h = window.innerHeight || 560;
if(h > w){
var nh = h;
h = w;
w = nh;
document.getElementById("mainContainer").style.transform = "translateX("+(h)+"px) rotate(90deg)";
}
document.getElementById("mainContainer").style.width = w+"px";
document.getElementById("mainContainer").style.height = h+"px";
document.getElementById("city").style.height = h*.3+"px";
document.getElementById("city").style.width = w+"px";
var c = document.getElementById("myCanvas");
c.height = h;
c.width = w;
var ctx = c.getContext("2d");
function loadGame(){
"use strict";
var roadWidth = 5*w/36;
var roadTop = h-h*0.7;
var roadLeft = (w-roadWidth)/2;
var roadConstant = roadLeft/(h-roadTop);
var score = 0;
var scoreC = document.getElementById("score");
function updateScore(ds){
score+=ds;
scoreC.textContent = score;
}
updateScore(0);
var rso = [];
var ratio = 0.8;
var totalRso = 20;
var maxHF = h*(1-ratio)/(2.25*(1-Math.pow(ratio,totalRso)));
var maxH = maxHF;
var totalHeight = 0.7*h;
var minWidth = 1;
var maxWidth = 26;
var dif = maxWidth - minWidth;
var changedHeight = totalHeight-maxH*ratio;
var cnst1 = Math.pow(ratio,totalRso)/(1-ratio);
var stp = h-totalHeight;
var tMaxH = h*20/36;
var treeCnst = tMaxH/roadLeft;
var gameDifficulty = 100;
function TreeBuilder(src,src2,start,left){
this.src = treeSrc[src];
this.src2 = treeSrc[src2];
this.y = start;
this.x = 0;
this.h = 0;
this.w = 0;
this.dy = 0.01;
this.r = 1.009;
this.left = left;
}
TreeBuilder.prototype.draw = function(){
this.y += this.dy;
this.dy *= this.r;
this.x = (h-this.y)*roadConstant - this.w - this.w*this.left;
this.h = (roadLeft-this.x-this.w*this.left)*treeCnst;
this.w = this.h*2/3;
ctx.drawImage(this.src,this.x,this.y-this.h,this.w,this.h);
ctx.drawImage(this.src2,w-this.x-this.w,this.y-this.h,this.w,this.h);
if(this.y >= h){
this.y = stp;
this.h = 0;
this.w = 0;
this.left = Math.random()*3;
this.dy = 0.5;
}
}
function _i(x){
return document.getElementById(x);
}
var treeSrc = [_i("t1"),_i("t2"),_i("t3"),_i("t4")];
var trees = [];
for(var n = 0; n 560) ? 120 : 90;
var carH = carW*2/3;
function CarBuilder(src,start,lane){
this.src = carSrc[src];
this.y = start;
this.x = 0;
this.h = 0;
this.w = 0;
this.dy = 0.5;
this.lane = lane;
}
CarBuilder.prototype.draw = function(){
this.dy *= 1.01;
this.y += this.dy;
this.x = (carWCnst/2)*(h-this.y)+(w-(carWCnst*(h-this.y)))*this.lane/8;
this.w = carW-carW*carWCnst*(h-this.y)/w;
this.h = 1.7*this.w/3;
ctx.drawImage(this.src,this.x,this.y-this.h,this.w,this.h);
if(this.y >= h-20){
if(Math.abs(this.x-cx) <= carH && Math.abs(this.y-h+carH) = h+100){
this.y = stp;
this.h = 0;
this.w = 0;
this.left = Math.random()*3;
this.dy = 0.5;
this.lane = 1+Math.random()*5;
}
}
var carSrc = [_i("c1"),_i("c1"),_i("c1")];
var cars = [];
for(var n = 0; n 560) ? 75 : 60;
function CoinBuilder(start,lane){
this.src = coinSrc;
this.y = start;
this.x = 0;
this.h = 0;
this.w = 0;
this.dy = 0.5;
this.lane = lane;
}
CoinBuilder.prototype.draw = function(){
this.dy *= 1.01;
this.y += this.dy;
this.x = (carWCnst/2)*(h-this.y)+(w-(carWCnst*(h-this.y)))*this.lane/8;
this.w = coinW-coinW*carWCnst*(h-this.y)/w;
this.h = this.w;
ctx.drawImage(this.src,this.x,this.y-this.h,this.w,this.h);
if(this.y >= h-20){
if(Math.abs(this.x-cx) <= coinW && Math.abs(this.y-h+coinW) = h+100){
this.y = stp;
this.h = 0;
this.w = 0;
this.left = Math.random()*3;
this.dy = 0.5;
this.lane = Math.floor(1+Math.random()*5);
}
}
var coinSrc = _i("cn");
var coins = [];
for(var n = 0; n < ((h*0.7+100)/(gameDifficulty-50)); n++){
coins.push(new CoinBuilder(stp+n*(gameDifficulty-50),6));
}
//End Coin...
function rectPoints(n,ho){
n = totalRso-n-1;
var y1 = stp+maxH*cnst1*(Math.pow(1/ratio,n)-1);
var x1 = roadLeft-roadConstant*(y1-stp);
var y2 = y1;
var x2 = x1 + minWidth+(y1-stp)*dif/totalHeight;
var y3 = y1 + maxH*cnst1*(Math.pow(1/ratio,n+1)-1);
var x3 = roadLeft-roadConstant*(y3-stp);
var y4 = y3;
var x4 = x3 + minWidth+(y3-stp)*dif/totalHeight;
return [x1,y1,x2,y2,x4,y4,x3,y3];
}
for(var n = 0; n < totalRso; n++){
rso.push(rectPoints(n,h));
rso[n][8] = (n%2==0) ? "#000" : "#fff";
}
function draw(){
ctx.beginPath();
ctx.moveTo((w-roadWidth)/2,stp);
ctx.lineTo((w-roadWidth)/2+roadWidth,stp);
ctx.lineTo(w,h);
ctx.lineTo(0,h);
ctx.fillStyle="#555";
ctx.fill();
ctx.closePath();
for(var n = 0; n < totalRso; n++){
ctx.beginPath();
ctx.moveTo(rso[n][0],rso[n][1]);
ctx.lineTo(rso[n][2],rso[n][3]);
ctx.lineTo(rso[n][4],rso[n][5]);
ctx.lineTo(rso[n][6],rso[n][7]);
ctx.lineTo(rso[n][0],rso[n][1]);
ctx.lineWidth = 2;
ctx.fillStyle = rso[n][8];//"rgb("+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+")";
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.moveTo(w-rso[n][0],rso[n][1]);
ctx.lineTo(w-rso[n][2],rso[n][3]);
ctx.lineTo(w-rso[n][4],rso[n][5]);
ctx.lineTo(w-rso[n][6],rso[n][7]);
ctx.lineTo(w-rso[n][0],rso[n][1]);
ctx.lineWidth = 2;
ctx.fillStyle = rso[n][8];//"rgb("+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+")";
ctx.fill();
ctx.closePath();
}
}
var cx = (w-carW)/2;
var cl = false, cr = false;
var car = _i("c1");
var ms = 3*w/560;
function drawCar(){
if(cl) if(cx+carW+50 0) cx-=ms;
ctx.drawImage(car,cx,h-carH,carW,carH);
}
var m = 0;
var intv = setInterval(function(){
try{
ctx.clearRect(0,0,w,h);
maxH+=0.5;
changedHeight = maxH*cnst1*(Math.pow(1/ratio,totalRso-1)-1);//maxH*(1-Math.pow(ratio,totalRso-5))/(1-ratio);
if(changedHeight >= totalHeight){
maxH = maxHF;
m++;
}
for(var n = 0; n < totalRso; n++){
rso[n]=rectPoints(n,h-totalHeight+changedHeight);
if(m%2==0) rso[n][8] = (n%2==0) ? "#000" : "#fff";
else rso[n][8] = (n%2==1) ? "#000" : "#fff";
}
draw();
for(var n = 0; n < trees.length; n++){
trees[n].draw();
}
for(var n = 0; n < coins.length; n++){
coins[n].draw();
}
for(var n = 0; n (h/2)){
cl = true;
}
else{
cr = true;
}
}
function getTouchEnd(){
cl = false;
cr = false;
}
c.removeEventListener("touchstart",getTouch);
c.removeEventListener("touchend",getTouchEnd);
c.addEventListener("touchstart",getTouch);
c.addEventListener("touchend",getTouchEnd);
//Key..
function getKey(e){
e.preventDefault();
var ty = e.keyCode;
if(ty===39){
cr = false;
cl = true;
}
else if(ty===37){
cl = false;
cr = true;
}
}
function getKeyEnd(e){
var ty = e.keyCode;
if(ty === 39) cl = false;
else if(ty === 37) cr = false;
}
document.body.removeEventListener("keydown",getKey);
document.body.removeEventListener("keyup",getKeyEnd);
document.body.addEventListener("keydown",getKey);
document.body.addEventListener("keyup",getKeyEnd);
//Accelarometre
function driveCar(e){
var y = e.accelerationIncludingGravity.y;
if(y > 0){
if(cx+carW+50 0) cx += y*ms;
}
}
if(window.DeviceMotionEvent){
window.removeEventListener("devicemotion",driveCar)
window.addEventListener("devicemotion",driveCar,false)
}
//End
}
ld = function(){
if(loaded){
document.getElementById("startPage").style.display = "none";
document.getElementById("mainContainer").style.display = "block";
loadGame();
}
}
})();
Output:
Disclaimer: The code provided in this post is sourced from GitHub and is distributed under the MIT License. All credits for the original code go to the respective owner. We have shared this code for educational purposes only. Please refer to the original repository for detailed information and any additional usage rights or restrictions.
3D Car Driving Game Using Html CSS And JavaScript Introduction Hello friends, welcome to today’s new blog post. Today we have created …
Dice Rolling Game Using HTML CSS And JavaScript Introduction Hey coders, welcome to another new blog. In this article we’ll build a …
Crossey Road Game Clone Using HTML CSS And JavaScript Introduction This is our HTML code which sets up the basic structure of …
Memory Card Game Using HTML CSS And JavaScript Introduction Hello coders, welcome to another new blog. Today in this article we’ll learn …
Get Huge Discounts
More Python Projects
