javascript - 我如何一次触摸多个东西，而不仅仅是一个在 html/javascript 中

Question

所以，我正在构建一个像控制器一样的网络，然后通过 websocket 发送数据，我遇到了一个问题，在谷歌上快速搜索后对我没有帮助。问题是当我将手指放在网络上时，它一次只能注册一个手指，所以当我移动操纵杆然后按下另一个按钮时，操纵杆将无法工作，直到我松开新手指。

我想问的是我怎样才能一次触摸多个东西，而不是一次只触摸一个

这是屏幕截图和代码

var canvas, ctx;

window.addEventListener('load', () => {

  canvas = document.getElementById('canvas');
  ctx = canvas.getContext('2d');
  resize();

  document.addEventListener('mousedown', startDrawing);
  document.addEventListener('mouseup', stopDrawing);
  document.addEventListener('mousemove', Draw);

  document.addEventListener('touchstart', startDrawing);
  document.addEventListener('touchend', stopDrawing);
  document.addEventListener('touchcancel', stopDrawing);
  document.addEventListener('touchmove', Draw);
  window.addEventListener('resize', resize);

  document.getElementById("x_coordinate").innerText = 0;
  document.getElementById("y_coordinate").innerText = 0;
  document.getElementById("speed").innerText = 0;
  document.getElementById("angle").innerText = 0;
});




var width, height, radius, x_orig, y_orig;

function resize() {
  width = 250;
  radius = 50;
  height = 250;
  ctx.canvas.width = width;
  ctx.canvas.height = height;
  background();
  joystick(width / 2, height / 3);
}

function background() {
  x_orig = width / 2;
  y_orig = height / 3;

  ctx.beginPath();
  ctx.arc(x_orig, y_orig, radius + 20, 0, Math.PI * 2, true);
  ctx.fillStyle = '#ECE5E5';
  ctx.fill();
}

function joystick(width, height) {
  ctx.beginPath();
  ctx.arc(width, height, radius, 0, Math.PI * 2, true);
  ctx.fillStyle = '#F08080';
  ctx.fill();
  ctx.strokeStyle = '#F6ABAB';
  ctx.lineWidth = 8;
  ctx.stroke();
}

let coord = {
  x: 0,
  y: 0
};
let paint = false;

function getPosition(event) {
  var mouse_x = event.clientX || event.touches[0].clientX;
  var mouse_y = event.clientY || event.touches[0].clientY;
  coord.x = mouse_x - canvas.offsetLeft;
  coord.y = mouse_y - canvas.offsetTop;
}

function is_it_in_the_circle() {
  var current_radius = Math.sqrt(Math.pow(coord.x - x_orig, 2) + Math.pow(coord.y - y_orig, 2));
  if (radius >= current_radius) return true
  else return false
}


function startDrawing(event) {
  paint = true;
  getPosition(event);
  if (is_it_in_the_circle()) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    background();
    joystick(coord.x, coord.y);
    Draw();
  }
}


function stopDrawing() {
  paint = false;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  background();
  joystick(width / 2, height / 3);
  document.getElementById("x_coordinate").innerText = 0;
  document.getElementById("y_coordinate").innerText = 0;
  document.getElementById("speed").innerText = 0;
  document.getElementById("angle").innerText = 0;

}

function Draw(event) {

  if (paint) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    background();
    var angle_in_degrees, x, y, speed;
    var angle = Math.atan2((coord.y - y_orig), (coord.x - x_orig));

    if (Math.sign(angle) == -1) {
      angle_in_degrees = Math.round(-angle * 180 / Math.PI);
    } else {
      angle_in_degrees = Math.round(360 - angle * 180 / Math.PI);
    }


    if (is_it_in_the_circle()) {
      joystick(coord.x, coord.y);
      x = coord.x;
      y = coord.y;
    } else {
      x = radius * Math.cos(angle) + x_orig;
      y = radius * Math.sin(angle) + y_orig;
      joystick(x, y);
    }


    getPosition(event);

    var speed = Math.round(100 * Math.sqrt(Math.pow(x - x_orig, 2) + Math.pow(y - y_orig, 2)) / radius);

    var x_relative = Math.round(x - x_orig);
    var y_relative = Math.round(y - y_orig);


    document.getElementById("x_coordinate").innerText = x_relative;
    document.getElementById("y_coordinate").innerText = y_relative;
    document.getElementById("speed").innerText = speed;
    document.getElementById("angle").innerText = angle_in_degrees;

    //send( x_relative,y_relative,speed,angle_in_degrees);
    //send(angle_in_degrees, speed, x_relative, y_relative);
  }
}

