измените цвет кнопки в соответствии с тем, что мы хотим с Phaser 3 - PullRequest
Новая
       9

измените цвет кнопки в соответствии с тем, что мы хотим с Phaser 3

0 голосов
/ 08 января 2020

Я только учусь делать кнопку, чтобы изменить цвет кнопки, когда мы наводим курсор на одно кликабельное изображение. например, когда мы указываем курсор на одно из цветных изображений (красное, синее, желтое), затем, когда мы щелкаем по цветному изображению, которое нам нравится, например, нажимаем желтый цвет, тогда кнопка меняется на желтый, есть ли пример для меня в Phaser, который указывает на это, используя Phaser 3

Ответы [ 2 ]

0 голосов
/ 08 января 2020

Добавьте изображения и кнопку и используйте setTint() для изменения цвета кнопки. (Или setTintFill().) 

var image1 = this.add.image(....);
var image2 = this.add.image(....);
...
image1.setInteractive().on('pointerdown', function() {myButton.setTint(0xff0000)});
image2.setInteractive().on('pointerdown', function() {myButton.setTint(0x0000ff)});

Забавная вещь в вашем примере заключается в том, что вы хотите использовать изображения в качестве кнопок, а кнопки в качестве изображений ...

0 голосов
/ 08 января 2020

вы можете сделать это с ванилью JS, посмотрите на пример: https://codepen.io/lessadiogo/pen/yLyvxQQ

HTML: 

<div class="img" data-color="yellow" onclick="changeBtnColor('yellow')"></div>
<div class="img" data-color="green" onclick="changeBtnColor('green')"></div>
<button>I got changed!</button>

CSS: 

.img {
  width: 100px;
  height: 100px;
  float: left;
}
.img[data-color=yellow] {
  background-color: yellow;
}
.img[data-color=green] {
  background-color: green;
  margin-left: 15px;
}

button {
  margin: 15px;
  padding: 10px;
  font-size: 14px;
}

span {
  padding-top: 40px;
  clear: both;
  display: block;
  font-size: 12px
}

Javascript: 

function changeBtnColor(color) {
  document.querySelector('button').style.background = color
}

Надеюсь, это поможет.

...