TavlaOyna

Recommanded Videos For You

29 Mart 2025 Cumartesi

<!DOCTYPE html>

<head>

<title>Online Tavla Oyunu</title>

<style>

body {

font-family: 'Arial', sans-serif;

background-color: #f5e6c8;

margin: 0;

padding: 20px;

color: #5a3921;

}

#game-container {

max-width: 1000px;

margin: 0 auto;

background-color: #e8d5b5;

border-radius: 10px;

padding: 20px;

box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);

}

h1 {

text-align: center;

color: #8b4513;

}

#board {

display: flex;

justify-content: space-between;

margin: 30px 0;

position: relative;

}

.quadrant {

display: flex;

flex-wrap: wrap;

width: 45%;

}

.point {

width: 40px;

height: 200px;

margin: 2px;

background-color: #d2a679;

border-radius: 5px;

position: relative;

cursor: pointer;

}

.checker {

width: 36px;

height: 36px;

border-radius: 50%;

margin: 2px auto;

border: 1px solid #333;

}

.white {

background-color: #fff;

}

.black {

background-color: #333;

}

#dice-container {

display: flex;

justify-content: center;

margin: 20px 0;

}

.dice {

width: 60px;

height: 60px;

background-color: white;

border-radius: 10px;

margin: 0 10px;

display: flex;

justify-content: center;

align-items: center;

font-size: 30px;

font-weight: bold;

box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);

cursor: pointer;

}

#game-info {

text-align: center;

margin: 20px 0;

font-size: 18px;

font-weight: bold;

}

#controls {

display: flex;

justify-content: center;

gap: 20px;

}

button {

padding: 10px 20px;

background-color: #8b4513;

color: white;

border: none;

border-radius: 5px;

cursor: pointer;

font-size: 16px;

}

button:hover {

background-color: #a0522d;

}

</style>

</head>

<body>

<h1>Online Tavla Oyunu</h1>

Sıra: <span id="current-player">Beyaz</span> Oyuncuda

</div>

</div>

</div>

</div>

</div>

</div>

<button id="reset-button">Oyunu Sıfırla</button>

</div>

// Oyun durumu

const gameState = {

currentPlayer: 'white', // 'white' veya 'black'

dice1: 0,

dice2: 0,

points: Array(26).fill().map(() => []), // 1-24 noktaları, 0 ve 25 kullanılmıyor

selectedPoint: null,

movesLeft: 0

};

// Tahtayı başlat

function initializeBoard() {

// Noktaları temizle

gameState.points = Array(26).fill().map(() => []);

// Başlangıç pozisyonu

// Beyaz pullar (1-6 ve 12-17 noktaları)

gameState.points[1] = Array(2).fill('white');

gameState.points[12] = Array(5).fill('white');

gameState.points[17] = Array(3).fill('white');

gameState.points[19] = Array(5).fill('white');

// Siyah pullar (24-19 ve 13-8 noktaları)

gameState.points[6] = Array(5).fill('black');

gameState.points[8] = Array(3).fill('black');

gameState.points[13] = Array(5).fill('black');

gameState.points[24] = Array(2).fill('black');

gameState.currentPlayer = 'white';

gameState.dice1 = 0;

gameState.dice2 = 0;

gameState.selectedPoint = null;

gameState.movesLeft = 0;

updateUI();

}

// Kullanıcı arayüzünü güncelle

