Question

我正在尝试用javascript画布制作一个简单的文字游戏。

我有一个类似于：

的网址

127.0.0.1:8000/join?scrambled_word=elolh&possible_words=hello&time=60

我需要在scrambled_word中显示每个字母，e，l，o，l，h作为按钮，并且能够随时检测到点击其中一个。

我尝试将scrambled一词作为char数组并循环显示并显示：

for (var i = 0; i < game.scrambleArr.length; i++) {
     ctx.font = "bold 20px verdana, sans-serif ";
     ctx.fillStyle = "#fff";
     //game.scrambleArr is just an array that contains the scrambled word from the url.
     ctx.fillText(game.scrambleArr[i], game.letterX, game.letterY);
     game.letterX += 40;
}

这个问题是，这使得每次点击一个字母都很难检测到。

如何显示这些字母并使其可点击？

Answer 1

如果你知道文本的起始位置，它的高度和字母之间的距离，你可以将click事件绑定到canvas，然后使用clientX检测点击的字母和mouse event的clientY属性，并将它们与字母位置进行比较：

＆＃13;

let game = {
  scrambleArr: ['e', 'l', 'o', 'l', 'h'],
  letterX: 20,
  letterY: 40
}

let canvas = document.getElementById('c');
let ctx = canvas.getContext("2d");

let x = game.letterX;

for (let i = 0; i < game.scrambleArr.length; i++) {
     ctx.font = "bold 20px verdana, sans-serif ";
     ctx.fillStyle = "#fff";
     ctx.fillText(game.scrambleArr[i], x, game.letterY);
     x += 40;
}

canvas.addEventListener('click', function(e) {
  var rect = canvas.getBoundingClientRect();
  let x = e.clientX - rect.left, y = e.clientY - rect.top;   
  if (y > game.letterY - 20 && y < game.letterY) {
    for (let i = 0; i < game.scrambleArr.length; i++) {
      let lx = game.letterX + i * 40;
      if (x > lx && x < lx + 40) {
        // we got the hit
        console.log(game.scrambleArr[i]);
      }
    }
  }
});

＆＃13;

canvas {
  background: lightgrey;
}
.as-console-wrapper { max-height: 5.3em !important; }

＆＃13;

<canvas id=c width=220 height=60></canvas>

＆＃13;

Answer 2

你需要学习主题“命中检测”，因为canvas是DOM的“原子”元素。

仅仅回答几行是不够的。

这是一个教程： https://blog.lavrton.com/hit-region-detection-for-html5-canvas-and-how-to-listen-to-click-events-on-canvas-shapes-815034d7e9f8

使用javascript在画布上创建多个按钮

2 个答案: