Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.01.2020, 17:05
Новичок на форуме
Отправить личное сообщение для micrioni Посмотреть профиль Найти все сообщения от micrioni
 
Регистрация: 13.01.2020
Сообщений: 3

пазл .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();
					}
					);
			
			}
		}							
		
		);
}
Ответить с цитированием
  #2 (permalink)  
Старый 13.01.2020, 17:18
Новичок на форуме
Отправить личное сообщение для micrioni Посмотреть профиль Найти все сообщения от micrioni
 
Регистрация: 13.01.2020
Сообщений: 3

первая часть кода
// 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);
Ответить с цитированием
  #3 (permalink)  
Старый 13.01.2020, 17:19
Новичок на форуме
Отправить личное сообщение для micrioni Посмотреть профиль Найти все сообщения от micrioni
 
Регистрация: 13.01.2020
Сообщений: 3

вторая часть кода

// 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();
					}
					);
			
			}
		}							
		
		);
}
Ответить с цитированием
  #4 (permalink)  
Старый 13.01.2020, 18:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,578

micrioni,
лучше поискать пазл где предусмотрено окончание игры.
Ответить с цитированием
  #5 (permalink)  
Старый 16.01.2020, 07:33
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,261

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>
Ответить с цитированием
  #6 (permalink)  
Старый 16.01.2020, 07:34
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,261

Написал шафл, потом почитал автора плагина: "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, 16.01.2020 в 07:40.
Ответить с цитированием
  #7 (permalink)  
Старый 16.01.2020, 10:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,578

Rise,
когда придумали пятнашки, многие прогорели, сделав пари, что сделают любую комбинацию,
если мешать фишки не по правилам пятнашек "смена фишки с пустой", а хаотично, то есть шанс что выпадет комбинация без решения.
Ответить с цитированием
  #8 (permalink)  
Старый 16.01.2020, 10:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,578

Rise,
пример "правильной" перетасовки.
https://javascript.ru/forum/project/...html#post75072
Ответить с цитированием
  #9 (permalink)  
Старый 16.01.2020, 12:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,578

Rise,
https://ru.wikipedia.org/wiki/%D0%98...0%B0_%D0%B2_15
Цитата:
Поместите блоки в коробочку беспорядочным образом ... В этой версии задача оказывалась неразрешимой ровно в половине случаев.
Ответить с цитированием
  #10 (permalink)  
Старый 17.01.2020, 01:50
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,261

рони, понятно, кстати у вас в примере ряды двигать нельзя. В моем случае алгоритм видимо будет: рандомно получить самый большой ряд ячеек из четырех направлений относительно пустой ячейки, рандомно получить ячейку из этого ряда, кликнуть ее, повторить n раз. Ладно, что-то не охота писать, оставим авторский вариант с рандомными кликами и возможными холостыми итерациями цикла.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Мой собственный башорг в скайпе))) devote Оффтопик 81 03.10.2012 00:56
Психологическая деформация программистов DreamTheater Оффтопик 59 24.03.2012 04:03
фрактальный сыр x-yuri Оффтопик 76 23.11.2011 20:59
О фрилансе (Личный опыт) free Оффтопик 105 18.08.2011 17:02