Untitled
unknown
plain_text
13 days ago
10 kB
2
Indexable
<!DOCTYPE html>
<html>
<head>
<title>Chess App</title>
<style>
body {
background-color: #f0f2f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}
#gameBoard {
border: 3px solid #ddd;
background-color: transparent;
}
.piece {
cursor: pointer;
transition: transform .2s;
}
.black-piece { background-color: #d4d6d7; }
.white-piece { background-color: #f8f9fa; }
#status {
margin-top: 30px;
font-size: 24px;
color: #5865f2;
}
button {
padding: 5px 10px;
font-size: 16px;
cursor: pointer;
background-color: #e7e8e9;
border: none;
color: #6c757d;
transition: background-color 0.3s;
}
button:hover {
background-color: #c0c0c0;
}
</style>
</head>
<body>
<div id="gameBoard"></div>
<div id="status">White's Turn</div>
<button onclick="startGame()">Start Game</button>
<!-- Chess pieces will be dynamically created and modified -->
<script>
const canvas = document.getElementById('gameBoard');
const ctx = canvas.getContext('2d');
// Initial board setup
let pieceArray = [];
let selectedPiece;
let currentPlayer;
// Set up the chessboard grid
function createSquare(x, y) {
const square = document.createElement('div');
square.className = 'piece';
square.style.left = x + 'px';
square.style.top = y + 'px';
square.dataset.index = Math.floor((x / 8) * 8) + (y / 1);
// Add hover effect
square.addEventListener('mouseover', () => {
setTimeout(() => {
selectedPiece = { x, y };
square.classList.add('black-piece' if (currentPlayer === 'white');
square.classList.remove('black-piece' if currentPlayer === 'white');
}, 100);
});
return square;
}
function createBoard() {
pieceArray = [];
for(let col = 0; col < 8; col++) {
for(let row = 0; row < 8; row++) {
const div = document.createElement('div');
div.className = 'piece';
div.dataset.index = Math.floor((col / 8) * 8) + (row);
pieces[col][row] = {
piece: '',
color: currentPlayer === 'white' ? 'black' : 'white',
position: {x: col, y: row}
};
div.addEventListener('click', () => getPieceClick(div.dataset.index));
if(col > 0) {
setTimeout(() => swapPieces(col - 1, col), 50);
}
}
}
return pieces;
}
function initializeBoard() {
pieceArray = [];
for(let col = 0; col < 8; col++) {
for(let row = 0; row < 8; row++) {
if(pieces[col][row].piece) {
createSquare(col, row);
}
}
}
// Draw the board
for(let x = 0; x < 8; x++) {
drawBoard(x);
}
}
function drawBoard(x) {
ctx.clearRect(0, 0, 640, 480);
const offset = (canvas.width / 2) - (640 * 0.5);
for(let row = 0; row < 8; row++) {
for(let col = 0; col < 8; col++) {
// Draw the piece
ctx.fillStyle = pieces[col][row].piece ? '#'.repeat(pieces[col][row].color === 'white' ? 7 : 1) .substr(pieces[col][row].position.y, -2).substr(0, -2) : '#';
ctx.fillRect(col * 8 + offset, row * 8, 8, 8);
// Draw the empty square
if(pieces[col][row].piece === '') {
ctx.fillStyle = '#.##..#';
ctx.fillRect(col * 8 + offset, row * 8, 8, 8);
}
}
}
// Add status text
ctx.fillStyle = '#';
ctx.font = '24px Arial';
ctx.textAlign = 'center';
ctx.fillText(`White's Turn`, 30, 615);
}
function createPiece() {
const pieceClass = pieces[col][row].color === 'white' ? '.black-piece.' : '.white-piece.';
const color = pieces[col][row].color;
const position = {x: col, y: row};
if(pieceClass) {
document.getElementById('gameBoard').appendChild(pieceClass);
} else {
createSquare(col, row);
}
}
function getPieceClick(index) {
selectedPiece = { x: pieces[index].position.x, y: pieces[index].position.y };
setCurrentPlayer(pieces[index].color === 'white' ? currentPlayer : -currentPlayer);
}
function swapPieces(col1, col2) {
const piece1 = pieces[col1];
const piece2 = pieces[col2];
[pieceArray[col1], pieceArray[col2]] =
[pieceArray[col2], pieceArray[col1]];
for(let i = 0; i < pieceArray.length; i++) {
let piece = pieceArray[i];
if(piece.piece !== null) {
pieces[piece.color][piece.position.y] = piece1.pieces[i].piece;
pieces[piece.color][piece.position.x] = piece2.pieces[i].piece;
}
}
}
function startGame() {
currentPlayer = 'white';
initializeBoard();
createPiece(col, row);
// Initial move validation (you can add more logic here)
if(pieces[col][row].color === 'black') {
let isValidMove = false;
switch(pieces[col][row].piece) {
case 'rook':
isValidMove = isRookMove(col, row);
break;
case 'knight':
isValidMove = isKnightMove(col, row);
break;
default:
isValidMove = isOtherPieceMove(col, row); // Add more validation
}
ifisValidMove) {
createSquare(col, row).click();
return true;
} else {
alert('Invalid move');
return false;
}
}
console.log(currentPlayer === 'white' ? 'White has started.' : 'Black has started.');
}
function isRookMove(x: number, y: number): boolean {
// Handle edge cases
if(x < 0 || x >= 8 || y < 0 || y >= 8) return false;
const color = currentPlayer === 'white' ? 'black' : 'white';
if(color !== pieceColor) return false;
const squares = [ {x: -1, y}, {-2, y}, {-3, y}, {-4, y},
{y, x + 1}, {y, x + 2}, {y, x + 3}, {y, x +4} ];
for(let square of squares) {
if(square.y > 0 || square.x < 0) return false;
}
// Check all possible moves
const dx = color === 'white' ? -1 : 1;
const dy = color === 'white' ? 1 : -1;
for(let i = 1; i <= 3; i++) {
if(dx !== dx * i || dy !== dy * i) return false;
}
return true;
}
function isKnightMove(x: number, y: number): boolean {
// Handle edge cases
if(x < 0 || x >= 8 || y < 0 || y >= 8) return false;
const color = currentPlayer === 'white' ? 'black' : 'white';
if(color !== pieceColor) return false;
const squares = [
{x: -1, y}, {-2, y}, {-3, y}, {-4, y},
{y, x + 1}, {y, x + 2}, {y, x + 3}, {y, x +4}
];
for(let square of squares) {
if(square.y > 0 || square.x < 0) return false;
}
// Check all possible moves
const dx = color === 'white' ? -1 : 1;
const dy = color === 'white' ? 1 : -1;
for(let i = 1; i <= 3; i++) {
if(dx !== dx * i || dy !== dy * i) return false;
}
return true;
}
function isOtherPieceMove(x: number, y: number): boolean {
// Handle edge cases
if(x < 0 || x >= 8 || y < 0 || y >= 8) return false;
const color = currentPlayer === 'white' ? 'black' : 'white';
if(color !== pieceColor) return false;
const squares = [
{x: -1, y}, {-2, y}, {-3, y}, {-4, y},
{y, x + 1}, {y, x + 2}, {y, x + 3}, {y, x +4}
];
for(let square of squares) {
if(square.y > 0 || square.x < 0) return false;
}
const dx = color === 'white' ? -1 : 1;
const dy = color === 'white' ? 1 : -1;
for(let i = 1; i <= 3; i++) {
if(dx !== dx * i || dy !== dy * i) return false;
}
return true;
}
function swapPieces(col1, col2): void {
const piece1 = pieces[col1];
const piece2 = pieces[col2];
[pieceArray[col1], pieceArray[col2]] =
[pieceArray[col2], pieceArray[col1]];
for(let i = 0; i < pieceArray.length; i++) {
let piece = pieceArray[i];
if(piece.piece !== null) {
pieces[col][i].piece = piece1.pieces[i].piece;
pieces[col2][i].piece = piece2.pieces[i].piece;
}
}
}
// Initialize the board
const pieces: { x: number; y: number; color: 'black' | 'white'; position: {x: number, y: number}; }[...]
...
Leave a Comment