function updateUI() {

// Noktaları güncelle

const quadrants = {

'top-right': [12, 11, 10, 9, 8, 7],

'top-left': [6, 5, 4, 3, 2, 1],

'bottom-left': [19, 20, 21, 22, 23, 24],

'bottom-right': [13, 14, 15, 16, 17, 18]

};

for (const [quadrantId, points] of Object.entries(quadrants)) {

const quadrant = document.getElementById(quadrantId);

quadrant.innerHTML = '';

points.forEach(pointNum => {

const point = document.createElement('div');

point.className = 'point';

point.dataset.point = pointNum;

// Noktadaki pulları ekle

gameState.points[pointNum].forEach(checkerColor => {

const checker = document.createElement('div');

checker.className = `checker ${checkerColor}`;

point.appendChild(checker);

});

// Tıklama olayı ekle

point.addEventListener('click', () => handlePointClick(pointNum));

// Seçili noktayı vurgula

if (gameState.selectedPoint === pointNum) {

point.style.boxShadow = '0 0 10px 3px gold';

}

quadrant.appendChild(point);

});

}

// Zar bilgilerini güncelle

document.getElementById('dice1').textContent = gameState.dice1;

document.getElementById('dice2').textContent = gameState.dice2;

// Oyuncu bilgisini güncelle

const playerDisplay = document.getElementById('current-player');

playerDisplay.textContent = gameState.currentPlayer === 'white' ? 'Beyaz' : 'Siyah';

playerDisplay.style.color = gameState.currentPlayer === 'white' ? '#333' : '#fff';

playerDisplay.style.backgroundColor = gameState.currentPlayer === 'white' ? '#fff' : '#333';

playerDisplay.style.padding = '2px 10px';

playerDisplay.style.borderRadius = '5px';

}

// Nokta tıklama işlemi

