JS Canvas-Collision-Detection с использованием getImageData

Как очень неопытный программист, я пытаюсь закодировать игру, которая обнаруживает, когда игрок сталкивается с определенными цветами на холсте. У меня есть черный квадрат с координатами «player.x» и «player.y» и размеры 50x50, которые перемещаются, когда вы нажимаете клавиши со стрелками. У меня также есть неподвижный красный (255,0,0) квадрат в другом месте на холсте.JS Canvas-Collision-Detection с использованием getImageData

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

function collideTest(){ 
    var canvas = document.getElementById("canvas"); 
    var c = canvas.getContext("2d"); 

    var whatColor = c.getImageData(player.x - 5, player.y - 5,60,60); 

    for (var i = 0; i < 3600; i++) { 
     if (whatColor.data[i] == 255) { 
      alert("red"); 
     } 
    } 
}

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

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

Заранее благодарим за любую помощь!

источник

2013-02-09 trevnewt

Для каждого отдельного пикселя на холсте массив whatColor.data содержит 4 последовательных фрагмента информации о цвете: красный, зеленый, синий, альфа (непрозрачность). Итак, whatColor.data выглядит так для каждого пикселя:

whatColor.data [i] - красный компонент цвета.

whatColor.data [i + 1] - зеленый компонент цвета.

whatColor.data [i + 2] - синий компонент цвета.

whatColor.data [i + 3] является компонентом альфа (непрозрачность) цвета.

Так что ваша итерация будет выглядеть следующим образом (4 индексы на пиксель):

for(var i = 0, n = whatColor.data.length; i < n; i += 4) { 
     var red = whatColor.data[i]; 
     var green = whatColor.data[i + 1]; 
     var blue = whatColor.data[i + 2]; 
     var alpha = whatColor.data[i + 3]; 
     if(red==255){ ... it's a hit, do your thing! ... } 
}

Смотрите здесь для мини-учебник по массиву imageData.data: http://www.html5canvastutorials.com/advanced/html5-canvas-get-image-data-tutorial/

Кстати, вы могли бы посмотрите на одну из холстовных библиотек, которые упрощают создание игр с помощью холста. Вот лишь несколько: easelJs, KineticJs, FabricJs и многое другое!

источник

2013-02-09 20:43:29 markE

Спасибо за ответ! Однако, как я подозревал, содержимое самой функции, похоже, не является проблемой. Даже когда я делаю то, что вы там написали, я не получаю ответа при попадании в красный цвет. Может быть, дело в том, как называется функция? – trevnewt

До тех пор, пока collideTest() вызывается после того, как холст был полностью отображен, тогда collideTest() - это подходящее место для тестирования hit. Хотя я не знаю о вашей логике программы, если вы знаете координаты + размеры как черного ящика, так и красной рамки, вы можете выполнить тестирование, анализируя их два ограничивающих прямоугольника. – markE

var whatColor = c.getImageData(player.x - 5, player.y - 5,60,60);

player.x и player.y не должен быть десятичным, убедитесь, что они округлые или getImageData будет сердиться и не играть хорошо.

источник

2016-03-05 16:36:28

JS Canvas-Collision-Detection с использованием getImageData

ответ

Смежные вопросы