Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript: HTML5 Canvas
Войти
Регистрация
Восстановить пароль
 
Корд
22 / 22 / 10
Регистрация: 22.03.2013
Сообщений: 270
1

Canvas определить цвет и/или картинку

12.01.2018, 17:25. Просмотров 240. Ответов 1

Доброго времени суток.
Строю лабиринт - 0, одна картинка. 1 - другая. По лабиринту ходит 3-ий элемент - тоже картинка.
Как отследить находится ли на координатах по которым идет следующий шаг - картинка стены, что бы запретить переход?
Пробовал отследить цвет стены, но она композитная, потому смысла не много. Мб есть какая-то функция которая подскажет, что под данными координатами на холсте лежит картинка?
Код для наглядности, использую фреймворк Konva.js
PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html>
<head>
    <script src="/js/jquery.js"></script>
    <script src="js/konva.js"></script>
    <script src="js/input.js"></script>
    <meta charset="utf-8">
    <title>Konva Game</title>
    <style>
    body {
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
     
    #container {
        margin: 20px auto;
        width: 600px;
        height: 600px;
        border: 2px solid black;
        background: black;
    }
    </style>
</head>
<body>
    <div id="container"></div>
</body>
<script>
$(document).ready(function(){
    var mass = [
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0],
      [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0],
      [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0],
      [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0],
      [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0],
      [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0],
      [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0],
      [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0],
      [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 1],
      [0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0],
      [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0],
      [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0],
      [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0],
      [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0],
      [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0],
      [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    ];
    var stage = new Konva.Stage({
          container: 'container',  // индификатор div контейнера
          width: 600,
          height: 600
    });
 
    var thisX = stage.width();
    var thisY = stage.height();
    // далее создаём слой
    var layer = new Konva.Layer();
    // объект трава
    grass = new Image();
    grass.src = '/img/028.png';
 
    //объект стена.
    brick = new Image();
    brick.src = '/img/030.jpg';
    X = 24;
    Y = 24;
 
    for (var j=0; j < mass.length; j++){
        for (var i=0; i < mass[j].length; i++){
            if (mass[j][i] == 0){
                var one = new Konva.Image ({
                    image: grass,
                    width: 24,
                    height: 24
                });
                layer.add(one);
                one.setX(X*i);
                one.setY(Y*j);
            }else{
                var two = new Konva.Image ({
                    image: brick,
                    width: 24,
                    height: 24
                });
                layer.add(two);
                two.setX(X*i);
                two.setY(Y*j);
            }
        }
    }
    player = new Image ();
    player.src = '/img/giphy.gif';
    var circle = new Konva.Image({
        x: 575,
        y: 575,
        image: player,
        width: 24,
        height: 24
    });
    layer.add(circle);
 
    stage.add(layer);
    
    var gameLoop = new Konva.Animation(function(frame) {
        handleInput();
    }, layer);
    gameLoop.start();
    
    
    function handleInput() {
        if(input.isDown('DOWN') || input.isDown('s')) {
            if ((circle.attrs.y + 1 < 576) && (checkCollision(circle.attrs.x, circle.attrs.y + 1)))
                circle.setY(circle.attrs.y + 1);
        }
        if(input.isDown('UP') || input.isDown('w')) {
            if ((circle.attrs.y - 1 > 0) && (checkCollision(circle.attrs.x , circle.attrs.y -1)))
                circle.setY(circle.attrs.y - 1);
        }
     
        if(input.isDown('LEFT') || input.isDown('a')) {
            if ((circle.attrs.x - 1 > 0) && (checkCollision(circle.attrs.x - 1, circle.attrs.y)))
                circle.setX(circle.attrs.x - 1);
        }
     
        if(input.isDown('RIGHT') || input.isDown('d')) {
            if ((circle.attrs.x + 1 < 576) && (checkCollision(circle.attrs.x + 1, circle.attrs.y)))
                circle.setX(circle.attrs.x + 1);
        }
    }
 
    function checkCollision(dx,dy){
        var b = document.querySelector('canvas');
        var d = b.getContext("2d");
        var h = d.getImageData(dx, dy, 1, 2);
        // Проверить нужное условие
        /*if ((h.data[0] != 0) && (h.data[1] != 0) && (h.data[2] != 0) && (h.data[3]) == 255){
            return false;
        }*/
        return true;
    }
})
</script>
</html>
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
12.01.2018, 17:25
Ответы с готовыми решениями:

Двигать картинку в canvas
было как-то нужно двигать картинку и картинка на холсте была только одна....

Загрузить картинку на canvas без потери качества
Добрый день! Делаю простенькую игру и понадобились спрайты. Создал канвас...

С помощью DrawImage canvas в цикле по данным из массива нарисовать картинку
Если рисовать картинку без использования массива то все нормально, но как...

SVG , Canvas , Js или css animation
Какая анимация будет лучше работать на устройствах ?Нужно минимально нагружать...

Что использовать для карты SVG или Canvas?
Суть проблемы вот в чем... я до этого делал картографическое десктопное...

1
Корд
22 / 22 / 10
Регистрация: 22.03.2013
Сообщений: 270
14.01.2018, 15:21  [ТС] 2
Поизучав материалы на данную тему выяснилось, что при случае, когда блоки у нас композитные и определить цвет мы не можем. Потому используется другой подход - перерисовка всей карты. ИМХО не оптимальный вариант, но другого я не нашел.
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
14.01.2018, 15:21

Как обновить капчу (или canvas) без ajax
Всем добрый день! Сделал капчу на JS, но не знаю как ее обновлять. Возможно ли...

Canvas html5, как разместить черный пискель в центре canvas'a?
как разместить черный пискель в центре canvas'a?

Проверить картинку (js или jquery)
Сразу хочу сказать, что задача на написание здорового костыля и я больше шарю в...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru