Распознавание изображений холста JS, написание небольшой игры Плагин «Прыгай и прыгай»

внешний интерфейс JavaScript Canvas

В конце 2017 года WeChat выпустил новую версию, ориентированную на концепцию «мини-игр». Игра H5 снова стала популярной. Игра, открытая в новой версии WeChat, представляет собой «прыгающую» игру с высокой степенью играбельности. а так же в интернете появились разного рода игры.Языковая версия плагина,я видел плагин построенный на nodejs несколько дней назад,нужно вручную нажимать на скриншот,чтобы определить текущую и следующую позицию и затем прыгать, поэтому я начал идею использовать Canvas для реализации изображения, а реализация есть позже.Если он автоматически прыгает, это все живо. Сегодня поговорим о распознавании изображений полностью.

Давайте посмотрим на окончательный эффект:

Весь код размещен: https://github.com/ksky521/wechat-jump-game-hack Добро пожаловать, попробуйте сами

Принцип обработки изображений Canvas

Доступ к холсту можно получить черезdrawImageДобавьте изображение выше, затем передайтеgetImageDataспособ получитьimageDataобъект, этот объект включаетdata,widthа также height, где data — ширина изображенияheightМассив 4 длины, каждый пиксель представлен в массиве как: RGBA Четыре значения от 0 до 255, а именно значения Red, Green, Blue и Alpha.

этимimageData.dataДля операции обхода вы можете использовать сравнение различий изображения, чтобы найти край объекта на изображении и центральную точку объекта, или вы можете сопоставить объект в определенном цветовом диапазоне на изображении, чтобы найти положение "маленький человек".

Функция сравнения разницы значений цвета

Сначала введите функциюtolerenceHelper, который используется для сравнения цветовой разницы, то есть передачи значения, которое необходимо сравнитьr,gа также b, а затем сравнить сrt,gt,btи диапазон разницыtфункция для сравнения, в диапазоне возвращаетtrue.

                                    
    
                                        
  1. 
                                            
    function tolerenceHelper(r, g, b, rt, gt, bt, t) {
    
                                        
    2. 
                                        
  2. 
                                            
        return r > rt - t && r < rt + t 
    
                                        
    3. 
                                        
  3. 
                                            
                && g > gt - t && g < gt + t 
    
                                        
    4. 
                                        
  4. 
                                            
                && b > bt - t && b < bt + t;
    
                                        
    5. 
                                        
  5. 
                                            
    }
    
                                        
    6. 
                                    

                                    скопировать код

Получить текущее местоположение злодея

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

    

  1. // 小人的颜色值
    2. 

  2.     const playerR = 40;
    3. 

  3.     const playerG = 43;
    4. 

  4.     const playerB = 86;
    5. 

скопировать код

Это значение можно получить, взяв цвет из нижнего центра злодея. Таким образом, способ найти нижнюю центральную точку злодея находится в пределах определенного диапазона (т.е.tolerenceHelpert, значение здесь равно 16) поиск, если точка пикселя rgb находится в этом диапазоне, она будет добавлена ​​для выбора, а положение самой нижней точки (максимум y) в конечном наборе точек пикселя равно y, x точки, где находится нижний центр злодея, является центральным положением максимальной и минимальной ширины. Для лучшего понимания нарисовал картинку:

Три картинки нижеt=16,t =26,t =36Для эффекта раздельной идентификации, для простоты идентификации я установил цвет совпадающих пикселей на красный (rgb=255, 0, 0).

Чтобы быть точным, чтобы предотвратить интерференцию похожих цветовt=16Достаточно, так что нижняя позиция злодеяposПросто получил:

                                        
    
                                            
  1. 
                                                
    // x, y
    
                                            
    2. 
                                            
  2. 
                                                
    pos[0] = Math.floor((maxX + minX) / 2);
    
                                            
    3. 
                                            
  3. 
                                                
    pos[1] = maxY;
    
                                            
    4. 
                                        

                                        скопировать код

оптимизация

С первого взгляда легко увидеть, что злодей не может быть вверху и внизу изображения, а находится в центральной области изображения, поэтому его можно рассматривать непосредственно с высоты изображения.height/4~  height *3 /4, что может увеличить ненужную рабочую нагрузку.

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

    

  1. function getCurCenter(data, width, height) {
    2. 

  2.     // 小人的颜色值
    3. 

  3.     const playerR = 40;
    4. 

  4.     const playerG = 43;
    5. 

  5.     const playerB = 86;
    6. 

    7. 

  7.     let minX = Infinity;
    8. 

  8.     let maxX = -1;
    9. 

  9.     let maxY = -1;
    10. 

  10.     // 找到小人当前的底部位置
    11. 

  11.     let pos = [0, 0];
    12. 

    13. 

  13.     let startY = Math.floor(height / 4);
    14. 

  14.     let endY = Math.floor(height * 3 / 4);
    15. 

  15.     for (let x = 0; x < width; x++) {
    16. 

  16.         for (let y = startY; y < endY; y++) {
    17. 

  17.             let i = y * (width * 4) + x * 4;
    18. 

  18.             let r = data[i];
    19. 

  19.             let g = data[i + 1];
    20. 

  20.             let b = data[i + 2];
    21. 

  21.             if (y > pos[1] && tolerenceHelper(r, g, b, playerR, playerG, playerB, 16)) {
    22. 

  22.                 minX = Math.min(minX, x);
    23. 

  23.                 maxX = Math.max(maxX, x);
    24. 

  24.                 maxY = Math.max(maxY, y);
    25. 

  25.             }
    26. 

  26.         }
    27. 

  27.     }
    28. 

  28.     pos[0] = Math.floor((maxX + minX) / 2);
    29. 

  29.     pos[1] = maxY;
    30. 

  30.     // console.log(`player position (x, y)= (${pos[0]}, ${pos[1]})`);
    31. 

  31.     return pos;
    32. 

  32. }
    33. 

скопировать код

Получить позицию для прыжка

Как получить позицию, куда злодей прыгает дальше?

По вышеописанной логике мы все же начинаем с высоты картинкиheight/4~  height *3 /4Поиск по диапазону, это мы сначала берем текущий цвет фона, а потом сканируем изображение в пределах диапазона высот.Когда появляется первая точка сильно отличающаяся от цвета фона, это и есть основное значение цвета следующего объекта! Если это четырехугольник или что-то подобное, то эта точка является вершиной!

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

Посмотрите на картинку, чтобы понять:

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

оптимизация

  1. После нахождения вершины следующая строка точно не maxY.По аналогии можно смело увеличить значение Y на 60 пикселей, то есть начать искать центральную точку на 60 пикселей вниз от вершины;

  2. Кроме того, вы можете сузить диапазон поиска Y до значения Y центральной точки злодея, найденного на предыдущем шаге, то есть значение y равноheight/4~Math.min(height*3/4, 小人中心Y), так что даже если мы не найдем maxY, мы можем взять центральную точку со злодеем за нижнюю, чтобы гарантировать, что следующая позиция прыжка не будет максимально превышать диапазон верхней поверхности объекта.

  3. Ищем maxY, поэтому пока есть точка того же цвета, что и пиксель вершины (в пределах диапазона), эту линию (координата Y та же, X разная) искать не надо, т.к. поиск бессмыслен, а значение Y остается неизменным. , так что вы можете напрямуюbreakВыйдите из цикла и найдите следующий Y

полный код

    

  1. function getNextCenter(data, width, height, y = -1) {
    2. 

  2.     let startY = Math.floor(height / 4);
    3. 

  3.     let endY = Math.floor(height * 3 / 4);
    4. 

    5. 

  5.     // 去除背景色
    6. 

  6.     let startX = startY * width * 4;
    7. 

  7.     let r = data[startX],
    8. 

  8.         g = data[startX + 1],
    9. 

  9.         b = data[startX + 2];
    10. 

  10.     let maxY = -1;
    11. 

  11.     let apex = [];
    12. 

  12.     let pos = [0, 0];
    13. 

  13.     // 保证从当前小人位置底部点往上
    14. 

  14.     endY = Math.min(endY, y);
    15. 

  15.     let endX = width;
    16. 

  16.     let gapCount = 0;
    17. 

  17.     for (let y = startY; y < endY; y++) {
    18. 

  18.         let find = 0;
    19. 

  19.         for (let x = 1; x < endX; x++) {
    20. 

  20.             let i = y * (width * 4) + x * 4;
    21. 

  21.             let rt = data[i];
    22. 

  22.             let gt = data[i + 1];
    23. 

  23.             let bt = data[i + 2];
    24. 

  24.             // 不是默认背景颜色
    25. 

  25.             if (!tolerenceHelper(rt, gt, bt, r, g, b, 30)) {
    26. 

  26.                 if (apex.length === 0) {
    27. 

  27.                     if (!tolerenceHelper(data[i + 4], data[i + 5], data[i + 6], r, g, b, 30)) {
    28. 

  28.                         //椭圆形找中心，往后找30个像素点
    29. 

  29.                         let len = 2;
    30. 

  30.                         while (len++ !== 30) {
    31. 

  31.                             i += len * 4;
    32. 

  32.                             if (tolerenceHelper(data[i + 4], data[i + 5], data[i + 6], r, g, b, 30)) {
    33. 

  33.                                 break;
    34. 

  34.                             }
    35. 

  35.                         }
    36. 

  36.                         x += len;
    37. 

  37.                     }
    38. 

  38.                     //找出顶点
    39. 

  39.                     apex = [rt, gt, bt, x, y];
    40. 

  40.                     pos[0] = x;
    41. 

  41.                     // 减少循环范围
    42. 

  42.                     endX = x;
    43. 

  43.                     break;
    44. 

  44.                 } else if (tolerenceHelper(rt, gt, bt, apex[0], apex[1], apex[2], 5)) {
    45. 

  45.                     //存在顶点了，则根据颜色值开始匹配
    46. 

  46.                     maxY = Math.max(maxY, y);
    47. 

  47.                     find = x;
    48. 

  48.                     break;
    49. 

  49.                 }
    50. 

  50.             }
    51. 

  51.         }
    52. 

  52.         if (apex.length !== 0 && !find) {
    53. 

  53.             gapCount++;
    54. 

  54.         }
    55. 

  55.         if (gapCount === 3) {
    56. 

  56.             break;
    57. 

  57.         }
    58. 

  58.     }
    59. 

  59.     pos[1] = Math.floor((maxY + apex[4]) / 2);
    60. 

  60.     // console.log(points_top, points_left, points_right);
    61. 

  61.     console.log(`next position center (x,y)=${pos[0]},${pos[1]}`);
    62. 

  62.     return pos;
    63. 

  63. }
    64. 

скопировать код

наконец

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

Для удобства отладки я отделяю эту часть кода как маршрутизатор, вы можете напрямую GitHub клонировать код для доступаlocalhost:3000/test, а затем попробуйте изменить его и посмотрите на эффект.

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

EOF @Sanshuiqing, пожалуйста, не перепечатывайте без разрешения. Почувствуйте себя полезным, добро пожаловать, чтобы обратить внимание на мой общедоступный номер
Категории