Форум программистов, компьютерный форум, киберфорум
Наши страницы

JavaScript: HTML5 Canvas

Войти
Регистрация
Восстановить пароль
 
Freekazoid
9 / 9 / 0
Регистрация: 07.09.2013
Сообщений: 94
#1

Отрисовка прототипа объекта внутри объекта - HTML5 Canvas

11.12.2017, 21:25. Просмотров 122. Ответов 0

Javascript
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
/* ### КАРТА рисуем карту ### */  
var dHexagon = function(x, y, w, h, color, /* line, */ koordX, koordY, map){ //прототип гексагональной фигуры
  this.x = x;
  this.y = y;
  this.w = w;
  this.h = h;
  this.map = map;
  this.color = color;
  this.user = []; // место для хранения игрока в ячейке на карте
  this.koordX = koordX;
  this.koordY = koordY;
  this.selected = false;
    this.pointed = false;
    this.menueted = false;
    this.menu = ["Пункт 01", "Пункт 02", "Пункт 03", "Пункт 04", "Пункт 05", "Пункт 06"];
};
dHexagon.prototype = {//прототип гексагональной фигуры
    draw: function(x, y, w, h){
      let facShort = 0.225, facLong = 1 - facShort, ugol = 0.5;
      ctx.beginPath();
      ctx.moveTo(this.x+this.w*ugol, this.y);
      ctx.lineTo(this.x, this.y+this.h*facShort);
      ctx.lineTo(this.x, this.y+this.h*facLong);
      ctx.lineTo(this.x+this.w*ugol, this.y+this.h);
      ctx.lineTo(this.x+this.w, this.y+this.h*facLong);
      ctx.lineTo(this.x+this.w, this.y+this.h*facShort);
      ctx.lineTo(this.x+this.w*ugol, this.y);
      ctx.closePath();
        ctx.lineWidth = 1; ctx.strokeStyle = this.color; ctx.stroke();
    if(this.pointed){ctx.lineWidth = 2; ctx.strokeStyle = "red"; ctx.stroke();  };// выделение при наведение
    if(this.selected){ctx.lineWidth = 4; ctx.strokeStyle = "rgb(16, 94, 214)"; ctx.stroke();}; // выделение по клику на клетку
    if(this.menueted){menus(this.x, this.y, this.w, this.h, this.menu);};// показываем меню по правому клику
    },
    isCursor: function(x,y,setka){
            return x > setka.x && x < setka.x + setka.w && y > setka.y && y < setka.y + setka.h;// определения наведения
    },
    select: function(){this.selected = !this.selected; },// переключатель наведения
    point: function(){this.pointed = !this.pointed; },// переключатель выделения
    menuis: function(){ this.menueted = !this.menueted; },// переключатель меню
};
  
 
 
 
/* ### ИГРОК то что не удается от рисовать ### */
 
var usPlayer = function(players, cord){// Создаем объект игрока
    this.id = players.id;
    this.x = cord.x;
    this.y = cord.y;
    this.w = players.w;
    this.h = players.h;
    this.img = players.img;
    this.name = players.name;
    this.selected = false;
    this.pointed = false;
    this.menueted = false;
    this.menu = ["Пункт 1", "Пункт 2", "Пункт 3", "Пункт 4", "Пункт 5", "Пункт 6"];
}       
    usPlayer.prototype = {  //прототип игрока 
        draw: function(id, x, y, w, h, img, name){// от рисовка игрока на карте
            
            
        if(this.selected){// вывод ника и другой инфы о игроке
            ctx.fillStyle = "#4e4e4e";
            ctx.fillRect(this.x-(this.w), this.y+(this.h), this.w*this.name.length/3, this.h/3);
            ctx.fillStyle = "orange";
            ctx.font = "0.6em Europe_Ext";
            ctx.fillText(this.name, this.x-(this.w)+2, this.y+(this.h+8)); };// выделение при наведение
            
        if(this.pointed){ /* ... */}; // выделение по клику на клетку
        if(this.menueted){menus(this.x, this.y, this.w, this.h, this.menu);};// показываем меню по правому клику
        },
        isCursor: function(x,y,user){ // определения наведения
            return x > user.x && x < user.x + user.w && y > user.y && y < user.y + user.h;
        },
        select: function(){this.selected = !this.selected;},// переключатель наведения
        point: function(){this.pointed = !this.pointed;},// переключатель выделения
        menuis: function(){ this.menueted = !this.menueted; },// переключатель меню
        
};
/* ### ИГРОК ### */
 
for(i in players) //Добавляем игрока в определенное место на карте
        setka[182].user.push(new  usPlayer(players[i], setka[182])); // Задаем 
 
 
 
ctx.clearRect(0, 0, canvas.width, canvas.height);
 
for(i in setka){ 
    setka[i].draw();   //рисуем сетку
    setka[182].user[0].draw(); // Должен от рисоваться игрок но console возвращает 'undefined'
    };
как можно от рисовать прототип фигуры внутри фигуры?
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
11.12.2017, 21:25
Здравствуйте! Я подобрал для вас темы с ответами на вопрос Отрисовка прототипа объекта внутри объекта (HTML5 Canvas):

Как вызвать метод hello внутри объекта? - JavaScript
&lt;script type=&quot;text/javascript&quot;&gt; const Obj = { hello: function() { console.log( 'Hello!' ); }, init: function() { ...

Перемещение объекта - JavaScript
Помогите сделать скрипт, который изменял положение картинки в зависимости от положения курсора пользователя. Так, при щелчке мышью в...

движение объекта - JavaScript
Всем привет. Скажу сразу в javascript я ещё понимая очень мало. Столкнулся с такой проблемой. Не знаю как реализовать движение объекта....

стиль объекта - JavaScript
Есть такой код: ol.dropdown li { list-style-image: url(&quot;plus.png&quot;); } ol.dropdown li ol...

Движение объекта - JavaScript
Вот код который двигает объект. Как сделать чтобы функция включалась только по нажатии клавиши var curx=0; //текущее положение слоя ...

Движение объекта - JavaScript
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;var drObj, offsetX, offsetY, bool = false; ...

0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
11.12.2017, 21:25
Привет! Вот еще темы с ответами:

Наследование объекта - JavaScript
Вопрос такой разработать объект человек и унаследовать все свойства объекту сотрудник. Не пойму как объект унаследует от объекта...

Копия объекта - JavaScript
Есть объект var table_ferm = { ... structure: , add: function(word){ ... ...

Использование объекта Array - JavaScript
Используя объект Array, создать массив случайных чисел.

длина и ширина объекта - JavaScript
есть код(bootstrap) &lt;div class=&quot;col-lg-2 col-md-1 col-sm-1 col-xs-0&quot;&gt;&lt;/div&gt; &lt;div class=&quot;col-lg-8 col-md-10 col-sm-10...


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

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

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