Обнаружение столкновений с использованием массива столкновений внутри html5 canvas

Question

Я пытаюсь определить, сталкивается ли символ и объект внутри изображения. Я использую функцию, которая может анализировать изображение и создает массив столкновений и другую функцию, которая может обнаруживать, произошло ли столкновение или нет в определенном месте. Моя проблема заключается в том, что функция isCollision никогда не выполнится, что мой jsfiddle: http://jsfiddle.net/AbdiasSoftware/UNWWq/1/

if (isCollision(character.x, character.y)) { 
    alert("Collision"); 
} 

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

Answer 1

ОК я нашел его:
Вы загружаете огромное фоновое изображение, и вы рисуете его часть на гораздо меньшем холсте.
Вы визуально обнаруживаете столкновение, используя двоичный вид на холсте дисплея, который вы создаете в функции process().
Проблема возникает, когда вы хотите протестировать: чтобы вычислить положение пикселя игрока в двоичном представлении, вы используете y * width + x, но с неправильной шириной - фонового изображения, когда это должно быть вид (cw).

function isCollision(x, y) { 
    return (buffer8[y * cw + x] === 1); 
} 

.
Перемещение направо и смотреть в консоль с этой скрипкой: http://jsfiddle.net/gamealchemist/UNWWq/9/

Answer 2

Добавьте это в верхней части метода init() и он должен работать:

FieldImg.crossOrigin = ''; 

Как вы загружаете изображение из другого происхождения CORS пинает и вы должны запросить использование перекрестного происхождения при использовании getImageData() (или toDataURL()).

See modified fiddle here.

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