181 lines
No EOL
6.3 KiB
HTML
181 lines
No EOL
6.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width,
|
|
initial-scale=1.0">
|
|
<title>Sudoku</title>
|
|
<style>
|
|
body {
|
|
background-color: #F5FCFF;
|
|
}
|
|
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-top: 50px;
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
}
|
|
|
|
.cell {
|
|
width: 80px;
|
|
height: 80px;
|
|
border: 1px solid black;
|
|
text-align: center;
|
|
line-height: 30px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.backgroundColor {
|
|
background-color: #EBF3E8;
|
|
}
|
|
|
|
.buttonContainer {
|
|
margin-top: 20px;
|
|
display: flex;
|
|
/* Ensure buttons are always displayed */
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.buttonContainer button {
|
|
margin-right: 10px;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.chosen {
|
|
margin-right: 10px;
|
|
margin-left: 10px;
|
|
background-color: #999999;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="container" id="container"></div>
|
|
|
|
<div class="buttonContainer"></div>
|
|
|
|
<script>
|
|
const letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'];
|
|
const buttonContainer = document.querySelector('.buttonContainer');
|
|
|
|
letters.forEach(letter => {
|
|
const button = document.createElement('button');
|
|
const image = document.createElement('img');
|
|
image.src = `${letter}.png`;
|
|
button.id = `drawAnimal${letter}`;
|
|
button.appendChild(image);
|
|
buttonContainer.appendChild(button);
|
|
});
|
|
|
|
let chosenAnimal = '';
|
|
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const container = document.getElementById("container");
|
|
|
|
// Function to generate a random Sudoku puzzle
|
|
function generateRandomSudoku() {
|
|
// Placeholder function for generating a random puzzle (9x9)
|
|
const puzzle = [
|
|
['E', 'C', '0', '0', 'G', '0', '0', '0', '0'],
|
|
['F', '0', '0', 'A', 'I', 'E', '0', '0', '0'],
|
|
['0', 'I', 'H', '0', '0', '0', '0', 'F', '0'],
|
|
['H', '0', '0', '0', 'F', '0', '0', '0', 'C'],
|
|
['D', '0', '0', 'H', '0', 'C', '0', '0', 'A'],
|
|
['G', '0', '0', '0', 'B', '0', '0', '0', 'F'],
|
|
['0', 'F', '0', '0', '0', '0', 'B', 'H', '0'],
|
|
['0', '0', '0', 'D', 'A', 'I', '0', '0', 'E'],
|
|
['0', '0', '0', '0', 'H', '0', '0', 'G', 'I']
|
|
];
|
|
return puzzle;
|
|
}
|
|
|
|
// Function to create the Sudoku puzzle grid
|
|
function createSudokuGrid(puzzle) {
|
|
container.innerHTML = '';
|
|
puzzle.forEach((row) => {
|
|
const rowElement = document.createElement('div');
|
|
rowElement.classList.add('row');
|
|
row.forEach((cell) => {
|
|
const cellElement = document.createElement('button');
|
|
const image = document.createElement('img');
|
|
cellElement.classList.add('cell');
|
|
cellElement.classList.add('backgroundColor');
|
|
image.src = cell !== '' ? `${cell}.png` : `${cell}.png`;
|
|
cellElement.appendChild(image);
|
|
// cellElement.textContent = cell !== 0 ? cell : '';
|
|
cellElement.onclick = addAnimal(cellElement);
|
|
rowElement.appendChild(cellElement);
|
|
});
|
|
container.appendChild(rowElement);
|
|
});
|
|
}
|
|
|
|
// Initialize puzzle
|
|
let initialPuzzle = generateRandomSudoku();
|
|
let puzzle = JSON.parse(JSON.stringify(initialPuzzle));
|
|
|
|
// Function witch animal you should draw
|
|
function drawAnimal(animal) {
|
|
return function () {
|
|
chosenAnimal = animal;
|
|
}
|
|
}
|
|
|
|
// Function to add Animal
|
|
function addAnimal(cellElement) {
|
|
return function() {
|
|
if (chosenAnimal){
|
|
const existingImage = cellElement.querySelector('img');
|
|
|
|
if (existingImage) {
|
|
cellElement.removeChild(existingImage); // Remove existing image
|
|
}
|
|
|
|
const image = document.createElement('img');
|
|
image.src = `${chosenAnimal}.png`;
|
|
cellElement.appendChild(image);
|
|
}
|
|
};
|
|
}
|
|
|
|
// Initial puzzle creation
|
|
createSudokuGrid(puzzle);
|
|
|
|
// // Attach event listeners to buttons
|
|
// letters.forEach(letter => {
|
|
// document.getElementById(`drawAnimal${letter}`)
|
|
// .addEventListener("click", drawAnimal(letter));
|
|
// });
|
|
letters.forEach(letter => {
|
|
const button = document.getElementById(`drawAnimal${letter}`);
|
|
button.addEventListener("click", drawAnimal(letter));
|
|
|
|
// Initial state: check if the button's letter matches the initial `chosenAnimal`
|
|
if (letter === chosenAnimal) {
|
|
button.classList.add('chosen'); // Add a class to style the chosen button
|
|
}
|
|
|
|
button.addEventListener('click', () => {
|
|
chosenAnimal = letter;
|
|
|
|
// Remove the 'chosen' class from all buttons
|
|
letters.forEach(l => document.getElementById(`drawAnimal${l}`).classList.remove('chosen'));
|
|
|
|
// Add the 'chosen' class to the current button
|
|
button.classList.add('chosen');
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |