Question

我需要创建一个由几个按钮组成的游戏对象，或者一个精灵，它会对精灵的不同部分的点击产生不同的反应。我正在使用Phaser框架。我有一个非常简单的精灵代表一个芯片，有两个小输入，一个主体（矩形）和一个小输出。我想让游戏根据点击的部分做不同的事情。最好的做法是为每个项目创建不同的按钮和精灵，并以某种方式将它们组合在一起？或者我可以使用一个精灵，并以某种方式为每个部分定义不同的功能？

Answer 1

你可以通过无数种方式实现这一目标。这里只有其中一个。使用画布绘制spirte，并根据精灵黑色区域内的x，y位置检测点击evnet位置。

var canvas = document.getElementById('game_canvas');

var cnvLeft = canvas.offsetLeft,
  cnvTop = canvas.offsetTop;
var chip = {
  x: 20,
  y: 20,
  width: 90,
  height: 40
};


var ctx = canvas.getContext('2d');

ctx.fillRect(chip.x, chip.y, chip.width, chip.height);


canvas.addEventListener('click', function(event) {
  var x = event.pageX - cnvLeft,
    y = event.pageY - cnvTop;
  if (x > chip.x && x < chip.x + chip.width / 2 && y > chip.y && y < chip.y + chip.height) {
    ctx.fillStyle = "gold";
    ctx.fillRect(chip.x, chip.y, chip.width / 2, chip.height);
    console.log('You clicked my left side');
  } else if (x > chip.width / 2 && x < chip.x + chip.width && y > chip.y && y < chip.y + chip.height) {
    ctx.fillStyle = "cyan";
    ctx.fillRect(chip.x + chip.width / 2, chip.y, chip.width / 2, chip.height);
    console.log('You clicked my right side');
  }
})

<h3>Click the black area</h3>

<canvas id="game_canvas" width="300" height="200"></canvas>

带有多个按钮的JavaScript游戏对象

1 个答案: