Scribd
Upload
2 views

Chess

code for chess

Uploaded by

Sayantan De
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Chess

code for chess

Uploaded by

Sayantan De
Copyright
© © All Rights Reserved
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