Online Car Race Game with Source Code

Download Free projects with Source Code

Description:

The main thing we need is to make our road. at the point when we click on the Start Game button, we have to make the canvas and show the road.

In our game, the player may have the option to move the vehicle to one side and left. Using left and right arrows, the player ought to have the option to move the vehicle.

They will consistently begin in the position 0 of the y axis (the hindrances will be originating from the head of the canvas), yet you should cause them to show up in an arbitrary spot of the x axis.

Gracious! On the off chance that we need to challenge someone, we have to measure who is improving it. So we have to include a score. Feel free to add a technique to check focuses while you keep the vehicle staying away from snags.

Movement Calculation:


function draw() {
setTimeout(function() { 
calcMovement();   
//if($.state.speed > 0) {   
$.state.bgpos += ($.state.currentCurve * 0.02) * ($.state.speed * 0.2); 
$.state.bgpos = $.state.bgpos % $.canvas.width; 
$.ctx.putImageData($.storage.bg, $.state.bgpos, 5); 
$.ctx.putImageData($.storage.bg, $.state.bgpos > 0 ? $.state.bgpos - $.canvas.width : $.state.bgpos + $.canvas.width, 5);
//}       
$.state.offset += $.state.speed * 0.05;   
if($.state.offset > $.settings.ground.min) { 
$.state.offset = $.settings.ground.min - $.state.offset; 
$.state.startDark = !$.state.startDark; 
}   
drawGround($.ctx, $.state.offset, $.colors.ground, $.colors.groundDark, $.canvas.width);
drawRoad($.settings.road.min + 6, $.settings.road.max + 36, 10, $.colors.roadLine);
drawGround($.ctx2, $.state.offset, $.colors.roadLine, $.colors.road, $.canvas.width);
drawRoad($.settings.road.min, $.settings.road.max, 10, $.colors.road);
drawRoad(3, 24, 0, $.ctx.createPattern($.canvas2, 'repeat'));
drawCar();    drawHUD($.ctx, 630, 340, $.colors.hud);
requestAnimationFrame(draw);  }, 1000 / $.settings.fps);}

Environment Creation:

var $ = {
canvas: null,
ctx: null,
canvas2: null,
ctx2: null,
colors: {
sky: "#D4F5FE",
mountains: "#83CACE",
ground: "#8FC04C",
groundDark: "#73B043",
road: "#606a7c",
roadLine: "#FFF",
hud: "#FFF"
},
settings: {
fps: 60,
skySize: 120,
ground: {
size: 350,
min: 4,
max: 120
},
road: {
min: 76,
max: 700,
}
},
state: {
bgpos: 0,
offset: 0,
startDark: true,
curve: 0,
currentCurve: 0,
turn: 1,
speed: 27,
xpos: 0,
section: 50,
car: {
maxSpeed: 50,
friction: 0.4,
acc: 0.85,
deAcc: 0.5
},
keypress: {
up: false,
left: false,
right: false,
down: false
}
},
storage: {
bg: null
}
};
$.canvas = document.getElementsByTagName('canvas')[0];
$.ctx = $.canvas.getContext('2d');
$.canvas2 = document.createElement('canvas');
$.canvas2.width = $.canvas.width;
$.canvas2.height = $.canvas.height;
$.ctx2 = $.canvas2.getContext('2d');
window.addEventListener("keydown", keyDown, false);
window.addEventListener("keyup", keyUp, false);

drawBg();
draw();

 

GET CODE NOW