пазл .js нужно что бы когда пазл собран - загружалась html
Это пазл на .js
скрипт пазла взял отсюда https://www.rudebox.org.ua/jquery-pu...-for-a-puzzle/ Помогите пожалуйста, что прописать нужно в ниже приведенный код - что бы после того как я соберу пазл - загружалась указанная страничка html ? Помогите пожалуйста, кто может? весь код не влезает... как правильно прописать загрузку URL наверно в районе после complete ? // Check check to make sure that the size value is valid. // Since this can be overridden by the user, we want to // make sure that it is not crazy. intSize = Math.floor( intSize ); if ((intSize < 40) || (intSize > 200)){ intSize = 100; } // Check to see if the image has complietely // loaded (for some reason, this does NOT // work with the attr() function). If the // image is complete, call Init right away. // If it has not loaded, then set an onload // handler for initialization. if ( jImg[ 0 ].complete ){ // The image has loaded so call Init. InitPuzzle(); } else { // The image has not loaded so set an // onload event handler to call Init. jImg.load( function(){ InitPuzzle(); } ); } } ); } |
первая часть кода
// Here, we are going to define the jQuery puzzle // plugin that will create the interface for each // DIV that contains an image. jQuery.fn.puzzle = function( intUserSize ){ // Make sure that each of the parent elements // has a nested IMG tag. We don't want elements // that lack the image. Once we get those, then // loop over them to initialize functionality. return this.filter( ":has( img )" ).each( function( intI ){ // This is the functionality that will initialize // the container and img for puzzle. This will only // be called ONCE the image has been loaded, and once // per each instance of the target puzzle. function InitPuzzle(){ var jPiece = null; var intRowIndex, intColIndex, intI = 0; // Get the number of columns and rows. intColumns = Math.floor( jImg.width() / intSize ); intRows = Math.floor( jImg.height() / intSize ); // Get the puzzle width and height based on // the number of pieces (this may require some // cropping of the image). intPuzzleWidth = (intColumns * intSize); intPuzzleHeight = (intRows * intSize); // Empty the container element. We don't actually // want the image inside of it (or any of the // other elements that might be there). jContainer.empty(); // Set the container CSS and dimensions. jContainer .css( { overflow: "hidden", display: "block" } ) .width( intPuzzleWidth ) .height( intPuzzleHeight ) ; // Check to see how the container is positioned. // If is relative or absolute, we can keep it, // but if it is not those, then we need to set // is to relative explicitly. if ( (jContainer.css( "position" ) != "relative") && (jContainer.css( "position" ) != "absolute") ){ // The container element is not explicitly // positioned, so position it to be relative. jContainer.css( "position", "relative" ); } // Loop over the columns and row to create each // of the pieces. At this point, we are not going to worry // about the dimensions of the board - that will happen next. for (var intRowIndex = 0 ; intRowIndex < intRows ; intRowIndex++){ // For this row, add a new array. arr2DBoard[ intRowIndex ] = []; for (var intColIndex = 0 ; intColIndex < intColumns ; intColIndex++){ // Create a new Div tag. We are using a DIV tag as // opposed to an anchor tag to get around the IE // bug that has flickering background images on links // when the browser is not caching images. jPiece = $( "<div><br /></div>" ); // Set the css properties. Since all of the // pieces have the same background image, they // all have to have different offset positions. jPiece .css( { display: "block", cursor: "pointer", backgroundImage: "url( '" + jImg.attr( "src" ) + "' )", backgroundRepeat: "no-repeat", backgroundPosition: ( (intColIndex * -intSize) + "px " + (intRowIndex * -intSize) + "px" ), position: "absolute", top: ((intSize * intRowIndex) + "px"), left: ((intSize * intColIndex) + "px") } ) .width( intSize ) .height( intSize ) ; // Set the HREF so that the click even registers. // Then, set up the click handler. jPiece .attr( "href", "javascript:void( 0 );" ) .click( PieceClickHandler ) ; // Add the piece to the 2-D representation of the board. arr2DBoard[ intRowIndex ][ intColIndex ] = jPiece; // Add to DOM. jContainer.append( jPiece ); } } // Make the last one opaque and give it a special "rel" // value so that we can easily loacate this one later on. arr2DBoard[ intRows - 1 ][ intColumns - 1 ] .css( "opacity", 0 ) .attr( "rel", "empty" ) ; // In order to shuffle the board, we are going to simulate // a certain number of clicks. This is to ensure that any // state the board gets into, it is certain that the board // can get back into a "winning" state. for (intI = 0 ; intI < 100 ; intI++){ // Select the piece that we want to "click". // We will do this by randomly selecting a row // and a column to click. jPiece = arr2DBoard[ (Math.floor( Math.random() * intRows * intRows ) % intRows) ][ (Math.floor( Math.random() * intColumns * intColumns ) % intColumns) ]; // Simulate the click. jPiece.click(); } // Now that we have initialized, turn on the animation. blnShowAnimation = true; // Return out. return( true ); } // This sets up the click handler for the pieces. function PieceClickHandler( objEvent ){ // Get the jQuery objects for the piece clicked as // well as the empty square within the board. var jPiece = $( this ); var jEmpty = jContainer.find( "div[ rel = 'empty' ]" ); // Get the CSS position for the current piece. var objPiecePos = { top: parseInt( jPiece.css( "top" ) ), left: parseInt( jPiece.css( "left" ) ) }; // Get the CSS position for the empty piece var objEmptyPos = { top: parseInt( jEmpty.css( "top" ) ), left: parseInt( jEmpty.css( "left" ) ) }; var intRowIndex, intColIndex = 0; // Check to see if we are in the middle of an animation. // If we are, then just return out since we don't want // to update values yet. if (blnInAnimation){ return( false ); } // Blur the current piece to get rid of the dotted box. jPiece.blur(); // Base on the CSS of the current piece and the size of // each of the pieces, we can calculate the row and column // of the given piece. objPiecePos.row = (objPiecePos.top / intSize); objPiecePos.col = (objPiecePos.left / intSize); // Base on the CSS of the empty piece and the size of // each of the pieces, we can calculate the row and column // of the given piece. objEmptyPos.row = (objEmptyPos.top / intSize); objEmptyPos.col = (objEmptyPos.left / intSize); |
вторая часть кода
// Now that we have the row and column of the target piece // as well as the empty piece, we can check to see if anything // needs to be moved. Remember, we ONLY need to move pieces // if the target piece and the empty piece share a row // or a column. // Check to see if they share the same row. if (objPiecePos.row == objEmptyPos.row){ // Check to see which direction we are moving in. if (objPiecePos.col > objEmptyPos.col){ // Move left. for (intColIndex = objEmptyPos.col ; intColIndex < objPiecePos.col ; intColIndex++){ arr2DBoard[ objPiecePos.row ][ intColIndex ] = arr2DBoard[ objPiecePos.row ][ intColIndex + 1 ]; } // Put empty in place. arr2DBoard[ objPiecePos.row ][ intColIndex ] = jEmpty; } else { // Move right. for (intColIndex = objEmptyPos.col ; intColIndex > objPiecePos.col ; intColIndex--){ arr2DBoard[ objPiecePos.row ][ intColIndex ] = arr2DBoard[ objPiecePos.row ][ intColIndex - 1 ]; } // Put empty in place. arr2DBoard[ objPiecePos.row ][ intColIndex ] = jEmpty; } // Update the CSS of the entire row (to make it easy). for (intColIndex = 0 ; intColIndex < intColumns ; intColIndex++){ if (blnShowAnimation){ // Flag that an animation is about to being. blnInAnimation = true; // Animate the CSS move. arr2DBoard[ objPiecePos.row ][ intColIndex ].animate( { left: ((intSize * intColIndex) + "px") }, 200, function(){ blnInAnimation = false; } ); } else { // Update the CSS for the given piece. arr2DBoard[ objPiecePos.row ][ intColIndex ].css( "left", ((intSize * intColIndex) + "px") ); } } // Check to see if we should move vertically. } else if (objPiecePos.col == objEmptyPos.col){ // Check to see which direction we are moving in. if (objPiecePos.row > objEmptyPos.row){ // Move up. for (intRowIndex = objEmptyPos.row ; intRowIndex < objPiecePos.row ; intRowIndex++){ arr2DBoard[ intRowIndex ][ objPiecePos.col ] = arr2DBoard[ intRowIndex + 1 ][ objPiecePos.col ]; } // Put empty in place. arr2DBoard[ intRowIndex ][ objPiecePos.col ] = jEmpty; } else { // Move down. for (intRowIndex = objEmptyPos.row ; intRowIndex > objPiecePos.row ; intRowIndex--){ arr2DBoard[ intRowIndex ][ objPiecePos.col ] = arr2DBoard[ intRowIndex - 1 ][ objPiecePos.col ]; } // Put empty in place. arr2DBoard[ intRowIndex ][ objPiecePos.col ] = jEmpty; } // Update the CSS of the entire column (to make it easy). for (intRowIndex = 0 ; intRowIndex < intRows ; intRowIndex++){ if (blnShowAnimation){ // Flag that an animation is about to being. blnInAnimation = true; // Animate the CSS move. arr2DBoard[ intRowIndex ][ objPiecePos.col ].animate( { top: ((intSize * intRowIndex) + "px") }, 200, function(){ blnInAnimation = false; } ); } else { // Update the CSS for the given piece. arr2DBoard[ intRowIndex ][ objPiecePos.col ].css( "top", ((intSize * intRowIndex) + "px") ); } } } // Return false so nothing happens. return( false ); } // ASSERT: At this point, we have defined all the class // methods for this plugin instance. Now, we can act on // the instance properties and call methods. // Get a jQUery reference to the container. var jContainer = $( this ); // Get a jQuery reference to the first image // - this is the one that we will use to make // the image puzzle. var jImg = jContainer.find( "img:first" ); // This is the array that will hold the 2-dimentional // representation of the board. var arr2DBoard = []; // The height and width of the puzzle. var intPuzzleWidth = 0; var intPuzzleHeight = 0; // The width / height of each piece. This can be overriden // by the user when the initialize the puzzle plug-in. var intSize = intUserSize || 100; // The number of columns that are in the board. var intColumns = 0; // The number of rows that in the board. var intRows = 0; // Flag for wether or not to show animation. var blnShowAnimation = false; // Flag for wether or not an animation is in the midst. We // are going to need this to prevent further clicking during // and anmiation sequence. var blnInAnimation = false; // Check check to make sure that the size value is valid. // Since this can be overridden by the user, we want to // make sure that it is not crazy. intSize = Math.floor( intSize ); if ((intSize < 40) || (intSize > 200)){ intSize = 100; } // Check to see if the image has complietely // loaded (for some reason, this does NOT // work with the attr() function). If the // image is complete, call Init right away. // If it has not loaded, then set an onload // handler for initialization. if ( jImg[ 0 ].complete ){ // The image has loaded so call Init. InitPuzzle(); } else { // The image has not loaded so set an // onload event handler to call Init. jImg.load( function(){ InitPuzzle(); } ); } } ); } |
micrioni,
лучше поискать пазл где предусмотрено окончание игры. |
Not jQuery Sliding Image Puzzle
micrioni,
Пазл, минус jQuery, плюс действие на решение, источник. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Puzzle</title> <style> .puzzle {position:relative;overflow:hidden;border:1px solid black;background-size:0;} .puzzle .piece {position:absolute;background-image:inherit;background-repeat:no-repeat;cursor:pointer;} .puzzle .piece.empty {background-image:none;} .puzzle.animated .piece {transition:left 0.2s,top 0.2s;} </style> <script> function puzzle(source, size, success) { var container = document.querySelector('.puzzle'); var fragment = document.createDocumentFragment(); var board = [], map = [], empty, cols, rows, moves = 0; var animated = false, animating = false; if (!size) { size = 100; } else if (size < 40) { size = 40; } else if (size > 200) { size = 200; } if (!success) { success = function(m) { console.log('success', m) }; } var img = document.createElement('img'); img.onload = init; img.src = source; function init() { cols = Math.floor(img.width / size); rows = Math.floor(img.height / size); container.innerHTML = ''; container.className = 'puzzle'; container.style.cssText = 'width:' + cols * size + 'px;height:' + rows * size + 'px;' + 'background-image:url(' + img.src + ');'; var i = 0; for (var row = 0; row < rows; row++) { board[row] = []; for (var col = 0; col < cols; col++) { var piece = create(row, col); piece.i = (i++).toString(36); board[row][col] = piece; map.push(piece.i); fragment.appendChild(piece); } } empty = board[0][0]; empty.className += ' empty'; shuffle(4); if ('ontransitionend' in container) { container.ontransitionend = function() { animating = false }; container.className += ' animated'; animated = true; } container.appendChild(fragment); } function create(row, col) { var piece = document.createElement('div'); piece.className = 'piece'; var left = col * size, top = row * size; piece.style.cssText = 'width:' + size + 'px;height:' + size + 'px;' + 'background-position:' + -left + 'px ' + -top + 'px;' + 'left:' + left + 'px;top:' + top + 'px;'; piece.onclick = click; return piece; } function shuffle(mode) { var i = mode * rows * cols; while (i) { var piece = board[Math.floor(Math.random() * rows)][Math.floor(Math.random() * cols)]; if (piece.onclick()) { i--; } } } function click(event) { if (this == empty || animating) { return; } var piece = this, row, col; var _piece = { row: parseInt(piece.style.top) / size, col: parseInt(piece.style.left) / size }; var _empty = { row: parseInt(empty.style.top) / size, col: parseInt(empty.style.left) / size }; if (_piece.row == _empty.row) { if (_piece.col > _empty.col) { for (col = _empty.col; col < _piece.col; col++) { board[_piece.row][col] = board[_piece.row][col + 1]; } board[_piece.row][col] = empty; } else { for (col = _empty.col; col > _piece.col; col--) { board[_piece.row][col] = board[_piece.row][col - 1]; } board[_piece.row][col] = empty; } if (animated) { animating = true; } for (col = 0; col < cols; col++) { board[_piece.row][col].style.left = col * size + 'px'; } } else if (_piece.col == _empty.col) { if (_piece.row > _empty.row) { for (row = _empty.row; row < _piece.row; row++) { board[row][_piece.col] = board[row + 1][_piece.col]; } board[row][_piece.col] = empty; } else { for (row = _empty.row; row > _piece.row; row--) { board[row][_piece.col] = board[row - 1][_piece.col]; } board[row][_piece.col] = empty; } if (animated) { animating = true; } for (row = 0; row < rows; row++) { board[row][_piece.col].style.top = row * size + 'px'; } } else { return false; } if (event) { moves++; if (check()) { success(moves); } } else { return true; } } function check() { var i = 0; for (var row = 0; row < rows; row++) { for (var col = 0; col < cols; col++) { if (map[i++] != board[row][col].i) { return; } } } return true; } } </script> </head> <body> <div class="puzzle"></div> <script> puzzle('https://i.imgur.com/MUUKLak.jpg', 100, function(m) { if (confirm('Success! ' + m + ' moves. Next page?')) { location = 'https://example.com/'; } }); </script> </body> </html> |
Написал шафл, потом почитал автора плагина: "At first, I was just going to randomly place all the elements, but I was worried that this could potentially lead to a board that was not solvable".
рони, думаете это правда? Оставлю здесь на всякий случай. function shuffle() { // Так может получиться нерешаемо? for (var row = 0; row < rows; row++) { for (var col = 0; col < cols; col++) { var _row = Math.floor(Math.random() * rows); var _col = Math.floor(Math.random() * cols); var piece = board[row][col]; var _piece = board[_row][_col]; board[row][col] = _piece; board[_row][_col] = piece; var left = piece.style.left, top = piece.style.top; var _left = _piece.style.left, _top = _piece.style.top; piece.style.left = _left; piece.style.top = _top; _piece.style.left = left; _piece.style.top = top; } } } |
Rise,
когда придумали пятнашки, многие прогорели, сделав пари, что сделают любую комбинацию, если мешать фишки не по правилам пятнашек "смена фишки с пустой", а хаотично, то есть шанс что выпадет комбинация без решения. |
|
Rise,
https://ru.wikipedia.org/wiki/%D0%98...0%B0_%D0%B2_15 Цитата:
|
рони, понятно, кстати у вас в примере ряды двигать нельзя. В моем случае алгоритм видимо будет: рандомно получить самый большой ряд ячеек из четырех направлений относительно пустой ячейки, рандомно получить ячейку из этого ряда, кликнуть ее, повторить n раз. Ладно, что-то не охота писать, оставим авторский вариант с рандомными кликами и возможными холостыми итерациями цикла.
|
Часовой пояс GMT +3, время: 12:50. |