[go: up one dir, main page]
Scribd
Upload
2 views5 pages

Chess

code for chess

Uploaded by

Sayantan De
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views5 pages

Chess

code for chess

Uploaded by

Sayantan De
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

<!

DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiplayer Chess</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
background-color: #f4f4f4;
}

h1 {
margin-bottom: 20px;
}

.board {
display: grid;
grid-template-columns: repeat(8, 50px);
grid-template-rows: repeat(8, 50px);
gap: 0;
margin-bottom: 20px;
}

.square {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
cursor: pointer;
}

.light {
background-color: #f0d9b5;
}

.dark {
background-color: #b58863;
}

.selected {
outline: 2px solid yellow;
}

.chat {
width: 400px;
display: flex;
flex-direction: column;
gap: 10px;
}

.messages {
height: 200px;
overflow-y: auto;
padding: 10px;
border: 1px solid #ccc;
background: #fff;
}

.message-input {
display: flex;
gap: 10px;
}

.message-input input {
flex-grow: 1;
padding: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}

.message-input button {
padding: 5px 10px;
border: none;
background-color: #007bff;
color: white;
border-radius: 4px;
cursor: pointer;
}

.message-input button:hover {
background-color: #0056b3;
}
</style>
</head>

<body>
<h1>Multiplayer Chess</h1>

<div id="board" class="board"></div>

<div class="chat">
<h2>Chat</h2>
<div id="messages" class="messages"></div>
<div class="message-input">
<input id="chatInput" type="text" placeholder="Type a message...">
<button id="sendButton">Send</button>
</div>
</div>

<script>
const boardEl = document.getElementById('board');
const messagesEl = document.getElementById('messages');
const chatInput = document.getElementById('chatInput');
const sendButton = document.getElementById('sendButton');

const pieceEmojis = {
'r': '♜', 'n': '♞', 'b': '♝', 'q': '♛', 'k': '♚', 'p': '♟',
'R': '♖', 'N': '♘', 'B': '♗', 'Q': '♕', 'K': '♔', 'P': '♙'
};

const initialBoard = [
['r', 'n', 'b', 'q', 'k', 'b', 'n', 'r'],
['p', 'p', 'p', 'p', 'p', 'p', 'p', 'p'],
['', '', '', '', '', '', '', ''],
['', '', '', '', '', '', '', ''],
['', '', '', '', '', '', '', ''],
['', '', '', '', '', '', '', ''],
['P', 'P', 'P', 'P', 'P', 'P', 'P', 'P'],
['R', 'N', 'B', 'Q', 'K', 'B', 'N', 'R']
];
let board = JSON.parse(JSON.stringify(initialBoard));
let selectedSquare = null;
let currentPlayer = 'white';
let move = null;

const renderBoard = () => {


boardEl.innerHTML = '';
board.forEach((row, rowIndex) => {
row.forEach((piece, colIndex) => {
const square = document.createElement('div');
square.classList.add('square', (rowIndex + colIndex) % 2 === 0 ? 'light' : 'dark');
square.textContent = pieceEmojis[piece] || '';
square.addEventListener('click', () => handleSquareClick(rowIndex, colIndex));
boardEl.appendChild(square);

if (selectedSquare && selectedSquare.row === rowIndex && selectedSquare.col === colIndex) {


square.classList.add('selected');
}
});
});
};

const handleSquareClick = (row, col) => {


if (!selectedSquare) {
if (board[row][col]) selectedSquare = { row, col };
} else {
if (isValidMove(selectedSquare, { row, col })) {
const piece = board[selectedSquare.row][selectedSquare.col];
board[row][col] = piece;
board[selectedSquare.row][selectedSquare.col] = '';
move = { from: selectedSquare, to: { row, col }, piece };
selectedSquare = null;
currentPlayer = currentPlayer === 'white' ? 'black' : 'white';
sendMove();
} else {
selectedSquare = null;
}
}
renderBoard();
};

const sendMove = () => {


const payload = { type: 'move', move, board };
socket.send(JSON.stringify(payload));
};

const addMessage = (message) => {


const messageEl = document.createElement('div');
messageEl.textContent = message;
messagesEl.appendChild(messageEl);
messagesEl.scrollTop = messagesEl.scrollHeight;
};

sendButton.addEventListener('click', () => {
const message = chatInput.value.trim();
if (message) {
const payload = { type: 'chat_message', message };
socket.send(JSON.stringify(payload));
addMessage(`You: ${message}`);
chatInput.value = '';
}
});

const socket = new WebSocket(`ws://127.0.0.1:8000/ws/game/${prompt('Enter Room Code')}/`);


socket.onmessage = (event) => {
const data = JSON.parse(event.data);
if (data.type === 'chess_move_update') {
move = data.move;
board = data.board;
currentPlayer = currentPlayer === 'white' ? 'black' : 'white';
renderBoard();
addMessage(`${data.player} made a move: ${data.move}`);
} else if (data.type === 'chat_message') {
addMessage(data.message);
}
};

const isValidMove = (from, to) => {


const piece = board[from.row][from.col];
const targetPiece = board[to.row][to.col];

if (to.row < 0 || to.row >= 8 || to.col < 0 || to.col >= 8) return false;

if ((currentPlayer === 'white' && piece.toLowerCase() === piece) ||


(currentPlayer === 'black' && piece.toUpperCase() === piece)) {
return false;
}

switch (piece.toLowerCase()) {
case 'p':
if (from.col === to.col && targetPiece === '' &&
((currentPlayer === 'white' && to.row === from.row - 1) ||
(currentPlayer === 'black' && to.row === from.row + 1))) {
return true;
}
if (Math.abs(from.col - to.col) === 1 && targetPiece !== '' &&
((currentPlayer === 'white' && to.row === from.row - 1) ||
(currentPlayer === 'black' && to.row === from.row + 1))) {
return true;
}
return false;
case 'n':
const rowDiff = Math.abs(from.row - to.row);
const colDiff = Math.abs(from.col - to.col);
return (rowDiff === 2 && colDiff === 1) || (rowDiff === 1 && colDiff === 2);
case 'b':
return Math.abs(from.row - to.row) === Math.abs(from.col - to.col) && !isPathBlocked(from, to);
case 'r':
return (from.row === to.row || from.col === to.col) && !isPathBlocked(from, to);
case 'q':
return (Math.abs(from.row - to.row) === Math.abs(from.col - to.col) ||
from.row === to.row || from.col === to.col) && !isPathBlocked(from, to);
case 'k':
const kingRowDiff = Math.abs(from.row - to.row);
const kingColDiff = Math.abs(from.col - to.col);
return kingRowDiff <= 1 && kingColDiff <= 1;
default:
return false;
}
};

const isPathBlocked = (from, to) => {


const rowDirection = to.row > from.row ? 1 : to.row < from.row ? -1 : 0;
const colDirection = to.col > from.col ? 1 : to.col < from.col ? -1 : 0;
let row = from.row + rowDirection;
let col = from.col + colDirection;

while (row !== to.row || col !== to.col) {


if (board[row][col] !== '') return true;
row += rowDirection;
col += colDirection;
}c

return false;
};

renderBoard();
</script>
</body>

</html>

You might also like