JavaScript Dinozor Oyunu Yapımı – Web Tasarım & Programlama

Flash playerın bittiği şu zamanda artık tarayıcı oyunlarının JavaScript dilini kullanarak yazıyoruz. Bu yazıda da sizlere javascript kullanarak basit bir oyun yapımını göstereceğim.

Chrome tarayıcısında internet bağlantısı gittiği zaman basit bir dinozor oyunu gelir. Sonsuza kadar oynayabileceğiniz bu oyunun en basit halini gösteren kodları aşağıda paylaşıyorum. Videoyu beğenirseniz destek olmak için beğenmeyi uyunutmayın.

Demo İçin Tıklayın

Oyunun yapılış videosunu izlemek için videoya tıklayın.

Oyunun HTML kodları:

<!DOCTYPE html>
<html lang=”tr” onclick=”zipla()”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>tasarimkodlama.com</title>
<link rel=”stylesheet” href=”https://www.yazilimkodlama.com/javascript/javascript-dinozor-oyunu-yapimi/style.css”>
</head>
<body>

<!DOCTYPE html>

<head>

<title>tasarimkodlama.com</title>

</head>

<body>

</div>

</body>

</html>

Oyunun CSS kodları:

*{
margin:0;
padding: 0;
}
body{
background: #000;
}

#oyun{
width: 800px;
height: 200px;
border:1px solid #000;
background: #fff;
margin:100px auto;
position: relative;
overflow:hidden;
}

#trex{
position: absolute;
width: 39px;
height: 42px;
background: url(trex.png);
bottom:0;

}
.trex-animate{
animation: trex .5s linear;
}

#kaktus{
position: absolute;
width: 23px;
height: 46px;
background: url(kaktus.png);
bottom: 0;
left:775px;
}
.kaktus-animate{
animation:kaktus 2s linear infinite;
}

@keyframes kaktus{
0%{left:775px;}
100%{left:-40px}
}
@keyframes trex{
0%{bottom:0px;}
25%{bottom:70px;}
75%{bottom:70px;}
100%{bottom:0px;}

}

margin:0;

padding: 0;

}

body{

background: #000;

}

#oyun{

width: 800px;

height: 200px;

border:1px solid #000;

background: #fff;

margin:100px auto;

position: relative;

overflow:hidden;

}

#trex{

position: absolute;

width: 39px;

height: 42px;

background: url(trex.png);

bottom:0;

}

.trex-animate{

animation: trex .5s linear;

}

#kaktus{

position: absolute;

width: 23px;

height: 46px;

background: url(kaktus.png);

bottom: 0;

left:775px;

}

.kaktus-animate{

animation:kaktus 2s linear infinite;

}

@keyframes kaktus{

0%{left:775px;}

100%{left:-40px}

}

@keyframes trex{

0%{bottom:0px;}

25%{bottom:70px;}

75%{bottom:70px;}

100%{bottom:0px;}

}

Oyunun JavaScript kodları:

const trex=document.querySelector(“#trex”);
const kaktus=document.querySelector(“#kaktus”);

function zipla(){

if(kaktus.classList!=”kaktus-animate”)
{
kaktus.classList.add(“kaktus-animate”);
}

if(trex.classList!=”trex-animate”)
{
trex.classList.add(“trex-animate”);
setTimeout(function(){
trex.classList.remove(“trex-animate”);
},500);
}
}

var carpismaKOntrol =setInterval(function(){

var trexBottom =parseInt(window
.getComputedStyle(trex)
.getPropertyValue(“bottom”));

var kaktusLeft =parseInt(window
.getComputedStyle(kaktus)
.getPropertyValue(“left”));

if(kaktusLeft > 0 && kaktusLeft < 40 && trexBottom < 40){

kaktus.classList.remove(“kaktus-animate”);
kaktus.style.display=”none”;
alert(“oyun bitti”);
}
},10);

const trex=document.querySelector(“#trex”);

const kaktus=document.querySelector(“#kaktus”);

function zipla(){

if(kaktus.classList!=“kaktus-animate”)

{

kaktus.classList.add(“kaktus-animate”);

}

if(trex.classList!=“trex-animate”)

{

trex.classList.add(“trex-animate”);

setTimeout(function(){

trex.classList.remove(“trex-animate”);

},500);

}

var carpismaKOntrol =setInterval(function(){

var trexBottom =parseInt(window

.getComputedStyle(trex)

.getPropertyValue(“bottom”));

var kaktusLeft =parseInt(window

.getComputedStyle(kaktus)

.getPropertyValue(“left”));

if(kaktusLeft > 0 && kaktusLeft < 40 && trexBottom < 40){

kaktus.classList.remove(“kaktus-animate”);

kaktus.style.display=“none”;

alert(“oyun bitti”);

}

},10);

Oyundaki görseller: