Как создать приложение пазлы

Обновлено: 07.01.2025

Почему бы не представить в магазине приложений свой собственный пазл — как это сделали мы! В этом уроке я поэтапно расскажу о создании такого приложения. Итоговый результат будет выглядеть примерно так, как на фото. Чашку с кофе — и можно приступать.

Как настоящие программисты, для начала остановимся на том, что такое slider puzzle и как его реализовать. Наверное, все помнят детскую игру «пятнашки», где фишки с цифрами нужно было выстроить по порядку. В нашем случае это будут разрозненные фрагменты изображения, которые собираются в единое целое (их на один меньше, чтобы кусочки можно было перемещать). Теперь подумаем, что понадобится, чтобы воплотить такой проект в жизнь.

Для начала потребуется изображение, которое мы разделим на фрагменты. Разместим их в беспорядке, чтобы после снова собрать. Правда перед этим нужно как-то запомнить, где должен находиться тот или иной фрагмент. Для этого введем новый класс, который будет содержать как оригинальное, так и текущее положение каждого фрагмента в матрице (под матрицей понимается сетка, на которой формируется рисунок). Так мы сможем определить, собрал пользователь пазл или нет (сравнив для каждого фрагмента текущее положение с исходным). Следующая задача — определить разрешенные перемещения. Для этой цели заменим один из фрагментов пустым. На его место разрешается передвинуть соседний фрагмент. Ну вот, в принципе, и все. Если я что-то упустил, разберемся по ходу дела.
Итак, перечислим все, что необходимо сделать:

• разбить изображение;
• привязать каждую часть изображения к определенному фрагменту пазла (отвечающему за хранение его исходной и текущей позиции);
• перемешать беспорядочно все фрагменты (запускаем n-ный цикл, во время которого случайно выбранный фрагмент перемещается на место пустого);
• фиксируем касание пользователем фрагментов пазла; если перемещение разрешено, меняем местами пустой фрагмент с выбранным и проверяем, вернулось ли изображение к исходному состоянию.

Как обычно, нам понадобится новый контроллер "UIViewController". Создайте его и присвойте соответствующее имя. Теперь отыщите среди своих файлов подходящее изображение (по размерам чуть меньше представления).

Первая задача — разделить изображение на части. Создаем новый метод "initPuzzle:(NSString *) imagePath" — он разобьёт рисунок на отдельные фрагменты. Параллельно добавьте две константы, определяющие общее число фрагментов:

-( void ) initPuzzle:(NSString *) imagePath UIImage *orgImage = [UIImage imageNamed:imagePath];
if ( orgImage == nil ) return ;
>
tileWidth = orgImage.size.width/NUM_HORIZONTAL_PIECES;
tileHeight = orgImage.size.height/NUM_VERTICAL_PIECES;
for ( int x=0; x<NUM_HORIZONTAL_PIECES; x++ ) for ( int y=0; y<NUM_VERTICAL_PIECES; y++ ) CGRect frame = CGRectMake(tileWidth*x, tileHeight*y,
tileWidth, tileHeight );
CGImageRef tileImageRef = CGImageCreateWithImageInRect( orgImage.CGImage, frame );
UIImage *tileImage = [UIImage imageWithCGImage:tileImageRef];
UIImageView *tileImageView = [[UIImageView alloc] initWithImage:tileImage];
tileImageView.frame = frame;
// освобождаем ресурсы
[tileImage release];
CGImageRelease( tileImageRef );
// добавляем к представлению
[self.view insertSubview:tileImageView atIndex:0];
[tileImageView release];
>
>
>

* This source code was highlighted with Source Code Highlighter .

Запускаем приложение — на экране iPhone появляется изображение, уже поделенное на 9 фрагментов. Это сделал метод "GFImageCreateWithImageInRect" (Core Graphics), который принимает ссылку на изображение и прямоугольник, а возвращает ссылку на обрезанное изображение (в данном случае, по форме прямоугольника). Имея ссылку, приступаем к созданию экземпляра "UIImage".

Как уже упоминалось выше, для каждого фрагмента запоминается исходная позиция (чтобы определить окончание сборки пазла), а также текущее положение по отношению к сетке. Для этой цели расширим класс "UIImageView" и добавим еще два свойства. Дополнительно можно немного раздвинуть фрагменты, чтобы они больше напоминали стандартый пазл, и добавить пустой участок, открыв возможность перемещения.

Для начала внесем в заголовочный файл константы с промежутками вместе с переменными, отвечающими за позиции фрагментов (включая пустой).

В итоге заголовочный файл должен выглядеть примерно так:

* This source code was highlighted with Source Code Highlighter .

Заполнить пробелы в классе реализации предлагаю самостоятельно.

Теперь у нас есть заполнитель для фрагментов и пустого места — можно переходить к отображению отдельного фрагмента. Расширим класс "UIImageView" (рассмотренным выше способом) и добавим новые свойства.

@ interface Tile : UIImageView CGPoint originalPosition;
CGPoint currentPosition;
>
@property (nonatomic,readwrite) CGPoint originalPosition;
@property (nonatomic,readwrite) CGPoint currentPosition;
@end

@implementation Tile
@synthesize originalPosition;
@synthesize currentPosition;
- ( void ) dealloc
[self removeFromSuperview];
[super dealloc];
>
@end

* This source code was highlighted with Source Code Highlighter .

В комментариях к данному коду упомяну только, что после освобождения объекта мы удаляем его из родительского уровня. Объясняется это тем, что мы имеем дело с массивом фрагментов. Когда мы его отбрасываем (освобождаем), каждый из фрагментов должен удалить себя из представления.

• пропускать «пустой» фрагмент;
• к каждому фрагменту добавлять позицию в сетке;
• увеличить расстояние между фрагментами.

-( void ) initPuzzle:(NSString *) imagePath UIImage *orgImage = [UIImage imageNamed:imagePath];
if ( orgImage == nil ) return ;
>
[self.tiles removeAllObjects];
tileWidth = orgImage.size.width/NUM_HORIZONTAL_PIECES;
tileHeight = orgImage.size.height/NUM_VERTICAL_PIECES;
blankPosition = CGPointMake( NUM_HORIZONTAL_PIECES-1, NUM_VERTICAL_PIECES-1 );
for ( int x=0; x<NUM_HORIZONTAL_PIECES; x++ ) for ( int y=0; y<NUM_VERTICAL_PIECES; y++ ) CGPoint orgPosition = CGPointMake(x,y);
if ( blankPosition.x == orgPosition.x && blankPosition.y == orgPosition.y ) continue ;
>
CGRect frame = CGRectMake(tileWidth*x, tileHeight*y,
tileWidth, tileHeight );
CGImageRef tileImageRef = CGImageCreateWithImageInRect( orgImage.CGImage, frame );
UIImage *tileImage = [UIImage imageWithCGImage:tileImageRef];
CGRect tileFrame = CGRectMake((tileWidth+TILE_SPACING)*x, (tileHeight+TILE_SPACING)*y,
tileWidth, tileHeight );
Tile *tileImageView = [[Tile alloc] initWithImage:tileImage];
tileImageView.frame = tileFrame;
tileImageView.originalPosition = orgPosition;
tileImageView.currentPosition = orgPosition;
// освобождаем русурсы
[tileImage release];
CGImageRelease( tileImageRef );
[tiles addObject:tileImageView];
// добавляем к представлению
[self.view insertSubview:tileImageView atIndex:0];
[tileImageView release];
>
>
>

* This source code was highlighted with Source Code Highlighter .

Для начала очищаем массив, потом указываем пустую позицию последней в сетке. Для каждого фрагмента создаем описывающую его положение точку, привязывая ее к свойствам "originalPosition" и "currentPosition". Перед обработкой фрагмента проверяем, соответствует ли его позиция пустому положению. В случае подтверждения пропускаем фрагмент. Чуть не забыл — и добавляем его в массив фрагментов.

Закончив с этим, переходим к следующему этапу проекта. Теперь необходимо беспорядочно разместить фрагменты на экране, чтобы пользователю пришлось поломать голову над тем, как собрать изображение обратно. Запустив n-ное количество циклов, будем случайным образом выбирать один из фрагментов рядом с пустым, меняя их местами. Для этого сначала определим разрешенные перемещения, что легко выполнит приведенный ниже фрагмент кода:

* This source code was highlighted with Source Code Highlighter .

Здесь заданы n (количество случайных перемещения фрагментов) и тип "enum", с помощью которого будут различаться разрешенные и некорректные ходы.

Первый метод "validMove:(Tile *) tile" принимает фрагмент и возвращает enum "ShuffleMove", определяя, может ли перемещаться указанный фрагмент и в каком направлении. Для этого проверяется позиция фрагмента по отношению к пустому. Если указанный фрагмент соседствует с пустым, он может встать на его место.

-(ShuffleMove) validMove:(Tile *) tile // пустая точка над текущим фрагментом
if ( tile.currentPosition.x == blankPosition.x && tile.currentPosition.y == blankPosition.y+1 ) return UP;
>
// пустая точка под текущим фрагментом
if ( tile.currentPosition.x == blankPosition.x && tile.currentPosition.y == blankPosition.y-1 ) return DOWN;
>
// пустая точка слева от текущего фрагмента
if ( tile.currentPosition.x == blankPosition.x+1 && tile.currentPosition.y == blankPosition.y ) return LEFT;
>
// пустая точка справа от текущего фрагмента
if ( tile.currentPosition.x == blankPosition.x-1 && tile.currentPosition.y == blankPosition.y ) return RIGHT;
>
return NONE;
>

* This source code was highlighted with Source Code Highlighter .

Внедряем методы, ответственные за перемещение фрагмента. Их будет два: "(movePiece:(Tile *) tile withAnimation:(BOOL) animate)" определит, в каком направлении может двигаться фрагмент, и передаст задачу собственно перемещения следующему методу — "movePiece:(Tile *) tile inDirectionX:(NSInteger) dx inDirectionY:(NSInteger) dy withAnimation:(BOOL) animate)". Второй из методов рассчитывает разницу в координатах x и y (в зависимости от того, как именно по отношению к перемещаемому фрагменту расположен пустой) и на основании ее вычисляет новое положение, меняя местами значения "currentPosition" и "blankPosition". Если "animate" является истиной, заключаем параметры положения в операторы анимации.

-( void ) movePiece:(Tile *) tile withAnimation:(BOOL) animate switch ( [self validMove:tile] ) case UP:
[self movePiece:tile
inDirectionX:0 inDirectionY:-1 withAnimation:animate];
break ;
case DOWN:
[self movePiece:tile
inDirectionX:0 inDirectionY:1 withAnimation:animate];
break ;
case LEFT:
[self movePiece:tile
inDirectionX:-1 inDirectionY:0 withAnimation:animate];
break ;
case RIGHT:
[self movePiece:tile
inDirectionX:1 inDirectionY:0 withAnimation:animate];
break ;
default :
break ;
>
>

-( void ) movePiece:(Tile *) tile inDirectionX:(NSInteger) dx inDirectionY:(NSInteger) dy withAnimation:(BOOL) animate tile.currentPosition = CGPointMake( tile.currentPosition.x+dx,
tile.currentPosition.y+dy);
blankPosition = CGPointMake( blankPosition.x-dx, blankPosition.y-dy );
int x = tile.currentPosition.x;
int y = tile.currentPosition.y;
if ( animate ) [UIView beginAnimations: @"frame" context:nil];
>
tile.frame = CGRectMake((tileWidth+TILE_SPACING)*x, (tileHeight+TILE_SPACING)*y,
tileWidth, tileHeight );
if ( animate ) [UIView commitAnimations];
>
>

* This source code was highlighted with Source Code Highlighter .

Последним шагом создаем метод "shuffle", который, как уже упоминалось выше, будет выполнять цикл количество раз, соответствующее "SHUFFLE_NUMBER", хаотично перемещая фрагменты, для которых разрешено движение.

-( void ) shuffle NSMutableArray *validMoves = [[NSMutableArray alloc] init];
srandom(time(NULL));
for ( int i=0; i<SHUFFLE_NUMBER; i++ ) [validMoves removeAllObjects];
// выясняем, какие фрагменты могут перемещаться
for ( Tile *t in tiles ) if ( [self validMove:t] != NONE ) [validMoves addObject:t];
>
>
// случайным образом выбираем фрагмент для перемещения
NSInteger pick = random()%[validMoves count];
//NSLog(@"shuffleRandom using pick: %d from array of size %d", pick, [validMoves count]);
[self movePiece Tile *)[validMoves objectAtIndex:pick] withAnimation:NO];
>
[validMoves release];
>

* This source code was highlighted with Source Code Highlighter .

Ничего нового — делаем то, что и намечали. Для выбора разрешенного к перемещению фрагмента циклически перемещаемся между всеми, занося в массив те, что могут двигаться. Рассмотрев все фрагменты, случайным образом выбираем один и сдвигаем.

Осталось только вызвать нужный метод. К нижней части метода "initPuzzle(NSString *) imagePath" добавьте следующую строку:

* This source code was highlighted with Source Code Highlighter .

ОК. Теперь наши фрагменты отображаются на экране, причем в беспорядке. Осталось добавить интерактивности, чтобы пользователь мог их перемещать. Для этого зафиксируем касание и определим фрагмент, который нажал пользователь. Если фрагмент разрешен к перемещению, двигаем его.

Для начала внедрим вспомогательный метод, который будет возвращать привязанный к касанию пользователя фрагмент.

-(Tile *) getPieceAtPoint:(CGPoint) point CGRect touchRect = CGRectMake(point.x, point.y, 1.0, 1.0);
for ( Tile *t in tiles ) if ( CGRectIntersectsRect(t.frame, touchRect) ) return t;
>
>
return nil;
>

* This source code was highlighted with Source Code Highlighter .

Теперь, располагая информацией по касанию, определим, на каком фрагменте щелкнул пользователь. Отменяем метод "touchesEnded" и перемещаем выбранный фрагмент.

- ( void )touchesEnded:(NSSet *)touches withEvent:(UIEvent *) event UITouch *touch = [touches anyObject];
CGPoint currentTouch = [touch locationInView:self.view];
Tile *t = [self getPieceAtPoint:currentTouch];
if ( t != nil ) [self movePiece:t withAnimation:YES];
>
>

* This source code was highlighted with Source Code Highlighter .

Вот и все — перед вами собственный пазл. Само собой, еще нужно определить момент окончания игры. Добавьте к коду приведенный ниже метод и обращайтесь к нему каждый раз, когда метод "touchesEnded" перемещает фрагмент.

-(BOOL) puzzleCompleted for ( Tile *t in tiles ) if ( t.originalPosition.x != t.currentPosition.x || t.originalPosition.y != t.currentPosition.y ) return NO;
>
>
return YES;
>

* This source code was highlighted with Source Code Highlighter .

Остальное оставляю вам. Те, кому заканчивать лень, могут просто загрузить исходный код. :) Спасибо за внимание.

Библиотека Qt с давних пор позволяет разрабатывать приложения для Android на С++. Однако, при этом у вас обязательно возникнут проблемы — стандартные элементы интерфейса на телефонах будут выглядеть ужасно, вам придётся разрабатывать свои собственные или найти готовые.

При проектировании Пазлов, мне показалось возможным применение шаблона проектирования Декоратор. В статье описано почему это не получилось и о чем нужно задуматься если Вам тоже кажется подходящим этот паттерн.

PS. Очень прошу протестировать игрушку и, при возникновении проблем, - описать их в комментариях к статьи или отзывах на Google Play.

Лига программистов C/C++

44 поста 4.2K подписчика

Правила сообщества

Соблюдайте правила Pikabu:

Помимо этого ЗАПРЕЩЕНО:

- Размещать в сообществе посты стиля "Подскажите как стать программистом", "Подскажите как удалить вирус", "Подскажите как установить программу", "Подскажите как починить монитор/телевизор/мышь/тостер/клавиатуру" или "Напишите за меня лабу в универ". Пожалуйста размещайте такие посты вне этого сообщества или в соответствующих для этого сообществах.

Один лишь момент. Есть ли возможность залить фотку в большем разрешении? В данный момент это 10 шакалов из 10. Если же это лишь тестовый вариант, то извиняюсь, что влезаю.)

там много книг, можно кое что выбрать

Пишем игру "Жизнь" под Android используя C++ и Qt за час.

Всем привет! Недавно видел на пабликах типа ТП посты мол "делаем игру жизнь на java за час", "делаем игру жизнь на python за час", вот решил сделать пост, делаем игру жизнь под андроид используя C++ и библиотеки Qt за час.

Важно отметить что игра занимает

100 строчек кода(исключая h файлы, символы переноса и т.п.), а также то, что созданная игра будет работать и под винду, и под андроид, и под линукс, и под ios и под mac os x.

И так начнем. Правила игры жизнь я думаю вы знаете. Есть поле с клетками. Клетка может быть живая или мертвая. По прошествии хода, если вокруг мертвой клетки есть 3 живых, она становится живой. Если вокруг живой клетки будет 1 или 0 живых, то она становится мертвой, также она становится мертвой если вокруг нее более 3 живых клеток. Впринципе все, подробнее вы можете прочесть на википедии.

