If You want to learn web design and developing from 0 to 100% then this blog is only for you Here you will be also find source code of many web design and web developing source codes. html,css,javascript,php,mysql & database tutorial, projects, source code files and many blogging tips. Best css tips etc. html css javascript amazing creations

Subscribe Us

https://affiliate.fastcomet.com/scripts/2wc9ym?a_aid=5f4ca944dcb6d&a_bid=49785082

Breaking

Post Top Ad

Wednesday, September 16, 2020

How To make a Video Game in JAVASCRIPT full source code download

 How To make a Video Game in JAVASCRIPT


In this session I am going to teach you about How to make a game in Javascript.Thos tutorial is going to very much important

for all the new begineers developers. I will teach you very new and latest method and programe or function or javascript

You will be get a lot of knowledge about Javascript.


note: this project will be supproted in all the browser like chrome, firefox, operamini and others.

Note: It's only for laptop of large screen devices not for mobile devices.

you can make responsive it for mobile devices using css if you know css.


About this project

In this project We will be create a car game. We will be handle it by keyboard (up,down,left,right) keys.

We have to need some car pictures for making car design. In this car there will be many other cars which were running against

our car. If our car will hit any car then the game will be finish. On the top corner of the pc screen We will be see score board

It will be increasing.


I will be give you source code for this project. You can pest it in your code editor and The game will be run.


To complete this project follow these steps


1. Make a file named by index.html


Our first step is to make a file named by index.html. In this file we will be write simple html5 codes. and we will be desing

road. and our remoting car. We will be also create other five car in this javacsript.

Then copy the code below under the line 


<!DOCTYPE html>

<html lang="en">

<head>

<title>new site</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="css/bootstra.min.css">

</head>

    <body>


             <div class="content"></div>

              <div class="road hide">

<div class="car"></div>

              </div>

<div class="startscreen">Ravish Mukkar game developer <br>

start the game</div>

<div class="score">

</div>

            </div>

<script src="main.js"></script>  

</body>

</html>


2. Make a file name by style.css


Our second step to make a  file na,ed by style.css

In this file we will be decorate out html tags like car road etc.

copy the code under below under the line and pest it in your code editor


<style type="text/css">

body{

margin: 0px;

padding:0px;

}

.content{

width:100%;

height: 100vh;

margin:0px;

position: relative;

overflow: hidden;

}

.road{

position: absolute;

top:50%;

left:50%;

transform: translate(-50%,-50%);

-webkit-transform:translate(-50%,-50%);

height: 100vh;

width:90%;

background: black;

overflow:hidden;

}

.startscreen{

position: absolute;

top:50%;

left:50%;

transform: translate(-50%,-50%);

-webkit-transform:translate(-50%,-50%);

width: 70%;

height: 30%;

background: red;

box-shadow: 20px 20px 20px 0px rgba(0.3,0,0,0.3);

z-index:99;

display: flex;

justify-content: center;

align-items: center;

text-align: center;

cursor: pointer;

color: #fff;

}

.hide{

              display: none;

}

.car{

position: absolute;

bottom: 5%;

left:10%;

height:90px;

width:55px;

background-image: url('img/car.jpg');

background-size: contain;

background-repeat: no-repeat;

z-index:9;


}

.line{

position: absolute;

background: #fff;

height: 100px;

width:10px;

top:0px;

left:50%;

}

.enemycar{

position: absolute;

top:100px;

height:120px;

width:60px;

background-size: contain;

background-repeat: no-repeat;

z-index:9;

  

}

.enemycarfast{

position: absolute;

top:10px;

height:100px;

width:55px;

background: none;

background-image: url('img/1.jpg');

transform: rotate(180deg);

background-size: contain;

background-repeat: no-repeat;

z-index:9;

background-color: red;

}

.score{

position: absolute;

left:30px;

top:20px;

background: red;

padding: 20px 50px;

box-shadow: 0px 0px 0px 2px rgba(0.3,0,0,0.3);

font-size: 20px;

color: #fff;

}

.finish{

position: absolute;

top:50%;

left:50%;

transform: translate(-50%,-50%);

-webkit-transform:translate(-50%,-50%);

height: 100px; 

width:230px;

}

.fa-arrow-up{

position: absolute;

bottom: 10px;

left:10px;

background-color: red;

padding: 10px 20px;

}

</style>


3. Make a fiule named by main.js


In this file we will write aal the javascript code. By this code our game will be run properly

copy all the code below under the line and pest it in your main.js file


const startscreen = document.querySelector('.startscreen');

const road = document.querySelector('.road');

const car = document.querySelector('.car');

const scoreitem = document.querySelector('.score');

const fa = document.querySelector('.fa');

// const restart = document.querySelector('.finish');



document.addEventListener('keydown', keyDown);

document.addEventListener('keyup', keyUp);


let keys = {

ArrowUp : false,

   ArrowDown : false,

   ArrowLeft : false,

   ArrowRight : false

}

var player  = {

speed : 10,

enemycar : 4,

turn : 5,

enemycarfast : 3

};



var score = {};


function keyDown(e){

    e.preventDefault();

keys[e.key] = true;

console.log(keys);

}

function keyUp(e){

    e.preventDefault();

    keys[e.key] = false;

}

function isCollide(a,b){

aRect = a.getBoundingClientRect();

bRect = b.getBoundingClientRect();


return !((aRect.bottom < bRect.top) || (aRect.top > bRect.bottom) || (aRect.right < bRect.left) || (aRect.left > bRect.right));

}

function movelines() {

let lineroad = document.querySelectorAll('.line');

lineroad.forEach(function(item) {

if(item.y > 1000){

item.y -= 1200;

}

item.y += player.speed;

item.style.top = item.y + "px"; 

})

}

function endGame(){

player.start = false;

}

function restartgame(){

player.start = true;

console.log("yes is it");

}


scoreitem.addEventListener('click',restartgame);



function moveenemycar(car) {

const enemycar = document.querySelectorAll('.enemycar');


enemycar.forEach(function(item) {

if(isCollide(car,item)){

road.classList.add('hide');

scoreitem.classList.add('finish');

endGame();

}


if(item.y >= 800){

item.y = -850;

item.style.left = Math.floor(Math.random()*1170) + "px";  

}

   


// // console.log(turncar);

item.y += player.enemycar;

item.style.top = item.y + "px";

})

}




function gameplay() {


if(player.start){

movelines();

moveenemycar(car);


fa.addEventListener('click',function(){

player.y -= player.turn;

})


if(keys.ArrowUp && player.y > 10){

player.y -= player.turn;

}

if(keys.ArrowDown && player.y < 500){

player.y += player.turn;

}

if(keys.ArrowLeft && player.x > 0){

player.x -= player.turn;

}

if(keys.ArrowRight && player.x < 1170){

player.x += player.turn;

}

car.style.top = player.y + "px";

car.style.left = player.x + "px";

  

           scoreitem.innerText = "score :" + score.scorerecord++;


window.requestAnimationFrame(gameplay);

}

}


const pictures = ['1','2','3','4','5','2','5'];


  startscreen.addEventListener('click', start)

  

 

  function start() {


  road.classList.remove('hide');

    startscreen.classList.add('hide');

  player.start = true;

  score.scorerecord = 0;

  window.requestAnimationFrame(gameplay);

 

      player.x = car.offsetLeft;

  player.y = car.offsetTop;

for(var i=0; i<8; i++){

var line = document.createElement('div');

line.setAttribute("class","line");

road.appendChild(line);

line.y = (150*i);

line.style.top = line.y + "px";  

  }


 for(var i=0; i < 10; i++){

var enemycar = document.createElement('div');

enemycar.setAttribute("class","enemycar");

road.appendChild(enemycar);

enemycar.y = ((i + 1) * 300) * -1;

enemycar.x = Math.floor(Math.random()*1170);

enemycar.style.backgroundImage = `url('img/${pictures[i]}.jpg')`

enemycar.style.top = enemycar.y + "px";  

enemycar.style.left =enemycar.x + "px";  

  }



}


after complete these three steps your game will be run properly.

Don't forget to share this artical in your friends






No comments:

Post a Comment

thanks for your comments

Post Top Ad