Merhaba! Ben Aykhan, 1999 doğumlu bir Azerbaycanlıyım ve 2017 yılından bu yana programlamayla ilgileniyorum. Teknolojinin büyülü dünyası beni her zaman etkilemiştir ve bu merakımı kendi blogumda paylaşarak daha geniş bir kitleyle buluşturmayı amaçlıyorum.
"Adım adım web oyun oluşturma: Sarı Kutu Yakalama Oyunu"
Web geliştirme, etkileşimli ve eğlenceli oyunlar oluşturmanın harika bir yoludur. Bu makalede, adım adım bir oyun oluşturacağız: Sarı Kutu Yakalama Oyunu. Bu oyun, temel HTML, CSS ve JavaScript bilgisiyle başlayanlar için mükemmel bir başlangıç noktasıdır.
Adım 1: HTML Yapısını Oluşturma
İlk adım, oyunun temel yapısal bileşenlerini içeren bir HTML dosyası oluşturmaktır. Bu dosyayı index.html olarak adlandırabiliriz. İşte HTML dosyamızın temel yapısı:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sarı Kutu Yakalama Oyunu</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="game-container">
<div id="box"></div>
<p id="score">Skor: <span id="score-value">0</span></p>
</div>
<script src="script.js"></script>
</body>
</html>
Adım 2: CSS ile Stil Verme
Şimdi, oyunun görünümünü şekillendirmek için CSS kullanacağız. Bu dosyayı styles.css olarak adlandırabiliriz. İşte CSS dosyamızın içeriği:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
#game-container {
position: relative;
width: 400px;
height: 400px;
background-color: lightgray;
}
#box {
position: absolute;
width: 50px;
height: 50px;
background-color: yellow;
cursor: pointer;
}
#score {
position: absolute;
top: 10px;
right: 10px;
font-size: 18px;
}
Adım 3: JavaScript ile Oyun Mantığını Oluşturma
Son adım, oyunun mantığını ve etkileşimlerini JavaScript kullanarak oluşturmaktır. Bu dosyayı script.js olarak adlandırabiliriz. İşte JavaScript dosyamızın içeriği:
const box = document.getElementById('box');
const scoreValue = document.getElementById('score-value');
let score = 0;
function updateScore() {
score++;
scoreValue.textContent = score;
}
function randomPosition() {
const x = Math.random() * 350; // X koordinatı için rastgele bir değer (400 - kutu genişliği)
const y = Math.random() * 350; // Y koordinatı için rastgele bir değer (400 - kutu yüksekliği)
return { x, y };
}
box.addEventListener('click', function() {
updateScore();
const pos = randomPosition();
box.style.left = `${pos.x}px`;
box.style.top = `${pos.y}px`;
});
Tebrikler! Artık basit bir oyunu adım adım oluşturmanın temellerini öğrendiniz. Bu makaleyi takip ederek Sarı Kutu Yakalama Oyunu'nu oluşturmayı başardınız. Şimdi bu oyunu daha da geliştirebilir ve kişisel dokunuşlarınızı ekleyebilirsiniz. Örneğin, zamanlayıcı ekleyebilir veya farklı renklerde kutular ekleyebilirsiniz. Tekrar oynarken eğlenceli vakit geçirmenizi dileriz!
#Yenilikler
#Web
#Web Geliştirme
#Oyun Geliştirme
#Oyun nasıl geliştirilir?
#Oyun geliştirme rehberi
#Oyun programlama
#Oyun programlama dersleri
#Oyun programlama rehberi
#Proje fikirleri
#Başlanğıc düzey proje fikirleri
#Adım adım web oyun oluşturma
#Javascript ile oyun
#Html ile oyun
#CSS ile oyun
#HTML5 oyunu
#CSS3 oyunu
#Sarı Kutu oyunu
#Sarı Kutu Yakalama Oyunu
#Web oyunlar
#Oyun
Aykhan Gasimzade
Full Stack Developer
Beni izleyebilirsin
New Mix Club All Rights Reserved © 2024