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!

Aykhan Gasimzade

Full Stack Developer

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"

Aykhan Gasimzade

Para kazanma

CMD Kodları

Diğer

Sosyal medya

Ücretsiz

Blogger

HTML5

Tanıtım

PHP

GitHub®

Laravel

Javascript

Bilgisayar

Teknoloji

Android

WEB

Programlama

Python

React

SEO

Webtasarım

Siber

Projeler

Wordpress

Ara

"Wordpress" ile ilgili

WooCommerce nedir? WooCommerce nasıl çalışır?

Beni izleyebilirsin