И так что у нас должно быть:

Поле с N*M клеток, кнопка "Новая игра", кнопка "Начать эволюцию". Поле забито прямогуольниками, изначально все пустые. При нажатии на клетку она окрашивается в черный или белый цвет, в зависимости от того какой цвет был там раньше.

2. Логика. Мы должны иметь двумерный массив(используем QT'шный вектор), в котором 0 отмечена мертвая клетка а единицей живая клетка. У меня была цель создать игру примерно за час, и поэтому этот 0 и 1 соответствуют черному и белому цветам многоугольников. Соответственно у нас есть массив с указателями на наши прямоугольники. Это не хорошо, ибо логика должна быть отделена от GUI, но для уменьшения размера кода - решил сделать так.

Должны быть реализованы функции подсчета соседей для каждой из клеток, зная положение клетки по X и Y. После каждого хода, мы рассчитываем количество соседей для каждой из клеток, и в зависимости от состояния клетки и количества её соседей добавляем клетку в массив(вектор), для изменения её состояния. Если за 1 ход не было добавлено ни 1 клетки, то игра заканчивается, выводим пользователю количество ходов

Если вы не знакомы с наследованием и библиотекой STD в C++, то вы являетесь новичком в C++ и возможно код покажется вам запутанным. К сожалению не хотелось бы писать про все это в этом посте, ибо для новичков информации в интернете - тонны, а переписывать еще раз это - просто не зачем. Если вы с этим знакомы, но незнакомы с сигнально-слотовой системой Qt тоже порекомендую прочитать over9000 материалов по этой теме. Если потребуются пояснения я отвечу в комментах.

И так, как выглядит GUI:

Скачиваем Qt Creator с официального сайта Qt(qt.io), выбираем бесплатный вариант для GPL приложений. Запускаемся, создаем новый проект, используя QWidget, с графической формой

Переходим к созданию. Переходим в режим дизайн и добавляем на форму "Graphics View" и 2 Push Button. Примерно вот так как на следующей картинке, и кликая правой кнопкой мыши по форме выбираем (Скомпоновать по сетке)

GUI готово! Теперь нам нужно перейти к непосредственно программированию.

QGraphicsView - это виджет, который может отображать графические элементы. QGraphicsView отображает элементы, который расположены на QScene. На QScene мы размешаем элементы в декартовой системе координат, а с помощью QGrahicsView мы её отображаем(можно поворачивать, увеличивать масштаб и т.п.).

Элементы бывают разных типов. Есть простые - QGraphicsRectItem - это многоугольник, который к слову нам и понадобиться. Есть QGraphicsPixMapItem который отобразит нам изображение. Есть QGraphicsLineItem - это линия. И другие.

И так, первая задача. Разместить на сцене N*M QGraphicsRectItem'ов - наших клеток. Мертвой клеткой будет считаться клетка, с Kletka->brush().color() == Qt::white живой Kletka-> brush().color() == Qt::black. И запихнуть все указатели на QGraphicsRectItem в отдельный двумерный вектор, чтобы мы могли с ними работать.

Однако, для этой задачи нам не подойдет "чистый" QGraphicsRectItem. Нужно будет создать класс наследник, и в нем реализовать свою обработку нажатия на клетку. Ведь в самом начале игры нам нужно будет выставить первичные мертвые и живые клетки на поле.

Т.е. по нажатию на наш прямоугольник, он должен окрашиваться в требуемый цвет. А у чистого QGraphicsRectItem обработка данного события пустая.

Создадим класс LifeRect основанный на QGraphicsRectItrem., и переопределим в нем mousePressEvent

Теперь займемся реализацией. Конструктор будет использовать конструктор с такими же параметрами как у QGraphicsRectItem(позиция по x, позиция по y, широта, высота, родитель). В событии mousePressEvent будет вызываться функция changeColor.

И так, переходим дальше. Работаем с нашим виджетом(формой) - widget.c. В этом классе реализуется логика игры.

Что нам необходимо?

1. Таймер. Каждые 0.1 секунды будет происходить 1 ход.

2. Слоты нажатия на кнопку "Старт" и "Новая игра" соответственно.

3. Размеры поля - X и Y клеток. Принимаются через конструктор.

4. Переменная для хранения количества итераций(для вывода при завершении игры)

5. Двумерный вектор(используется QVector, а не std::vector) который хранит указатели на созданные нами LifeRect'ы. К его элементам мы будем обращаться, и будем представлять живое и мертвое состояние по его цвету, как я уже и писал ранее. Если среди читателей будут новички C++ в комментах могу помочь. Просто представляйте что это массив.

6. Функция для новой игры(обнуление поля, обнуления количества итераций).

7. Функция подсчета живых соседей рядом.

И так, начнем. Собственно вот заголовочный файл:

В конструкторе присвоим начальные данные(x,y из входных, 0 итераций, укажем то что сцена пока-что пустая, родительский элемент отсутствует. Проинициализируем таймер, но запускать его не будем

Создать слот on_pushButton нужно нажав правой кнопкой по кнопке на форме, выбрать перейти к слоту, и выбрать сигнал clicked()

Дальше - интереснее. И так, по нажатию на кнопку новая игра, мы должны нарисовать графическую сцену, с X*Y мертвыми многоугольниками, и наполнить двумерный вектор указателей на многоугольники ими же. Чтобы потом,когда игрок заполнит поле и нажмет на кнопку "СТАРТ" запускается таймер, по каждому тику таймера обходить этот вектор, вычислить количество живых соседей каждой клетки, и перерисовать требуемые.

Постарался максимально прокомментировать код.

К слову говоря, позиции осей X и Y в графической сцене таковы:

И так, мы прорисовали свои элементы, и уже можем потыкать и поменять их цвета, но пока-что не можем ничего запустить. Нужно реализовать функцию обработки каждого хода. И написать что по 2 кнопке мы запускаем таймер.

Осталось лишь только реализовать функцию подсчета соседей. Думаю, в ней проблем не будет. Мы просто смотрим на цвета наших 8 соседей(если вылезли за границы то перемещаемся в начало или конец соответственно) и выдаем на выход их количество

Все готово! Запускаем и играем на Linux, Windows или вашем Mac.

Что потребуется(если вкратце) для запуска на Android?

1. Пакеты Android SDK и Android NDK(для C++).

2. Устройство андроид или AVD.

Вы должны сконфигурировать ваш Qt Creator, в таком виде(ваши пути), и добавить в проектах сборку Android. Потребуется скачать в AVD драйвера USB, и API требуемых версий Android. Затем уже попробовать установить приложение на телефон/эмулятор. Я могу помочь, или привести ссылки где это подробно разбирается в комментах

Дети любого возраста очень любят собирать пазлы. В процессе этой увлекательной игры у ребенка развивается внимание, мышление, усидчивость, аккуратность, терпение. Собирая картинку из ее элементов, малыш познает взаимосвязь между частями и целым.
В этой статье подробно рассказывается о том, как создать интерактивную игру ПАЗЛЫ в программе Power Point.

Для создания игры используем заготовку пазла.

Создаем пустой слайд, на него вставляем картинку, которую будем разрезать на части. Растягиваем ее по всей величине слайда. Слайд с картинкой дублируем 17 раз, потому что нам надо разрезать картинку на 16 частей, а 17-й слайд остается с неразрезанной картинкой, и будет служить образцом.

Создаем еще один пустой слайд, на котором будем собирать части пазла. Вырезаем первую часть пазла так:

2. Встаем на слайд с картинкой, ПКМ вызываем контекстное меню, выбираем команду Вставить. На картинке появляется часть пазла, размещаем ее на картинке, совмещая границы.

3. Выделяем картинку, затем выделяем часть пазла, идем: вкладка Формат – инструмент Объединение фигур – выбираем команду Пересечение, и видим, что на слайде остается лишь часть картинки.

4. Копируем ее, затем вставляем на свободный слайд.

5. Выделяем эту часть картинки, идем во вкладку Формат – Границы рисунка – выбираем цвет границы.

Слайд, на котором мы выполняли вырезание элемента картинки, нам больше не нужен, удаляем его.

Продолжаем создавать элементы пазла. На заготовке выделяем с зажатой клавишей Shift первый и второй элементы. Заходим во вкладку Формат – Группировать – Группировать.

Затем копируем то, что сгруппировали, и вставляем на следующий слайд с картинкой. Размещаем, совмещая угол, стороны. Идем: Формат – Группировать – Разгруппировать.

Далее выделяем сначала картинку, затем второй элемент пазла (соблюдайте точно такую последовательность). Идем во вкладку Формат – Объединение фигур – Пересечение.

Копируем вырезанный элемент картинки и вставляем на слайд.

Выполняем обводку для этого элемента: Формат – Границы рисунка – цвет границы.
Ненужный слайд удаляем.

Повторяем все ранее описанные действия для того, чтобы вырезать следующий – третий элемент пазла.

Таким образом каждый раз повторяем операции, пока не вырежем все 16 элементов слайда. В результате на слайде мы имеем все элементы, которым следует изменить их позиции (перемешать) перед тем, как предложить ребенку собрать картинку.

В презентации я создала три пазла и оставила заготовку для вырезания элементов картинки. Презентацию вы можете скачать здесь. Открыв её на своем компьютере, вам необходимо перейти в режим редактирования для того, чтобы пользоваться игрой.

Многие дети и взрослые любят собирать пазлы (puzzle, по-русски мозаика). Суть этой игры-гололомки в том, что нужно собрать картинку из ее кусочков разного размера. Традиционно пазлы покупаются в магазинах, но сейчас у любителей этой игры появилась возможность играть онлайн, а также создавать пазлы самостоятельно из любых картинок.

В этой статье рассказывается о нескольких сайтах, в которых можно собрать пазл из своего изображения, а также о том, как установить онлайн пазл на своем сайте.

Если вы хотите установить онлайн пазл на своем сайте — сервис Jigsaw Planet

На этом сайте вы можете без регистрации создать свой пазл из любого изображения. Его можно собирать как на самом сайте Jigsaw Planet, так и вставить код пазла на свой сайт, чтобы поиграть могли ваши посетители.

• По кнопке Image — Обзор выбираем изображение на своем компьютере, на основе которого будем создавать свой пазл

• В поле Name указываем свое имя пазла латинскими буквами или оставляем, как есть
• Поле Pieces — предназначено для указания количества частей, из которых будет состоять пазл. Чем меньше частей, тем они крупнее и пазл легче (Easy), и наоборот, если частей много, пазл сложный (Hard). По умолчанию программа предлагает 35 частей
• Поле Shape предназначено для выбора формы фрагментов, на которые будет разбит рисунок
• Установка галочки Rotation (ротация) делает пазл более сложным. Если галочка установлена, то при каждом открытии пазла, фигурки будут перемешаны
• Tags — необязательное поле, предназначено для ввода ключевых слов, по которым другие пользователи смогут находить ваш пазл, отделяются пробелом. Например, теги для картинки с тигром: animal, tiger

После этого вы перейдете на страничку с созданном вами пазлом и уже можете переходить к его решению: "берите" мышью фрагменты и "бросайте" на нужном месте. Правый щелчок мыши на кусочке переворачивает его.

На этой странице кнопки русифицированы: можно развернуть рабочее поле на весь экран, показать собираемое издображение, перемешать пазлы, сменить фон, начать заново и т.д.

Для установки этого пазла на свой сайт или для передачи в социальные сети нужно нажать кнопку Share и расшарить игру. Для установки на своем сайте выбираем Share — Embed, после чего откроется страничка настроек расшаривания.

• Image + Text Link (на вашем сайте будет отображаться картинка и текстовая ссылка на страницу сервиса с вашим пазлом) имеет 3 настройки:

• URL Address (на вашем сайте будет отображаться текстовая ссылка на страницу сервиса с вашим пазлом).

• Game — самое интересное: код пазла встраивается в страницу вашего сайта. Отрегулировать ширину и высоту можно в копируемом коде в строке: width — ширина поля игры на вашем сайте, height — высота. Можно поставить в проценах, можно в пикселах. Скопируйте код в нужное место на странице вашего сайта.

Вот пример такого размещения пазла на нашем сайте - играть >>>

Русский сервис создания пазлов Puzzle It

Нажимаем кнопку "Новый пазл" и далее заполняем все поля, по аналогии с первым сервисом. Созданный пазл можно лайнуть для размещения на страничках социальных сетей.

Поскольку сервис русский, то любому будет нетрудно смотреть за рейтингом своего пазла: сколько раз собрали, кто оставил комментарий и т.д.

В этом сервисе есть возможность предварительного сохранения результатов сборки, чтобы можно было продолжить. Автоматически сохранение происходит каждые 10 минут.

Другие сервисы создания пазлов

Также ранее я встречалась с программой, устанавливаемой на компьютере, которая позволяла не просто создать пазл из своей картинки, но и сохранить игру в формате Flash для передачи на другие компьютеры. К сожалению, среди онлайн-сервисов я такой возможности не нашла. А знаете ли вы такой сервис?

Спасибо за Вашу оценку. Если хотите, чтобы Ваше имя
стало известно автору, войдите на сайт как пользователь
и нажмите Спасибо еще раз. Ваше имя появится на этой стрнице.

Понравился материал?
Хотите прочитать позже?
Сохраните на своей стене и
поделитесь с друзьями

Вы можете разместить на своём сайте анонс статьи со ссылкой на её полный текст

Ошибка в тексте? Мы очень сожалеем,
что допустили ее. Пожалуйста, выделите ее
и нажмите на клавиатуре CTRL + ENTER.

Кстати, такая возможность есть
на всех страницах нашего сайта

0 Большое спасибо! Очень помогли: я придумала задания с пазлами, а как создавать, не знала.

0 0 Спам Здравствуйте. Хотелось бы узнать, есть ли возможность в русскоязычном сервисе распечатать пазл? Под кнопкой Спасибо и рекламой есть ссылка на скачивание материала. Прекрасное занятие, спасибо! А где можно скачать презентацию? Жаль что у самих преподавателей нет желания разрешить конфликт. Им дана власть н

Отправляя материал на сайт, автор безвозмездно, без требования авторского вознаграждения, передает редакции права на использование материалов в коммерческих или некоммерческих целях, в частности, право на воспроизведение, публичный показ, перевод и переработку произведения, доведение до всеобщего сведения — в соотв. с ГК РФ. (ст. 1270 и др.). См. также Правила публикации конкретного типа материала. Мнение редакции может не совпадать с точкой зрения авторов.

Для подтверждения подлинности выданных сайтом документов сделайте запрос в редакцию.

О работе с сайтом

Мы используем cookie.

Публикуя материалы на сайте (комментарии, статьи, разработки и др.), пользователи берут на себя всю ответственность за содержание материалов и разрешение любых спорных вопросов с третьми лицами.

При этом редакция сайта готова оказывать всяческую поддержку как в публикации, так и других вопросах.

Если вы обнаружили, что на нашем сайте незаконно используются материалы, сообщите администратору — материалы будут удалены.

Светлана Трушина 07.07.2018 8230 10

Трушина Светлана Юрьевна
Учитель музыки высшей квалификационной категории
Муниципальное бюджетное общеобразовательное учреждение
"Средняя общеобразовательная казачья школа"
с.Знаменка, Нерчинский район, Забайкальский край

Тема:
Создание интерактивного упражнения- онлайн пазла

Цель:
Обучение действиям по созданию интерактивного пазла.

Задачи:
1. Научить созданию самостоятельного пазла из картинки
2. Передать личный опыт по предложенной теме

Данный мастер-класс поможет любую иллюстрацию превратить в пазл.

Предполагаемый продукт:

Шаг 1

Шаг 2

Появляется страница для создания своего пазла. Выбираем на компьютере заранее приготовленную картинку для интерактивного задания.

Для выполнения пазла приготовлена иллюстрация

Шаг 3
Иллюстрация загружена, определяем количество частей, в примере- 30. Выбираем любую форму будущего пазла. Нажимаем кнопку- создать.

Шаг 4
Картинка разделена на части, пазл готов.

Шаг 6
Прокручиваем страницу вниз, под готовым упражнением нажимаем на выбор цвета- Background color.

Шаг 7
Для примера выбран жёлтый цвет фона пазла. Нажимаем- Ок( сохраняем)

Шаг 8
Пазл готов. Можно заранее создать пазлы для проведения уроков и сохранить их на странице своего портфолио. Такое творческое задание не требует наличия в кабинете интерактивной доски.

Шаг 9
Под пазлом копируем ссылку.

Шаг 10
В созданный инфоблок вставляем ссылку в окно для YouTube видео. Сохраняем- Ок.

Шаг 11
Наш пазл готов к выполнению интерактивного задания.

Читайте также:

  
• Как оплатить по qr коду альфа банк приложение
  
• Приложение шкода для айфона для подключения к машине
  
• Не получается закрепить приложение на начальном экране
  
• Как устанавливать приложения через cydia
  
• Как открыть приложение фото на компьютере