Nahrány soubory do „/“
This commit is contained in:
parent
5e7d73c44e
commit
68b8f6c162
5 changed files with 181 additions and 0 deletions
BIN
0.png
Normal file
BIN
0.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 198 B |
BIN
A.png
Normal file
BIN
A.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 463 B |
BIN
B.png
Normal file
BIN
B.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 492 B |
BIN
C.png
Normal file
BIN
C.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 377 B |
181
text.html
Normal file
181
text.html
Normal file
|
|
@ -0,0 +1,181 @@
|
|||
<!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>
|
||||
Loading…
Reference in a new issue