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!
