要使用脸部位置来控制javascript中的播放器

Question

[我正在尝试用JavaScript编写脚本，其中人脸的位置可以用作播放器的位置。

因此，我具有使播放器向左移动的功能和具有使播放器向右移动的功能。当脸向左移动时，应调用向左移动的功能。右边也是一样。

此刻，我完全陷入困境，希望有人能帮助我！我试图使它与库一起工作：tracker.js和faceDetection.js，但是如果有人有另一个更好的选择，那就太好了。

因此，当按下左箭头或右箭头时，应该调用playerMove函数

function playerMove(offset) {
player.pos.x += offset;
if (collide(arena, player)) {
    player.pos.x -= offset;
}
   }



document.addEventListener('keydown', event => {
if (event.keyCode === 37) {
    playerMove(-1);
} else if (event.keyCode === 39) {
    playerMove(1);
} else if (event.keyCode === 40) {
    playerDrop();
} else if (event.keyCode === 81) {
    playerRotate(-1);
} else if (event.keyCode === 87) {
    playerRotate(1);
}
});

Answer 1

这里有一些基本示例，您可以从这里开始。 :-D

const faceImg = document.getElementById("face");
const [TOP, BOTTOM, LEFT, RIFHT, ROTATE_L, ROTATE_R] = [38, 40, 37, 39, 81, 87];
const px = (t) => Number(t.split("px")[0]);
function playerMove([x, y]) {
  y && (faceImg.style.bottom = `${px(faceImg.style.bottom) + y}px`);
  x && (faceImg.style.left = `${px(faceImg.style.left) + x}px`);
}
function rotate(angle) {
  faceImg.className = "";
  faceImg.classList.add(angle);
}
document.addEventListener("keydown", (event) => {
  if (event.keyCode === TOP) {
    playerMove([, 50]);
  } else if (event.keyCode === BOTTOM) {
    playerMove([, -50]);
  } else if (event.keyCode === LEFT) {
    playerMove([-50]);
  } else if (event.keyCode === RIFHT) {
    playerMove([50]);
  } else if (event.keyCode === ROTATE_L) {
    rotate("spine_l");
  } else if (event.keyCode === ROTATE_R) {
    rotate("spine_r");
  }
});

.container {
  position: relative;
  width: 300px;
  margin: 0 auto;
  height: 300px;
  margin-bottom: -100px;
  padding-bottom: 50px;
  border: 1px solid;
}

#face {
  position: absolute;
  width: 50px;
  height: 50px;
  bottom: 0;
  left: 0;

}

#face.spine_l {
  -webkit-animation: spin_l 1s linear;
  -moz-animation: spin_l 1s linear;
  animation: spin_l 1s linear;
}
@-moz-keyframes spin_l { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin_l { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin_l { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

#face.spine_r {
  -webkit-animation: spin_r 1s linear;
  -moz-animation: spin_r 1s linear;
  animation: spin_r 1s linear;
}
@-moz-keyframes spin_r { 100% { -moz-transform: rotate(-360deg); } }
@-webkit-keyframes spin_r { 100% { -webkit-transform: rotate(-360deg); } }
@keyframes spin_r { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } }

<pre>TOP | BOTTOM | LEFT | RIGHT | Q | W</pre>
    <div class="container">
        <img id="face"
            src="https://library.kissclipart.com/20180906/kwq/kissclipart-face-icon-clipart-computer-icons-d824d3a7529ee2f5.png"
            alt="">
    </div>