Początkujący
Postów: 135
Pomógł: 13
Ostrzeżeń: 1
 v9.03.80
Data rejestracji: 07.03.2021 11:36
|
Gra w Puzzle
Wiele niema co tu tłumaczyć .
1.wstaw własną grafikę.
2.jeśli zamierzasz użyć w innym katalogu, jak pierwszy licząc od głównego na serwerze zmień ścierze.
3.6 obrazków działa ,na większej ilości może się zacinać .
4. Wskazane jest używać krótkich nazw do obrazków.
5.Rozmiar tabeli zmienia się w stylu CSS.
\\niestety musowo z kalkulatorem.
6.Przycisk losujący uruchamia pierwszą grafikę.
7. Aby działał na v7 przycisk jest brzydki domyślny.<?php require_once __DIR__.'/../maincore.php';require_once THEMES.'templates/header.php';add_to_title ('Gra dla PHP Fusion v9'); set_meta("description","Gra gotowy skrypt gry dla CMS PHPFuzion v9. łatwa instalacja..");
add_to_head('<style>
#puzzle-container {
display: flex;
flex-wrap: wrap;
width: 300px;
height: 300px;
}
.piece {
width: 100px;
height: 100px;
border: 0,5px solid #000;
box-sizing: border-box;
cursor: pointer;
}
</style> ');?>
<div id="puzzle-container"></div>
<button onclick="changeImage()">Zmień obrazek</button>
<script>
// Funkcja do mieszania tablicy
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
// Funkcja do podziału obrazka na puzzel
function splitImage(imagePath, numRows, numCols) {
const pieceWidth = 100;
const pieceHeight = 100;
const pieces = [];
const image = new Image();
image.src = imagePath;
image.onload = function() {
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.width = image.width;
canvas.height = image.height;
context.drawImage(image, 0, 0);
for (let i = 0; i < numRows; i++) {
for (let j = 0; j < numCols; j++) {
const pieceCanvas = document.createElement('canvas');
pieceCanvas.width = pieceWidth;
pieceCanvas.height = pieceHeight;
const pieceContext = pieceCanvas.getContext('2d');
pieceContext.drawImage(canvas, j * pieceWidth, i * pieceHeight, pieceWidth, pieceHeight, 0, 0, pieceWidth, pieceHeight);
pieces.push(pieceCanvas.toDataURL());
}
}
shuffleArray(pieces);
pieces.forEach((pieceDataURL, index) => {
const piece = document.createElement('div');
piece.classList.add('piece');
piece.style.backgroundImage = `url(${pieceDataURL})`;
piece.setAttribute('data-position', index);
piece.addEventListener('click', () => swapPieces(piece));
document.getElementById('puzzle-container').appendChild(piece);
});
};
}
// Inicjalizacja puzzli
const imagePaths = ['pad.jpg', 'lab.jpg', 'pad.jpg', 'literatura-polska.png', 'soplicowo.jpg', 'pad.jpg'];
const combinedImage = new Image();
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
combinedImage.onload = function() {
canvas.width = combinedImage.width;
canvas.height = combinedImage.height;
context.drawImage(combinedImage, 0, 0);
splitImage(canvas.toDataURL(), 3, 3);
};
imagePaths.forEach(path => {
const image = new Image();
image.src = path;
image.onload = function() {
context.drawImage(image, 0, 0);
};
});
combinedImage.src = canvas.toDataURL();
let firstPiece = null;
function swapPieces(piece) {
if (!firstPiece) {
firstPiece = piece;
piece.style.border = '2px solid red';
} else {
if (piece !== firstPiece) {
const tempPosition = piece.getAttribute('data-position');
const tempBackground = piece.style.backgroundImage;
piece.setAttribute('data-position', firstPiece.getAttribute('data-position'));
piece.style.backgroundImage = firstPiece.style.backgroundImage;
firstPiece.setAttribute('data-position', tempPosition);
firstPiece.style.backgroundImage = tempBackground;
}
firstPiece.style.border = '1px solid black';
firstPiece = null;
}
}
function changeImage() {
const puzzleContainer = document.getElementById('puzzle-container');
puzzleContainer.innerHTML = '';
shuffleArray(imagePaths);
splitImage(imagePaths[0], 3, 3);
}
</script>
<?require_once THEMES.'templates/footer.php';?>
Na koniec,jak ktoś się decyduje na jakiś hosting,serwer warto wcześniej sprawdzić co działa, a nie co pisze.
Brak biblioteki, (GD), znaczą brak skalowania grafiki i wiele więcej. |
