Хотите использовать положение лица для управления игроком в 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

Вот несколько базовых c примеров, с которых вы можете начать. : -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); } }

TOP | BOTTOM | LEFT | RIGHT | Q | W