forked from technolyceum/g11-m2
Added boilerplate exercises
This commit is contained in:
BIN
Chess Coding Exercise.pdf
Normal file
BIN
Chess Coding Exercise.pdf
Normal file
Binary file not shown.
218
Update Boilertplate Chess Game Code in Gitea.html
Normal file
218
Update Boilertplate Chess Game Code in Gitea.html
Normal file
@@ -0,0 +1,218 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Chess Coding Exercise</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
line-height: 1.4;
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
border-bottom: 2px solid #3498db;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin: 25px 0;
|
||||
padding: 15px;
|
||||
border-left: 4px solid #3498db;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
color: #2c3e50;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.code {
|
||||
background: #2c3e50;
|
||||
color: white;
|
||||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
margin: 10px 0;
|
||||
font-size: 14px;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.step {
|
||||
margin: 12px 0;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.tip {
|
||||
background: #ffeaa7;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
margin: 15px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.warning {
|
||||
background: #fab1a0;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
margin: 15px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.task {
|
||||
background: #dfe6e9;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Chess Board Coding Exercise</h1>
|
||||
|
||||
<div class="section">
|
||||
<h3 class="section-title">Part 1: Setup Git</h3>
|
||||
|
||||
<div class="step">
|
||||
<strong>1. Check if Git is installed:</strong>
|
||||
<div class="code">git --version</div>
|
||||
If you see a version number, Git is installed. If not, download from <strong>git-scm.com</strong>
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<strong>2. Set your credentials:</strong>
|
||||
<div class="code">git config --global user.name "g11s1"</div>
|
||||
<div class="code">git config --global user.email "g11s1@ict.ru"</div>
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<strong>3. Create and navigate to your folder:</strong>
|
||||
<div class="code">cd Documents</div>
|
||||
<div class="code">mkdir chess-project</div>
|
||||
<div class="code">cd chess-project</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3 class="section-title">Part 2: Get the Code</h3>
|
||||
|
||||
<div class="step">
|
||||
<strong>1. Go to Gitea in your browser:</strong>
|
||||
<div class="code">https://gitea.techshare.cc</div>
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<strong>2. Login with your credentials</strong>
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<strong>3. Fork this repository:</strong>
|
||||
<div class="code">https://gitea.techshare.cc/technolyceum/g11-m2.git</div>
|
||||
Click the "Fork" button to create your own copy
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<strong>4. Clone your forked repository:</strong>
|
||||
<div class="code">git clone https://gitea.techshare.cc/your-username/g11-m2.git</div>
|
||||
Replace "your-username" with your actual Gitea username
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<strong>5. Enter the project folder:</strong>
|
||||
<div class="code">cd g11-m2</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3 class="section-title">Part 3: Coding Tasks</h3>
|
||||
|
||||
<div class="task">
|
||||
<strong>Task 1: CSS Styling</strong>
|
||||
<p>Find the .chess-board CSS and add:</p>
|
||||
<div class="code">width: 400px;
|
||||
height: 400px;
|
||||
display: grid;
|
||||
border: 3px solid gray;</div>
|
||||
</div>
|
||||
|
||||
<div class="task">
|
||||
<strong>Task 2: JavaScript Function</strong>
|
||||
<p>Find the function and replace with:</p>
|
||||
<div class="code">function createChessBoard() {</div>
|
||||
</div>
|
||||
|
||||
<div class="task">
|
||||
<strong>Task 3: For Loops</strong>
|
||||
<p>Find the loops and replace with:</p>
|
||||
<div class="code">for (let row = 0; row < 8; row++) {
|
||||
for (let col = 0; col < 8; col++) {</div>
|
||||
</div>
|
||||
|
||||
<div class="tip">
|
||||
<strong>Test your work:</strong>
|
||||
<ol>
|
||||
<li>Save the HTML file</li>
|
||||
<li>Open it in a browser</li>
|
||||
<li>Click "Create Chess Board"</li>
|
||||
<li>You should see a chess board with 64 squares!</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3 class="section-title">Part 4: Save to Git</h3>
|
||||
|
||||
<div class="step">
|
||||
<strong>1. Check what you changed:</strong>
|
||||
<div class="code">git status</div>
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<strong>2. Add your changes:</strong>
|
||||
<div class="code">git add .</div>
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<strong>3. Commit with a message:</strong>
|
||||
<div class="code">git commit -m "Completed chess board coding exercise"</div>
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<strong>4. Push to your repository:</strong>
|
||||
<div class="code">git push origin main</div>
|
||||
</div>
|
||||
|
||||
<div class="warning">
|
||||
<strong>If asked for credentials:</strong>
|
||||
<ul>
|
||||
<li>Enter your Gitea username</li>
|
||||
<li>Enter your Gitea password</li>
|
||||
<li>If you get errors, try:</li>
|
||||
<div class="code">git push https://gitea.techshare.cc/your-username/g11-m2.git main</div>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<strong>5. Verify on Gitea:</strong>
|
||||
<p>Refresh your repository page in the browser to see your changes</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tip">
|
||||
<strong>What you learned:</strong>
|
||||
<ul>
|
||||
<li>Git setup and configuration</li>
|
||||
<li>Forking and cloning repositories</li>
|
||||
<li>CSS: width, height, grid, border</li>
|
||||
<li>JavaScript: functions, for loops</li>
|
||||
<li>Git: add, commit, push workflow</li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
858
boilerplateHTMLtemplate.html
Normal file
858
boilerplateHTMLtemplate.html
Normal file
@@ -0,0 +1,858 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Learn to Code: Chess Game</title>
|
||||
<style>
|
||||
:root {
|
||||
--board-size: 500px;
|
||||
--grid-size: 8;
|
||||
--cell-size: calc(var(--board-size) / var(--grid-size));
|
||||
--board-shape: square;
|
||||
--light-color: #f0d9b5;
|
||||
--dark-color: #b58863;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
|
||||
color: white;
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 10px;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 30px;
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.controls {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
width: 300px;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.control-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 15px;
|
||||
color: #ffcc00;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
select, button {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
margin-bottom: 15px;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
background: #333;
|
||||
color: white;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
button {
|
||||
background: #4CAF50;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: #45a049;
|
||||
}
|
||||
|
||||
.game-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* === STUDENT TASK 1: COMPLETE THE CHESS BOARD CSS === */
|
||||
.chess-board {
|
||||
/* TODO: Set the width and height to 400px */
|
||||
/* YOUR CODE HERE */
|
||||
|
||||
/* TODO: Use CSS Grid for layout */
|
||||
/* YOUR CODE HERE */
|
||||
|
||||
/* TODO: Add a 3px solid gray border */
|
||||
/* YOUR CODE HERE */
|
||||
|
||||
grid-template-columns: repeat(var(--grid-size), 1fr);
|
||||
grid-template-rows: repeat(var(--grid-size), 1fr);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
|
||||
margin-bottom: 20px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Board shapes */
|
||||
.chess-board.square {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.chess-board.circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.chess-board.triangle {
|
||||
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
|
||||
}
|
||||
|
||||
.cell {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: calc(var(--cell-size) * 0.6);
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.cell.light {
|
||||
background-color: var(--light-color);
|
||||
}
|
||||
|
||||
.cell.dark {
|
||||
background-color: var(--dark-color);
|
||||
}
|
||||
|
||||
.cell.selected {
|
||||
box-shadow: inset 0 0 0 3px #ff0000;
|
||||
}
|
||||
|
||||
.cell.valid-move::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 30%;
|
||||
height: 30%;
|
||||
border-radius: 50%;
|
||||
background: rgba(0, 255, 0, 0.5);
|
||||
}
|
||||
|
||||
.piece {
|
||||
cursor: pointer;
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
|
||||
user-select: none;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.white {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.black {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.status {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
padding: 15px;
|
||||
border-radius: 10px;
|
||||
width: var(--board-size);
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.coordinates {
|
||||
position: absolute;
|
||||
font-size: calc(var(--cell-size) * 0.15);
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.file-coord {
|
||||
bottom: 2px;
|
||||
right: 4px;
|
||||
}
|
||||
|
||||
.rank-coord {
|
||||
top: 2px;
|
||||
left: 4px;
|
||||
}
|
||||
|
||||
/* Accessibility features */
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* Focus styles for accessibility */
|
||||
button:focus, select:focus {
|
||||
outline: 2px solid #ffcc00;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.piece:focus {
|
||||
outline: 2px solid #ffcc00;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* Responsive design */
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.controls {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
:root {
|
||||
--board-size: 350px;
|
||||
}
|
||||
|
||||
.status {
|
||||
width: var(--board-size);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Customizable Chess Game</h1>
|
||||
<p class="description">Change board size, grid dimensions, shape, and colors to create your perfect chess experience! The grid size option changes the number of squares in each row and column.</p>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
<div class="controls">
|
||||
<div class="control-group">
|
||||
<h2>Board Settings</h2>
|
||||
<label for="board-size">Board Size (pixels):</label>
|
||||
<select id="board-size">
|
||||
<option value="400">Small (400px)</option>
|
||||
<option value="500" selected>Medium (500px)</option>
|
||||
<option value="600">Large (600px)</option>
|
||||
</select>
|
||||
|
||||
<label for="grid-size">Grid Size (squares per side):</label>
|
||||
<select id="grid-size">
|
||||
<option value="6">6x6</option>
|
||||
<option value="8" selected>8x8 (Standard Chess)</option>
|
||||
<option value="10">10x10</option>
|
||||
<option value="12">12x12</option>
|
||||
</select>
|
||||
|
||||
<label for="board-shape">Board Shape:</label>
|
||||
<select id="board-shape">
|
||||
<option value="square" selected>Square</option>
|
||||
<option value="circle">Circle</option>
|
||||
<option value="triangle">Triangle</option>
|
||||
</select>
|
||||
|
||||
<label for="light-color">Light Square Color:</label>
|
||||
<select id="light-color">
|
||||
<option value="#f0d9b5" selected>Classic Tan</option>
|
||||
<option value="#eaeaea">Light Gray</option>
|
||||
<option value="#b5d8f0">Light Blue</option>
|
||||
</select>
|
||||
|
||||
<label for="dark-color">Dark Square Color:</label>
|
||||
<select id="dark-color">
|
||||
<option value="#b58863" selected>Classic Brown</option>
|
||||
<option value="#555555">Dark Gray</option>
|
||||
<option value="#1a5fb4">Dark Blue</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<h2>Game Controls</h2>
|
||||
<button id="reset-btn">Reset Game</button>
|
||||
<button id="flip-btn">Flip Board</button>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<h2>Accessibility</h2>
|
||||
<button id="high-contrast-btn">Toggle High Contrast</button>
|
||||
<button id="announce-btn">Announce Game State</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="game-area">
|
||||
<div id="chess-board" class="chess-board square">
|
||||
<!-- Chess board will be generated by JavaScript -->
|
||||
</div>
|
||||
<div class="status" id="game-status">
|
||||
White's turn. Click on a piece to select it.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Game state
|
||||
const gameState = {
|
||||
board: [],
|
||||
selectedPiece: null,
|
||||
currentPlayer: 'white',
|
||||
gameOver: false,
|
||||
flipped: false,
|
||||
gridSize: 8
|
||||
};
|
||||
|
||||
// DOM elements
|
||||
const chessBoard = document.getElementById('chess-board');
|
||||
const gameStatus = document.getElementById('game-status');
|
||||
const boardSizeSelect = document.getElementById('board-size');
|
||||
const gridSizeSelect = document.getElementById('grid-size');
|
||||
const boardShapeSelect = document.getElementById('board-shape');
|
||||
const lightColorSelect = document.getElementById('light-color');
|
||||
const darkColorSelect = document.getElementById('dark-color');
|
||||
const resetBtn = document.getElementById('reset-btn');
|
||||
const flipBtn = document.getElementById('flip-btn');
|
||||
const highContrastBtn = document.getElementById('high-contrast-btn');
|
||||
const announceBtn = document.getElementById('announce-btn');
|
||||
|
||||
// Initialize the game
|
||||
initializeGame();
|
||||
|
||||
// Event listeners for controls
|
||||
boardSizeSelect.addEventListener('change', updateBoardSize);
|
||||
gridSizeSelect.addEventListener('change', updateGridSize);
|
||||
boardShapeSelect.addEventListener('change', updateBoardShape);
|
||||
lightColorSelect.addEventListener('change', updateBoardColors);
|
||||
darkColorSelect.addEventListener('change', updateBoardColors);
|
||||
resetBtn.addEventListener('click', resetGame);
|
||||
flipBtn.addEventListener('click', flipBoard);
|
||||
highContrastBtn.addEventListener('click', toggleHighContrast);
|
||||
announceBtn.addEventListener('click', announceGameState);
|
||||
|
||||
// Initialize the chess board
|
||||
function initializeGame() {
|
||||
createBoard();
|
||||
setupPieces();
|
||||
updateGameStatus();
|
||||
}
|
||||
|
||||
/* === STUDENT TASK 2: CREATE THE CHESS BOARD FUNCTION === */
|
||||
// TODO: Create the createChessBoard function
|
||||
/* YOUR CODE HERE */ {
|
||||
const board = document.getElementById('chess-board');
|
||||
// Code to create chess squares
|
||||
|
||||
// Clear any existing board
|
||||
board.innerHTML = '';
|
||||
|
||||
/* === STUDENT TASK 3: CREATE NESTED FOR LOOPS === */
|
||||
// TODO: Create nested for loops to make an 8x8 grid
|
||||
// Outer loop for rows (0 to 7)
|
||||
/* YOUR CODE HERE */ {
|
||||
// Inner loop for columns (0 to 7)
|
||||
/* YOUR CODE HERE */ {
|
||||
|
||||
// Create a cell element
|
||||
const cell = document.createElement('div');
|
||||
cell.className = `cell ${(row + col) % 2 === 0 ? 'light' : 'dark'}`;
|
||||
cell.dataset.row = row;
|
||||
cell.dataset.col = col;
|
||||
|
||||
// Add coordinates for accessibility
|
||||
const fileCoord = document.createElement('span');
|
||||
fileCoord.className = 'coordinates file-coord';
|
||||
fileCoord.textContent = String.fromCharCode(97 + col);
|
||||
|
||||
const rankCoord = document.createElement('span');
|
||||
rankCoord.className = 'coordinates rank-coord';
|
||||
rankCoord.textContent = 8 - row;
|
||||
|
||||
cell.appendChild(fileCoord);
|
||||
cell.appendChild(rankCoord);
|
||||
|
||||
cell.addEventListener('click', handleCellClick);
|
||||
board.appendChild(cell);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Set up the initial chess pieces
|
||||
function setupPieces() {
|
||||
// Clear any existing pieces
|
||||
document.querySelectorAll('.piece').forEach(piece => piece.remove());
|
||||
|
||||
const gridSize = gameState.gridSize;
|
||||
|
||||
// Initialize empty board
|
||||
gameState.board = Array(gridSize).fill().map(() => Array(gridSize).fill(''));
|
||||
|
||||
// Set up pieces based on grid size
|
||||
setupPiecesForGridSize(gridSize);
|
||||
|
||||
// Place pieces on the board
|
||||
for (let row = 0; row < gridSize; row++) {
|
||||
for (let col = 0; col < gridSize; col++) {
|
||||
const piece = gameState.board[row][col];
|
||||
if (piece) {
|
||||
placePiece(row, col, piece);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Set up pieces based on grid size
|
||||
function setupPiecesForGridSize(gridSize) {
|
||||
const board = gameState.board;
|
||||
|
||||
// Clear the board first
|
||||
for (let row = 0; row < gridSize; row++) {
|
||||
for (let col = 0; col < gridSize; col++) {
|
||||
board[row][col] = '';
|
||||
}
|
||||
}
|
||||
|
||||
// Different setups for different grid sizes
|
||||
switch(gridSize) {
|
||||
case 6:
|
||||
setup6x6Board();
|
||||
break;
|
||||
case 8:
|
||||
setup8x8Board();
|
||||
break;
|
||||
case 10:
|
||||
setup10x10Board();
|
||||
break;
|
||||
case 12:
|
||||
setup12x12Board();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function setup6x6Board() {
|
||||
const board = gameState.board;
|
||||
// Pawns
|
||||
for (let col = 0; col < 6; col++) {
|
||||
board[1][col] = 'p';
|
||||
board[4][col] = 'P';
|
||||
}
|
||||
// Back rows
|
||||
const blackPieces = ['r', 'n', 'b', 'q', 'k', 'b'];
|
||||
const whitePieces = ['R', 'N', 'B', 'Q', 'K', 'B'];
|
||||
for (let col = 0; col < 6; col++) {
|
||||
board[0][col] = blackPieces[col];
|
||||
board[5][col] = whitePieces[col];
|
||||
}
|
||||
}
|
||||
|
||||
function setup8x8Board() {
|
||||
const board = gameState.board;
|
||||
// Pawns
|
||||
for (let col = 0; col < 8; col++) {
|
||||
board[1][col] = 'p';
|
||||
board[6][col] = 'P';
|
||||
}
|
||||
// Back rows
|
||||
const blackPieces = ['r', 'n', 'b', 'q', 'k', 'b', 'n', 'r'];
|
||||
const whitePieces = ['R', 'N', 'B', 'Q', 'K', 'B', 'N', 'R'];
|
||||
for (let col = 0; col < 8; col++) {
|
||||
board[0][col] = blackPieces[col];
|
||||
board[7][col] = whitePieces[col];
|
||||
}
|
||||
}
|
||||
|
||||
function setup10x10Board() {
|
||||
const board = gameState.board;
|
||||
// Pawns
|
||||
for (let col = 0; col < 10; col++) {
|
||||
board[1][col] = 'p';
|
||||
board[8][col] = 'P';
|
||||
}
|
||||
// Back rows - extended piece set
|
||||
const blackPieces = ['r', 'n', 'b', 'q', 'k', 'b', 'n', 'r', 'c', 'a'];
|
||||
const whitePieces = ['R', 'N', 'B', 'Q', 'K', 'B', 'N', 'R', 'C', 'A'];
|
||||
for (let col = 0; col < 10; col++) {
|
||||
board[0][col] = blackPieces[col];
|
||||
board[9][col] = whitePieces[col];
|
||||
}
|
||||
}
|
||||
|
||||
function setup12x12Board() {
|
||||
const board = gameState.board;
|
||||
// Pawns
|
||||
for (let col = 0; col < 12; col++) {
|
||||
board[1][col] = 'p';
|
||||
board[10][col] = 'P';
|
||||
}
|
||||
// Back rows - extended piece set with duplicates
|
||||
const blackPieces = ['r', 'r', 'n', 'n', 'b', 'b', 'q', 'k', 'b', 'b', 'n', 'n'];
|
||||
const whitePieces = ['R', 'R', 'N', 'N', 'B', 'B', 'Q', 'K', 'B', 'B', 'N', 'N'];
|
||||
for (let col = 0; col < 12; col++) {
|
||||
board[0][col] = blackPieces[col];
|
||||
board[11][col] = whitePieces[col];
|
||||
}
|
||||
}
|
||||
|
||||
// Place a piece on the board
|
||||
function placePiece(row, col, piece) {
|
||||
const cell = document.querySelector(`.cell[data-row="${row}"][data-col="${col}"]`);
|
||||
if (!cell) return;
|
||||
|
||||
const pieceElement = document.createElement('div');
|
||||
pieceElement.className = `piece ${piece === piece.toUpperCase() ? 'white' : 'black'}`;
|
||||
pieceElement.textContent = getPieceSymbol(piece);
|
||||
pieceElement.dataset.piece = piece;
|
||||
pieceElement.dataset.row = row;
|
||||
pieceElement.dataset.col = col;
|
||||
pieceElement.setAttribute('tabindex', '0');
|
||||
pieceElement.addEventListener('click', handlePieceClick);
|
||||
pieceElement.addEventListener('keydown', handlePieceKeyPress);
|
||||
|
||||
cell.appendChild(pieceElement);
|
||||
}
|
||||
|
||||
// Get Unicode symbol for chess piece
|
||||
function getPieceSymbol(piece) {
|
||||
const symbols = {
|
||||
'K': '♔', 'Q': '♕', 'R': '♖', 'B': '♗', 'N': '♘', 'P': '♙',
|
||||
'k': '♚', 'q': '♛', 'r': '♜', 'b': '♝', 'n': '♞', 'p': '♟',
|
||||
'C': '♔', 'A': '♕', 'c': '♚', 'a': '♛' // Extra pieces for larger boards
|
||||
};
|
||||
return symbols[piece] || '?';
|
||||
}
|
||||
|
||||
// Handle piece selection
|
||||
function handlePieceClick(e) {
|
||||
e.stopPropagation();
|
||||
const piece = e.target.closest('.piece');
|
||||
if (!piece) return;
|
||||
|
||||
const row = parseInt(piece.dataset.row);
|
||||
const col = parseInt(piece.dataset.col);
|
||||
const pieceType = piece.dataset.piece;
|
||||
|
||||
// Check if it's the current player's piece
|
||||
const isWhitePiece = pieceType === pieceType.toUpperCase();
|
||||
if ((isWhitePiece && gameState.currentPlayer !== 'white') ||
|
||||
(!isWhitePiece && gameState.currentPlayer !== 'black')) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Select the piece
|
||||
selectPiece(row, col);
|
||||
}
|
||||
|
||||
// Handle piece selection with keyboard
|
||||
function handlePieceKeyPress(e) {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
const piece = e.target;
|
||||
const row = parseInt(piece.dataset.row);
|
||||
const col = parseInt(piece.dataset.col);
|
||||
selectPiece(row, col);
|
||||
}
|
||||
}
|
||||
|
||||
// Select a piece and show valid moves
|
||||
function selectPiece(row, col) {
|
||||
// Clear previous selection
|
||||
clearSelection();
|
||||
|
||||
// Select the new piece
|
||||
gameState.selectedPiece = { row, col };
|
||||
const cell = document.querySelector(`.cell[data-row="${row}"][data-col="${col}"]`);
|
||||
cell.classList.add('selected');
|
||||
|
||||
// Show valid moves
|
||||
showValidMoves(row, col);
|
||||
|
||||
// Update status
|
||||
const pieceSymbol = getPieceSymbol(gameState.board[row][col]);
|
||||
gameStatus.textContent = `Selected ${gameState.currentPlayer} piece ${pieceSymbol}. Click on a highlighted square to move.`;
|
||||
}
|
||||
|
||||
// Show valid moves for the selected piece
|
||||
function showValidMoves(row, col) {
|
||||
const piece = gameState.board[row][col];
|
||||
const gridSize = gameState.gridSize;
|
||||
|
||||
// Simple movement patterns based on piece type
|
||||
const pieceType = piece.toLowerCase();
|
||||
let directions = [];
|
||||
|
||||
switch(pieceType) {
|
||||
case 'p': // Pawn
|
||||
directions = piece === 'P' ? [[-1, 0]] : [[1, 0]];
|
||||
break;
|
||||
case 'r': // Rook
|
||||
directions = [[-1, 0], [1, 0], [0, -1], [0, 1]];
|
||||
break;
|
||||
case 'n': // Knight
|
||||
directions = [[-2, -1], [-2, 1], [-1, -2], [-1, 2], [1, -2], [1, 2], [2, -1], [2, 1]];
|
||||
break;
|
||||
case 'b': // Bishop
|
||||
directions = [[-1, -1], [-1, 1], [1, -1], [1, 1]];
|
||||
break;
|
||||
case 'q': // Queen
|
||||
directions = [[-1, 0], [1, 0], [0, -1], [0, 1], [-1, -1], [-1, 1], [1, -1], [1, 1]];
|
||||
break;
|
||||
case 'k': // King
|
||||
directions = [[-1, -1], [-1, 0], [-1, 1], [0, -1], [0, 1], [1, -1], [1, 0], [1, 1]];
|
||||
break;
|
||||
default:
|
||||
directions = [[-1, 0], [1, 0], [0, -1], [0, 1]];
|
||||
}
|
||||
|
||||
directions.forEach(([dr, dc]) => {
|
||||
const newRow = row + dr;
|
||||
const newCol = col + dc;
|
||||
|
||||
if (newRow >= 0 && newRow < gridSize && newCol >= 0 && newCol < gridSize) {
|
||||
const targetCell = document.querySelector(`.cell[data-row="${newRow}"][data-col="${newCol}"]`);
|
||||
const targetPiece = gameState.board[newRow][newCol];
|
||||
|
||||
// Show as valid move if empty or contains opponent's piece
|
||||
if (!targetPiece || (targetPiece === targetPiece.toUpperCase()) !== (piece === piece.toUpperCase())) {
|
||||
targetCell.classList.add('valid-move');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Handle cell click for moving pieces
|
||||
function handleCellClick(e) {
|
||||
if (gameState.gameOver) return;
|
||||
|
||||
const cell = e.target.closest('.cell');
|
||||
if (!cell) return;
|
||||
|
||||
const row = parseInt(cell.dataset.row);
|
||||
const col = parseInt(cell.dataset.col);
|
||||
|
||||
// If a piece is selected, try to move it
|
||||
if (gameState.selectedPiece) {
|
||||
movePiece(gameState.selectedPiece.row, gameState.selectedPiece.col, row, col);
|
||||
}
|
||||
}
|
||||
|
||||
// Move a piece from one position to another
|
||||
function movePiece(fromRow, fromCol, toRow, toCol) {
|
||||
// Check if the move is valid
|
||||
if (!isValidMove(fromRow, fromCol, toRow, toCol)) {
|
||||
gameStatus.textContent = "Invalid move! Try again.";
|
||||
clearSelection();
|
||||
return;
|
||||
}
|
||||
|
||||
// Perform the move
|
||||
const piece = gameState.board[fromRow][fromCol];
|
||||
const targetPiece = gameState.board[toRow][toCol];
|
||||
|
||||
// Check if capturing a piece
|
||||
if (targetPiece) {
|
||||
gameStatus.textContent = `${gameState.currentPlayer} captures ${targetPiece === targetPiece.toUpperCase() ? 'white' : 'black'} ${getPieceSymbol(targetPiece)}!`;
|
||||
}
|
||||
|
||||
gameState.board[toRow][toCol] = piece;
|
||||
gameState.board[fromRow][fromCol] = '';
|
||||
|
||||
// Update the board visually
|
||||
const fromCell = document.querySelector(`.cell[data-row="${fromRow}"][data-col="${fromCol}"]`);
|
||||
const toCell = document.querySelector(`.cell[data-row="${toRow}"][data-col="${toCol}"]`);
|
||||
|
||||
// Remove any existing piece in the target cell
|
||||
toCell.querySelectorAll('.piece').forEach(p => p.remove());
|
||||
|
||||
// Move the piece
|
||||
const pieceElement = fromCell.querySelector('.piece');
|
||||
if (pieceElement) {
|
||||
toCell.appendChild(pieceElement);
|
||||
pieceElement.dataset.row = toRow;
|
||||
pieceElement.dataset.col = toCol;
|
||||
}
|
||||
|
||||
// Switch players
|
||||
gameState.currentPlayer = gameState.currentPlayer === 'white' ? 'black' : 'white';
|
||||
|
||||
// Clear selection
|
||||
clearSelection();
|
||||
|
||||
// Update game status
|
||||
updateGameStatus();
|
||||
}
|
||||
|
||||
// Simplified move validation
|
||||
function isValidMove(fromRow, fromCol, toRow, toCol) {
|
||||
// Check if target cell is marked as valid move
|
||||
const targetCell = document.querySelector(`.cell[data-row="${toRow}"][data-col="${toCol}"]`);
|
||||
return targetCell.classList.contains('valid-move');
|
||||
}
|
||||
|
||||
// Clear selection and valid move indicators
|
||||
function clearSelection() {
|
||||
document.querySelectorAll('.cell.selected').forEach(cell => {
|
||||
cell.classList.remove('selected');
|
||||
});
|
||||
document.querySelectorAll('.cell.valid-move').forEach(cell => {
|
||||
cell.classList.remove('valid-move');
|
||||
});
|
||||
gameState.selectedPiece = null;
|
||||
}
|
||||
|
||||
// Update game status display
|
||||
function updateGameStatus() {
|
||||
if (gameState.gameOver) {
|
||||
gameStatus.textContent = "Game Over!";
|
||||
} else {
|
||||
gameStatus.textContent = `${gameState.currentPlayer.charAt(0).toUpperCase() + gameState.currentPlayer.slice(1)}'s turn. Click on a piece to select it.`;
|
||||
}
|
||||
}
|
||||
|
||||
// Update board size based on user selection
|
||||
function updateBoardSize() {
|
||||
const size = boardSizeSelect.value;
|
||||
document.documentElement.style.setProperty('--board-size', `${size}px`);
|
||||
}
|
||||
|
||||
// Update grid size based on user selection
|
||||
function updateGridSize() {
|
||||
const newGridSize = parseInt(gridSizeSelect.value);
|
||||
gameState.gridSize = newGridSize;
|
||||
resetGame();
|
||||
}
|
||||
|
||||
// Update board shape based on user selection
|
||||
function updateBoardShape() {
|
||||
const shape = boardShapeSelect.value;
|
||||
chessBoard.className = `chess-board ${shape}`;
|
||||
}
|
||||
|
||||
// Update board colors based on user selection
|
||||
function updateBoardColors() {
|
||||
const lightColor = lightColorSelect.value;
|
||||
const darkColor = darkColorSelect.value;
|
||||
document.documentElement.style.setProperty('--light-color', lightColor);
|
||||
document.documentElement.style.setProperty('--dark-color', darkColor);
|
||||
}
|
||||
|
||||
// Reset the game to initial state
|
||||
function resetGame() {
|
||||
gameState.selectedPiece = null;
|
||||
gameState.currentPlayer = 'white';
|
||||
gameState.gameOver = false;
|
||||
clearSelection();
|
||||
createBoard();
|
||||
setupPieces();
|
||||
updateGameStatus();
|
||||
gameStatus.textContent = `Game reset! ${gameState.gridSize}x${gameState.gridSize} board. White's turn.`;
|
||||
}
|
||||
|
||||
// Flip the board perspective
|
||||
function flipBoard() {
|
||||
gameState.flipped = !gameState.flipped;
|
||||
const gridSize = gameState.gridSize;
|
||||
const cells = document.querySelectorAll('.cell');
|
||||
|
||||
cells.forEach(cell => {
|
||||
const row = parseInt(cell.dataset.row);
|
||||
const col = parseInt(cell.dataset.col);
|
||||
|
||||
// Update coordinates display
|
||||
const fileCoord = cell.querySelector('.file-coord');
|
||||
const rankCoord = cell.querySelector('.rank-coord');
|
||||
|
||||
if (gameState.flipped) {
|
||||
fileCoord.textContent = String.fromCharCode(97 + (gridSize - 1 - col));
|
||||
rankCoord.textContent = row + 1;
|
||||
} else {
|
||||
fileCoord.textContent = String.fromCharCode(97 + col);
|
||||
rankCoord.textContent = gridSize - row;
|
||||
}
|
||||
});
|
||||
|
||||
gameStatus.textContent = `Board ${gameState.flipped ? 'flipped' : 'normal'}. ${gameState.currentPlayer}'s turn.`;
|
||||
}
|
||||
|
||||
// Toggle high contrast mode
|
||||
function toggleHighContrast() {
|
||||
document.body.classList.toggle('high-contrast');
|
||||
|
||||
if (document.body.classList.contains('high-contrast')) {
|
||||
document.documentElement.style.setProperty('--light-color', '#ffffff');
|
||||
document.documentElement.style.setProperty('--dark-color', '#000000');
|
||||
gameStatus.textContent = "High contrast mode enabled.";
|
||||
} else {
|
||||
// Restore original colors
|
||||
updateBoardColors();
|
||||
gameStatus.textContent = "High contrast mode disabled.";
|
||||
}
|
||||
}
|
||||
|
||||
// Announce game state for accessibility
|
||||
function announceGameState() {
|
||||
const status = gameState.gameOver ?
|
||||
"Game over." :
|
||||
`It is ${gameState.currentPlayer}'s turn on a ${gameState.gridSize} by ${gameState.gridSize} board.`;
|
||||
|
||||
gameStatus.textContent = status + " " + gameStatus.textContent;
|
||||
|
||||
// Create a temporary element for screen readers
|
||||
const announcement = document.createElement('div');
|
||||
announcement.setAttribute('aria-live', 'polite');
|
||||
announcement.className = 'sr-only';
|
||||
announcement.textContent = status;
|
||||
document.body.appendChild(announcement);
|
||||
|
||||
// Remove the element after it's been announced
|
||||
setTimeout(() => {
|
||||
document.body.removeChild(announcement);
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user