body {
  margin: 0;
  padding: 0;
}

.wrapper {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.top-buttons,
.bot-buttons {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.bot-buttons {
  height: 100%;
}

.top-buttons>.left,
.top-buttons>.right {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.bot-buttons>.left {
  width: 100%;
  display: flex;
  margin: auto 0 auto 0;
}

.bot-buttons>.right {
  width: auto;
  margin: auto 50px auto auto;
  display: flex;
  flex-direction: row;
}

.bot-buttons>.right>.xyab {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.bot-buttons>.right>.xyab>.xb,
.bot-buttons>.right>.xyab>.a,
.bot-buttons>.right>.xyab>.y {
  display: flex;
  width: 100%;
}

.bot-buttons>.right>.xyab>.xb {
  flex-direction: row;
}

.bot-buttons>.right>.xyab>.xb>.x,
.bot-buttons>.right>.xyab>.xb>.b {
  display: flex;
  width: 100%;
}

#lt {
  width: 70px;
  height: 70px;
  background: url(assets/360_LT.png) no-repeat;
  background-size: 70px 70px;
}

#lb {
  width: 70px;
  height: 70px;
  background: url(assets/360_LB.png) no-repeat;
  background-size: 70px 70px;
  margin-left: 100px;
}

#rt {
  width: 70px;
  height: 70px;
  background: url(assets/360_RT.png) no-repeat;
  background-size: 70px 70px;
  margin-left: 100px;
}

#rb {
  width: 70px;
  height: 70px;
  background: url(assets/360_RB.png) no-repeat;
  background-size: 70px 70px;
  margin-left: auto;
}

#x {
  width: 50px;
  height: 50px;
  background: url(assets/360_X.png) no-repeat;
  background-size: 50px 50px;
  margin: auto 20px auto auto;
}

#y {
  width: 50px;
  height: 50px;
  background: url(assets/360_Y.png) no-repeat;
  background-size: 50px 50px;
  margin: auto;
}

#a {
  width: 50px;
  height: 50px;
  background: url(assets/360_A.png) no-repeat;
  background-size: 50px 50px;
  margin: auto;
}

#b {
  width: 50px;
  height: 50px;
  background: url(assets/360_B.png) no-repeat;
  background-size: 50px 50px;
  margin: auto auto auto 20px;
}

button,
input[type="submit"],
input[type="reset"] {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}

<html>

<head>
  <title>XBOX 360 Virtual</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

</head>

<body scroll="no" style="overflow: hidden;position: fixed;">
  <div class="wrapper">
    <div class="top-buttons">
      <div class="left">
        <button id="lt"></button>
        <button id="lb"></button>
      </div>
      <div class="right">
        <button id="rb"></button>
        <button id="rt"></button>
      </div>
    </div>
    <div class="bot-buttons">
      <div class="left">
        <div class="lsb">
          <p style="text-align: center;">
            X: <span id="x_coordinate"> </span> Y: <span id="y_coordinate"> </span> Speed: <span id="speed"> </span> % Angle: <span id="angle"> </span>
          </p>
          <canvas id="canvas" name="game"></canvas>
        </div>
      </div>
      <div class="right">
        <div class="xyab">
          <div class="y">
            <button id="y"></button>
          </div>
          <div class="xb">
            <div class="x">
              <button id="x"></button>
            </div>
            <div class="b">
              <button id="b"></button>
            </div>
          </div>
          <div class="a">
            <button id="a"></button>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

这是图像：

标签： javascripthtml