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