172 lines
4.5 KiB
HTML
172 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Crossword Puzzle</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: Arial, sans-serif;
|
||
background: #fff;
|
||
padding: 20px;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
h1 {
|
||
text-align: center;
|
||
color: #000;
|
||
margin-bottom: 20px;
|
||
font-size: 24px;
|
||
}
|
||
|
||
.grid-wrapper {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin: 20px 0;
|
||
}
|
||
|
||
.crossword-grid {
|
||
display: inline-grid;
|
||
gap: 0;
|
||
border: 2px solid #000;
|
||
}
|
||
|
||
.cell {
|
||
width: 30px;
|
||
height: 30px;
|
||
border: 1px solid #000;
|
||
background: white;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
text-transform: uppercase;
|
||
position: relative;
|
||
}
|
||
|
||
.cell.blocked {
|
||
background: #000;
|
||
}
|
||
|
||
.cell input {
|
||
width: 100%;
|
||
height: 100%;
|
||
border: none;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
text-transform: uppercase;
|
||
background: transparent;
|
||
outline: none;
|
||
}
|
||
|
||
.cell-number {
|
||
position: absolute;
|
||
top: 1px;
|
||
left: 2px;
|
||
font-size: 8px;
|
||
font-weight: normal;
|
||
color: #000;
|
||
}
|
||
|
||
.clues {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 30px;
|
||
margin-top: 30px;
|
||
}
|
||
|
||
.clues-section h3 {
|
||
font-size: 18px;
|
||
margin-bottom: 10px;
|
||
border-bottom: 2px solid #000;
|
||
padding-bottom: 5px;
|
||
}
|
||
|
||
.clue {
|
||
padding: 5px 0;
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h1>Crossword Puzzle - 21×21</h1>
|
||
|
||
<div class="grid-wrapper">
|
||
<div class="crossword-grid" id="grid"></div>
|
||
</div>
|
||
|
||
<div class="clues">
|
||
<div class="clues-section">
|
||
<h3>Across</h3>
|
||
<div id="cluesAcross">
|
||
</div>
|
||
</div>
|
||
<div class="clues-section">
|
||
<h3>Down</h3>
|
||
<div id="cluesDown">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
const GRID_SIZE = 21;
|
||
|
||
function createGrid() {
|
||
const grid = document.getElementById('grid');
|
||
grid.style.gridTemplateColumns = `repeat(${GRID_SIZE}, 30px)`;
|
||
|
||
let clueNumber = 1;
|
||
|
||
for (let r = 0; r < GRID_SIZE; r++) {
|
||
for (let c = 0; c < GRID_SIZE; c++) {
|
||
const cell = document.createElement('div');
|
||
cell.className = 'cell';
|
||
|
||
const isBlocked = (r + c) % 7 === 0 && r % 3 === 0;
|
||
|
||
if (isBlocked) {
|
||
cell.classList.add('blocked');
|
||
} else {
|
||
const needsNumber = (c === 0 || (c > 0 && isBlackSquare(r, c-1))) ||
|
||
(r === 0 || (r > 0 && isBlackSquare(r-1, c)));
|
||
|
||
if (needsNumber && (c < GRID_SIZE-1 || r < GRID_SIZE-1)) {
|
||
const num = document.createElement('span');
|
||
num.className = 'cell-number';
|
||
num.textContent = clueNumber++;
|
||
cell.appendChild(num);
|
||
}
|
||
|
||
const input = document.createElement('input');
|
||
input.maxLength = 1;
|
||
cell.appendChild(input);
|
||
}
|
||
|
||
grid.appendChild(cell);
|
||
}
|
||
}
|
||
}
|
||
|
||
function isBlackSquare(r, c) {
|
||
return (r + c) % 7 === 0 && r % 3 === 0;
|
||
}
|
||
|
||
createGrid();
|
||
</script>
|
||
</body>
|
||
</html> |