JavaScript kullanarak Dinozor Oyunu yapmak oldukça eğlenceli bir deneyim olabilir. Dinozor Oyunu, internet bağlantınız kesildiğinde Google Chrome tarayıcısında oynanabilen basit bir oyun olmasıyla tanınır. Aşağıdaki adımları takip ederek, benzer bir oyunu JavaScript kullanarak yapabilirsiniz:
HTML Dosyası Oluşturma: Öncelikle, bir HTML dosyası oluşturmanız gerekiyor. Bu dosyada, oyunun çalışacağı canvas elementi için bir alan ve oyun için gerekli olan butonlar, skor alanı gibi bileşenleri oluşturabilirsiniz.
JavaScript Dosyası Oluşturma: Oluşturduğunuz HTML dosyasına bir JavaScript dosyası ekleyin. Bu dosya, oyunun çalışmasını sağlayacak JavaScript kodlarını içerecektir.
Oyun Alanı Oluşturma: JavaScript dosyanızda, oyun alanınızı canvas elementine bağlamak için getContext() yöntemini kullanabilirsiniz. Ayrıca, Dinozor karakterini ve engelleri oluşturmak için gerekli olan görselleri yükleyebilirsiniz.
Dinozor Hareketlerini Ayarlama: Dinozor karakterinin hareketlerini tanımlayan kodları yazın. Örneğin, Dinozorun zıplamasını sağlayan bir fonksiyon yazabilirsiniz.
Engelleri Oluşturma: Engelleri oluşturmak için bir fonksiyon yazmanız gerekiyor. Bu fonksiyon, rasgele engel yerleri belirleyecek ve engellerin hareketlerini ayarlayacaktır.
Çarpışma Kontrolleri: Dinozor engellerle çarpıştığında, oyunun sonlandırılmasını sağlayan kodları yazın.
Skorlama: Oyunun skorlama mekanizmasını kodlayın. Engelleri aştıkça, oyuncunun skoru artacaktır.
Oyunun Başlatılması: JavaScript dosyanızda, oyunun başlatılmasını sağlayacak bir fonksiyon yazın. Bu fonksiyon, oyunu başlatan ve Dinozorun hareketlerini kontrol eden kodları içerecektir.
Yukarıdaki adımları tamamladıktan sonra, HTML dosyanızı açın ve JavaScript dosyanızı bağlayın. Oyununuz hazır olduğunda, tarayıcınızda açın ve oynayın! Bu basit adımlar, size bir Dinozor Oyunu yapmanın temel adımlarını gösterir. Oyunu daha da geliştirebilir ve özelleştirebilirsiniz.
<!DOCTYPE html>
<html>
<head>
<title>Dinozor Oyunu</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Dinozor Oyunu</h1>
<p>Skor: <span id="score">0</span></p>
<canvas id="canvas" width="800" height="400"></canvas>
<script>
// canvas elementini seç
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// Dinozor resmini yükle
var dinoImg = new Image();
dinoImg.src = "dino.png";
// Engellerin resmini yükle
var cactusImg = new Image();
cactusImg.src = "cactus.png";
// Dinozorun özelliklerini tanımla
var dino = {
x: 50,
y: 350,
width: 50,
height: 50,
jumping: false,
jumpCount: 0,
speed: 5,
score: 0
};
// Engellerin özelliklerini tanımla
var cactus = {
x: 800,
y: 360,
width: 50,
height: 50,
speed: 5
};
// Dinozor karakterinin hareketlerini kontrol et
document.addEventListener("keydown", function(event) {
if (event.code === "Space" && dino.jumping === false) {
dino.jumping = true;
dino.jumpCount = 10;
}
});
// Engelleri hareket ettir
function moveCactus() {
cactus.x -= cactus.speed;
if (cactus.x < -50) {
cactus.x = 800;
dino.score++;
document.getElementById("score").innerHTML = dino.score;
}
}
// Dinozor karakterinin zıplamasını kontrol et
function jump() {
if (dino.jumping === true) {
dino.y -= dino.jumpCount;
dino.jumpCount--;
if (dino.jumpCount < 0) {
dino.jumping = false;
dino.jumpCount = 10;
}
}
}
// Oyun alanını temizle ve tekrar çiz
function draw() {
ctx.clearRect(0, 0, 800, 400);
ctx.drawImage(dinoImg, dino.x, dino.y, dino.width, dino.height);
ctx.drawImage(cactusImg, cactus.x, cactus.y, cactus.width, cactus.height);
// Çarpışma kontrolü
if (cactus.x < dino.x + dino.width && cactus.x + cactus.width > dino.x &&
cactus.y < dino.y + dino.height && cactus.y + cactus.height > dino.y)
{
alert("Oyun Bitti!");
location.reload();
}
requestAnimationFrame(draw);
moveCactus();
jump();
}
// Oyunu başlat
draw();
</script>
</body>
</html>
```
Bu örnekte, oyunun mekaniği basit bir şekilde işlenmiştir. Dinozor karakterini “Space” tuşuna basarak zıplatabilirsiniz. Engellerin hareketi ise moveCactus() fonksiyonu ile gerçekleştirilir. Oyun alanını temizlemek ve Dinozor karakteri ile engelleri tekrar çizmek için draw() fonksiyonu kullanılır. Ayrıca, jump() fonksiyonu ile de Dinozor karakterinin zıplama mekanizması oluşturulmuştur. Çarpışma kontrolü ise karakter ve engel arasındaki pozisyonları hesaplayarak gerçekleştirilir. Oyun sonlandığında, oyunu yeniden başlatmak için sayfa yenilenir.
Not: Bu örnek kod, daha gelişmiş bir Dinozor Oyunu yapmak için yeterli değildir. Bu örnek, JavaScript ve canvas kullanımına örnek teşkil etmek amacıyla verilmiştir.
Bu uygulamada herhangi bir sorun yaşarsanız aşağıya yorum olarak bırakabilirsiniz. Bunun yanı sıra web sitemizdeki diğer hazır Java programlama örneklerine ulaşmak için bu linke tıklayabilirsiniz.