Напишите несколько небольших игр с Vue, чтобы играть

Vue.js

awesome

Попросите звезду (спасибо, господа зрители~)

Гитхаб:GitHub.com/ordinary A/A…

Онлайн-демонстрация

Тральщик

awesome

идеи

  1. Каждая клетка шахматной доски делится на один из трех типов:
  • Гром: эммм это гром
  • Числа: количество девяти дворцов Гнере в центре текущей сетки.
  • Пусто: в сетке из девяти квадратов с центром в текущей сетке нет молнии.
  1. При щелчке по сетке возможны три ситуации, соответствующие вышеперечисленным трем типам:
  • Рэй: эммм игра окончена
  • Число: отображение текущего числа, запрашивающее у пользователя количество мин.
  • Пусто: необходимо рекурсивно искать число типа сетки, чтобы остановить рекурсию с текущей выбранной сеткой в ​​качестве центра, как показано на рисунке.

awesome

рекурсия

  1. Предположим, вы нажимаете координаты пустой ячейки[x,y], координаты остальных восьми сеток с центром в нем:
            const arr = [
                //获取九宫格数据
                [x - 1, y - 1], //左上
                [x, y - 1], //中上
                [x + 1, y - 1], //右上
                [x - 1, y], //中左
                [x + 1, y], //中右
                [x - 1, y + 1], //左下
                [x, y + 1], //中下
                [x + 1, y + 1] //右下
            ];
  1. Отфильтруйте координаты за пределами границ, чтобы получить двумерный массив координат:
            const [maxX, maxY] = this.boardSize; //棋盘的边界值
            const filterArr = arr.filter(
                ([posX, posY]) =>
                    !(posX < 0 || posY < 0 || posX >= maxX || posY >= maxY)
            );
  1. Пройдите набор координат, а затем рекурсивно получите другой набор из восьми координат, центрированных на каждом элементе;
    awesome
  2. Когда тип определенной координаты не является пустым и является числом на пути рекурсии, рекурсия останавливается, как показано на следующем рисунке:
    awesome

Нажмите красный, чтобы пройти наружу => фиолетовая стрелка => зеленая стрелка (найдите числовую сетку) => пропустите рекурсию зеленой стрелки => начните рекурсию черной стрелки

  1. Чтобы избежать повторной рекурсии определенной координаты в процессе рекурсии, к каждому объекту проверки добавляется логическое значение того, была ли добавлена ​​рекурсия, и повторной рекурсии можно избежать, оценивая
  2. В итоге вы получите шахматную доску с расширенными границами цифровых сеток;

awesome

эмммм плевать на стиль рисования.

флаг

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

Правильный мой (нормальное отображение) Разряженные мины (мины на зеленом фоне) Шахматные мины (мины на красном фоне)

awesome

Заканчивать!

трубочная птица

awesome

Объекты птиц с коллекцией труб

const bird = {
               top, //鸟的top值
               right, //鸟的right值
               sports, //记录运动状态来更改跳跃和下坠动画
             };
             
const pipe = {
               right, //管道的right值
               topPipeTop, //上管道的top值
               topPipeSrc, 上管道的资源地址
               bottomPipeTop, //下管道的top值
               bottomPipeSrc, //下管道的资源地址
               isCross, //管道是否已被小鸟通过
             };

Более важные моменты:

  • Скорость падения и скорость подбрасывания птицы вверх (указывает на то, что все они были возвращены учителю физики, а я зашел в интернет проверить формулу (┬_┬))
  • При обходе конвейерной коллекции, когда последний элемент находится на определенном расстоянии от правой границы, тогдаpushтрубный объект,unshiftскинь первый предмет
  • Когда птица проходит через набор верхних и нижних конвейеров, объект добавит новую запись, и она будет пропущена, если она существует во время обхода.
  • Оценка граничного значения и значения ошибки

Оценка границы трубопровода

Есть три состояния, когда птица проходит через трубу

  • на пути к трубопроводу или в трубопроводе
  • Потерпеть поражение
  • успех
    Когда птица успешно пролетит над трубой, запишите текущую трубуisCrossПоле, пройденное птицами.

Заканчивать

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

жадная змея

awesome

Создайте прожорливую змею 🐍 и ее еду 🎂

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

  • Змеиная голова:[~~(Math.random() * (棋盘宽度 - 蛇长 - 1) + 1),~~(Math.random() * (棋盘高度 - 蛇长 - 1) + 1)];
  • Змеиное тело: его можно получить случайным перемещением по координатам вверх или вниз по координатам головы змеи.
  • Структура данных Snake: в итоге получится двумерный массив, подобный тому, что справа[[10,10],[10,11],[10,12],[10,13],[10,14]]
  • Питание: ПассwhileПросто пройдите координату, которая не принадлежит 🐍

Заставь змею двигаться 🐍

В соответствии с направлением движения текущая координата оси первого элемента змеи равна +1, а хвостовой элемент набора змей удаляется, и змея движется! нам нужно:

  1. Привяжите событие клавиатуры, чтобы задать направление движения змеи, когда пользователь нажимает на нее;
  2. Определите, есть ли граничная проблема или тело змеи, пройдя через голову змеи;
  3. Определить, совпадают ли координаты головы змеи с координатами еды;
  4. Когда змея «ест» пищу, элемент хвоста змеи не удаляется;

ты закончил

Далее вы можете добавить к жадной змее некоторые функции Инь (цветок) дуновение (ли) Си (Ху) Тин (свист) жадной змее 🐍!

Категории