function handlePointClick(pointNum) {

// Eğer zar atılmamışsa veya hamle hakkı yoksa işlem yapma

if (gameState.dice1 === 0 || gameState.movesLeft === 0) return;

const point = gameState.points[pointNum];

// Eğer nokta seçili değilse ve oyuncunun pulu varsa seç

if (gameState.selectedPoint === null) {

if (point.length > 0 && point[point.length-1] === gameState.currentPlayer) {

gameState.selectedPoint = pointNum;

updateUI();

}

// Eğer nokta seçiliyse ve bu noktaya hamle yapılabilirse hamle yap

else {

const fromPoint = gameState.selectedPoint;

const distance = Math.abs(pointNum - fromPoint);

// Hamle geçerli mi kontrol et

if (isValidMove(fromPoint, pointNum)) {

moveChecker(fromPoint, pointNum);

gameState.movesLeft--;

// Hamle bittiyse sıra değiştir

if (gameState.movesLeft === 0) {

gameState.currentPlayer = gameState.currentPlayer === 'white' ? 'black' : 'white';

gameState.dice1 = 0;

gameState.dice2 = 0;

}

gameState.selectedPoint = null;

updateUI();

}

// Hamle geçerli mi kontrol et

function isValidMove(fromPoint, toPoint) {

const distance = Math.abs(toPoint - fromPoint);

const direction = gameState.currentPlayer === 'white' ? 1 : -1;

// Yön kontrolü

if ((toPoint - fromPoint) * direction <= 0) return false;

// Zar değerlerine uygun mu

if (distance !== gameState.dice1 && distance !== gameState.dice2) {

return false;

}

// Hedef noktada rakip pul var mı kontrol et

const targetPoint = gameState.points[toPoint];

if (targetPoint.length > 1 && targetPoint[0] !== gameState.currentPlayer) {

return false;

}

return true;

}

// Pul hareketi

function moveChecker(fromPoint, toPoint) {

const checker = gameState.points[fromPoint].pop();

// Eğer hedef noktada bir rakip pul varsa, onu merkeze al

if (gameState.points[toPoint].length === 1 && gameState.points[toPoint][0] !== checker) {

const hitChecker = gameState.points[toPoint].pop();

const middlePoint = hitChecker === 'white' ? 25 : 0;

gameState.points[middlePoint].push(hitChecker);

}

gameState.points[toPoint].push(checker);

}

// Zar at

function rollDice() {

if (gameState.dice1 !== 0) return; // Zaten zar atılmış

gameState.dice1 = Math.floor(Math.random() * 6) + 1;

gameState.dice2 = Math.floor(Math.random() * 6) + 1;

// Eğer zarlar aynıysa (dubble)

if (gameState.dice1 === gameState.dice2) {

gameState.movesLeft = 4;

} else {

gameState.movesLeft = 2;

}

updateUI();

}

// Olay dinleyicileri

document.getElementById('roll-button').addEventListener('click', rollDice);

document.getElementById('reset-button').addEventListener('click', initializeBoard);

// Oyunu başlat

initializeBoard();

</script>

</body>

</html>

By t.n.r 04:03

const express = require('express');

const http = require('http');

const socketIo = require('socket.io');

const cors = require('cors');

const app = express();

app.use(cors());

const server = http.createServer(app);

const io = socketIo(server, {

cors: {

origin: "*",

methods: ["GET", "POST"]

}

});

// Oyun odaları

const rooms = {};

// Oyun durumu yapısı

const initialGameState = {

players: {},

currentPlayer: 'white',

dice1: 0,

dice2: 0,

points: Array(26).fill().map(() => []),

movesLeft: 0,

status: 'waiting' // 'waiting', 'playing', 'finished'

};

io.on('connection', (socket) => {

console.log('Yeni bağlantı:', socket.id);

// Oda oluşturma

socket.on('createRoom', (username) => {

const roomId = generateRoomId();

rooms[roomId] = {

...JSON.parse(JSON.stringify(initialGameState)),

id: roomId,

players: {

[socket.id]: {

username,

color: 'white'

}

};

socket.join(roomId);

socket.emit('roomCreated', roomId);

console.log(`Oda oluşturuldu: ${roomId}`);

});

// Odaya katılma

socket.on('joinRoom', ({ roomId, username }) => {

if (!rooms[roomId]) {

socket.emit('error', 'Oda bulunamadı!');

return;

}

if (Object.keys(rooms[roomId].players).length >= 2) {

socket.emit('error', 'Oda dolu!');

return;

}

const color = Object.values(rooms[roomId].players)[0].color === 'white' ? 'black' : 'white';

rooms[roomId].players[socket.id] = { username, color };

rooms[roomId].status = 'playing';

socket.join(roomId);

io.to(roomId).emit('playerJoined', rooms[roomId]);

console.log(`${username} odaya katıldı: ${roomId}`);

});

// Zar atma

socket.on('rollDice', (roomId) => {

const room = rooms[roomId];

if (!room || room.dice1 !== 0) return;

room.dice1 = Math.floor(Math.random() * 6) + 1;

room.dice2 = Math.floor(Math.random() * 6) + 1;

room.movesLeft = (room.dice1 === room.dice2) ? 4 : 2;

io.to(roomId).emit('diceRolled', {

dice1: room.dice1,

dice2: room.dice2,

currentPlayer: room.currentPlayer,

movesLeft: room.movesLeft

});

// Hamle yapma

socket.on('makeMove', ({ roomId, fromPoint, toPoint }) => {

const room = rooms[roomId];

if (!room || room.movesLeft <= 0) return;

// Hamle geçerlilik kontrolü

if (isValidMove(room, fromPoint, toPoint)) {

// Pul hareketi

const checker = room.points[fromPoint].pop();

// Rakip pul varsa merkeze al

if (room.points[toPoint].length === 1 &&

room.points[toPoint][0] !== checker) {

const hitChecker = room.points[toPoint].pop();

const middlePoint = hitChecker === 'white' ? 25 : 0;

room.points[middlePoint].push(hitChecker);

}

room.points[toPoint].push(checker);

room.movesLeft--;

// Hamleler bittiyse sıra değiştir

if (room.movesLeft === 0) {

room.currentPlayer = room.currentPlayer === 'white' ? 'black' : 'white';

room.dice1 = 0;

room.dice2 = 0;

}

// Güncel durumu tüm oyunculara gönder

io.to(roomId).emit('gameStateUpdated', room);

}

});

// Bağlantı kesildiğinde

socket.on('disconnect', () => {

console.log('Kullanıcı ayrıldı:', socket.id);

// Odayı temizleme işlemleri

});

function isValidMove(room, fromPoint, toPoint) {

// Önceki örnekteki geçerlilik kontrolünün aynısı

// ...

}

function generateRoomId() {

return Math.random().toString(36).substr(2, 6).toUpperCase();

}

const PORT = process.env.PORT || 3000;

server.listen(PORT, () => {

console.log(`Server ${PORT} portunda çalışıyor`);

});

By t.n.r 04:01

TavlaOyna

Poll

What's Trending in Videoism

Recommanded Videos For You

29 Mart 2025 Cumartesi

Advertisements

Featured Vidoes

Follow us on FaceBook

About