React ve Firebase ile Gerçek Zamanlı Çok Oyunculu Bir Oyun Geliştirme: Gladyatör Alay Savaşları

React ve Firebase ile Gerçek Zamanlı Çok Oyunculu Bir Oyun Geliştirme: Gladyatör Alay Savaşları

Merhaba, bugün size React ve Firebase kullanarak nasıl gerçek zamanlı çok oyunculu bir oyun geliştireceğimizi göstereceğim. Bu oyun, **Gladyatör Alay Savaşları** olarak adlandırılacak ve iki oyuncu birbirlerine alaycılık mesajları göndererek savaşacak. Oyuna katılmak için iki oyuncu, oyun sunucularına katılacak ve birbirlerine alay ederek puan kazanmaya çalışacaklar. En fazla puana ulaşan oyuncu oyunu kazanacak.

## Projenin Kurulumu

Öncelikle projemizi kurmamız gerekiyor. Bunun için aşağıdaki adımları izleyeceğiz:

1. **Yeni bir React projesi oluşturun:**
“`bash
npx create-react-app gladiator-taunt-wars
“`
2. **Firebase projesi oluşturun:**

Firebase konsoluna gidin ve yeni bir proje oluşturun. Projenizin adı “gladiator-taunt-wars” olsun. Proje oluşturulduktan sonra, proje ayarlarına gidip “Firestore veritabanı” ve “Realtime Veritabanı” özelliklerini etkinleştirin.

3. **Firebase projesini React uygulamanıza bağlayın:**
“`bash
npm install firebase
“`
Daha sonra, “.env” dosyasına Firebase projenizin kimlik bilgilerini eklemeniz gerekecek:
“`
REACT_APP_FIREBASE_API_KEY=…
REACT_APP_FIREBASE_AUTH_DOMAIN=…
REACT_APP_FIREBASE_PROJECT_ID=…
REACT_APP_FIREBASE_STORAGE_BUCKET=…
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=…
REACT_APP_FIREBASE_APP_ID=…
REACT_APP_FIREBASE_MEASUREMENT_ID=…
“`
4. **Firestore veritabanı yapılandırma:**

Firestore veritabanında “Oyunlar” adında bir koleksiyon oluşturun. Bu koleksiyon, her bir oyun için gerekli bilgileri (oyun adı, oyuncular, puanlar, mesajlar vb.) saklayacak.

## Oyuna Alaycılık Mesajlarını Ekleme

Oyuncuların birbirlerine alaycı mesajlar göndermesini sağlamak için React’te bir mesaj kutusu bileşeni oluşturacağız. Bu bileşeni, oyuncunun mesajını göndermesini ve mesajın gerçek zamanlı olarak karşı oyuncuya gösterilmesini sağlayacak.

### Mesaj Kutusu Bileşeni

“`javascript
import React, { useState } from ‘react’;

const MessageInput = ({ sendMessage }) => {
const [message, setMessage] = useState(”);

const handleSubmit = (event) => {
event.preventDefault();
sendMessage(message);
setMessage(”);
};

return (

);
};

export default MessageInput;
“`

### Mesaj Gösterme Bileşeni

“`javascript
import React, { useState, useEffect } from ‘react’;
import { useFirestore } from ‘react-redux-firebase’;

const MessageList = ({ gameId }) => {
const firestore = useFirestore();
const [messages, setMessages] = useState([]);

useEffect(() => {
const unsubscribe = firestore
.collection(‘Oyunlar’)
.doc(gameId)
.collection(‘Mesajlar’)
.orderBy(‘createdAt’, ‘asc’)
.onSnapshot((snapshot) => {
setMessages(
snapshot.docs.map((doc) => ({
id: doc.id,
…doc.data(),
}))
);
});

return () => unsubscribe();
}, [firestore, gameId]);

return (

);
};

export default MessageList;
“`

## Puan Sistemi

Oyunda puan sistemi de olmalı ki oyuncuların birbiriyle rekabet etmesi sağlansın. Her başarılı alaycı mesaj için oyuncu puan kazanacak. Bu puanlar Firestore veritabanında saklanacak ve gerçek zamanlı olarak güncellenecek.

### Puan Gösterme Bileşeni

“`javascript
import React, { useState, useEffect } from ‘react’;
import { useFirestore } from ‘react-redux-firebase’;

const Scoreboard = ({ gameId }) => {
const firestore = useFirestore();
const [scores, setScores] = useState({});

useEffect(() => {
const unsubscribe = firestore
.collection(‘Oyunlar’)
.doc(gameId)
.onSnapshot((snapshot) => {
setScores(snapshot.data().scores);
});

return () => unsubscribe();
}, [firestore, gameId]);

return (

);
};

export default Scoreboard;
“`

## Oyun Sonu

Bir oyuncu belirli bir puana ulaştığında oyun sona erecek ve kazanan ilan edilecek. Bunun için React’te bir oyun sonu ekranı oluşturacağız. Oyun sonu ekranı, kazanan oyuncunun adını ve puanını gösterecek.

### Oyun Sonu Ekranı Bileşeni

“`javascript
import React from ‘react’;

const GameOverScreen = ({ winner, score }) => {
return (

);
};

export default GameOverScreen;
“`

## Oyunun Görünümünü Tasarlamak

Oyuna kullanıcı dostu bir görünüm vermek için CSS kullanacağız. Oyun, iki oyuncunun alaycı mesajlarını görmesini sağlayacak şekilde düzenlenecektir. Oyuncular ayrıca kendi puanlarını ve karşı oyuncunun puanını göreceklerdir.

### Oyunun Görünümü

“`css
body {
font-family: sans-serif;
}

.container {
display: flex;
justify-content: space-around;
align-items: center;
height: 100vh;
}

.player {
text-align: center;
width: 45%;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}

.message-list {
margin-top: 20px;
}

.message {
margin-bottom: 10px;
}
“`

## Sonuç

Bu makalede, React ve Firebase kullanarak gerçek zamanlı çok oyunculu bir oyun geliştirme adımlarını ele aldık. **Gladyatör Alay Savaşları** adlı oyunumuzda iki oyuncu birbirlerine alaycı mesajlar göndererek savaşır ve puan kazanır. Oyun, Firebase Realtime Veritabanı ile desteklenen gerçek zamanlı mesajlaşma ve puan güncellemelerini kullanarak geliştirildi.

## Kaynaklar

* [React](https://reactjs.org/)
* [Firebase](https://firebase.google.com/)
* [React Redux Firebase](https://github.com/PrescottPreston/react-redux-firebase)

## Önemli Noktalar

* React’te oyun mantığını, Firebase’de ise veritabanını ve gerçek zamanlı iletişimi kullanarak oyun geliştirildi.
* Oyun, kullanıcılar arasında interaktif bir deneyim sunmak için alaycılık mesajlarını ve puan sistemini içeriyor.
* Firebase, gerçek zamanlı güncellemeler ve veritabanı yönetimi için kullanıldı.

#Etiketler
React, Firebase, Çok Oyunculu Oyun, Gerçek Zamanlı Oyun, Gladyatör Alay Savaşları, Alaycılık Mesajları, Puan Sistemi, Oyun Geliştirme, Web Geliştirme, Oyun Programlama, Javascript, Firestore, Realtime Veritabanı