Разрабатываем умный SHUFFLE для игры «Пятнашки» на JavaScript

preview_player
Показать описание
В видео будем вместе разрабатывать игру «Пятнашки»: верстка + JavaScript.

00:00 введение.
01:51 вспоминаем прошлый урок
04:44 алгоритм умного Shuffle
07:10 реализуем randomSwap
17:20 реализуем мульчи-вызов.
28:44 доработки

На канале я рассматриваю различные темы веб-разработки, на текущий момент: веб-основы, веб-анимации, веб-дизайн.
  1. Елена Литвинова — Искусство Веб-разработки 🛸
  2. css
  3. js
  4. уроки по js
  5. уроки по html
  6. уроки по css
Рекомендации по теме
Разрабатываем умный SHUFFLE 0:37:38

Разрабатываем умный SHUFFLE для игры «Пятнашки» на JavaScript

Shuffle array elements 0:00:17

Shuffle array elements #programming #developer #code #cleancode #js #javascript #jstutorial #ai

Пишем игру Шарики 0:20:13

Пишем игру Шарики на JavaScript (Часть 1)

shuffle an array 0:00:51

shuffle an array using the sort method in js #shorts

Разрабатываем игру «Пятнашки» 1:20:35

Разрабатываем игру «Пятнашки» на чистом JavaScript

Connect 4 game 0:01:09

Connect 4 game in phaser3

игра Пятнашки 0:00:44

игра Пятнашки

wb073 Пятнашки (массив 0:20:38

wb073 Пятнашки (массив на JS)

Объяснение самому себе 0:43:34

Объяснение самому себе оптимальных решений пятнашек 3x3...

Обзор готового проекта 0:02:15

Обзор готового проекта ученика Игра Пятнашки на JavaScript

Доказательство неразрешимости 'пятнашек', 0:26:45

Доказательство неразрешимости 'пятнашек', если поменять 14 и 15 местами...

wb074 Резиновые пятнашки 0:21:21

wb074 Резиновые пятнашки на JS

Пишем игру Пятнашки 0:23:28

Пишем игру Пятнашки на JavaScript (Часть 2)

Пишем игру Пятнашки 0:27:19

Пишем игру Пятнашки на JavaScript (Часть 1)

Головоломка Пятнашки (Taken) 0:57:37

Головоломка Пятнашки (Taken) на JavaScript, Урок третий.

РАЗОБЛАЧАЕМ САМЫЕ ИЗВЕСТНЫЕ 0:26:22

РАЗОБЛАЧАЕМ САМЫЕ ИЗВЕСТНЫЕ ФОКУСЫ !

Puzzle 15 in 0:04:18

Puzzle 15 in 5 minutes - JavaScript - 5minsofcode.com

Taken (Пятнашки) Урок 1:10:49

Taken (Пятнашки) Урок первый.

3. Рисуем линии. 0:06:43

3. Рисуем линии. P5.js Основы программирования интерактивной графики...

Отрывок платного урока 0:15:59

Отрывок платного урока 63 Соколов Виталий Создание игры головоломки шарики и линии на Delphi...

Пятнашки на голом 3:13:59

Пятнашки на голом JavaScript с нуля

Разработка игр на 1:27:25

Разработка игр на JS: Puzzle 15 (Пятнашки) #1

Steve Smith: Pathways 0:03:03

Steve Smith: Pathways of Motion: Sample Lesson - Matched Grip Hand Positions: Grip 1

Пятнашки/ Barley-break (2019) 0:00:35

Пятнашки/ Barley-break (2019) Мультатор

Комментарии
Автор

Спасибо за то, что доделали до финального варианта, а не оставили, как было в прошлом уроке! Так еще больше понимаешь, насколько ценный материал даете!

YaniaRZ
Автор

Добрый день, Елена! Всегда с нетерпением жду ваши уроки! Так объяснять материал, как это делаете Вы - дано далеко не каждому. Спасибо за ваш бесценный труд! 👏👏👏 👍

dr.margulis
Автор

Спасибо огромное за столь познавательное видео, ваш канал стал приятным открытием и хорошей помощью в изучении JS!👍

ЕвгенийЕ-бб
Автор

Привет! Спасибо) Очень нравится то что вы делаете, требую ещё :) Дальнейших успехов <3

nuZdarova
Автор

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

MrSukhopar
Автор

Минутка занудства:
Усложняете алгоритм перемешивания, вам достаточно определить "пустую" клетку и далее X+/- 1(первые два возможных хода) и Y+/-1(еще два возможных хода) проверить на принадлежность игровому полю и прошлому ходу. нет необходимости перебирать весь массив игрового поля. Да, для игры в пятнашки это не создаст нагрузки, но к сожалению сейчас и ресурсоемкие задачи зачастую решают так же, без оптимизаций совсем, насмотревшись вот таких решений в лоб :)(весь код не смотрел и не слушал, просто за это мозг зацепился пока на фоне играл ваш ролик)

ВладимирКлыков-тв
Автор

Лайк! Есть ли смысл писать эту игру на ООП?

AnatoliyMir
Автор

Добрый день, было бы прикольно реализовать memory game)

darfil
Автор

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

Tavda
Автор

Перемена местами 14 и 15 делает нерешаемую задачу если нельзя использовать третий ряд снизу. Это был рекламный трюк изобретателей или производителей, обещали деньги за решение.

ЭльвираСадыкова-эг