Javascript 如何将多个元素作为一个对象

我在css中使用了多个div来创建形状，我想在javascript中将它们组合为一个对象来创建一个播放器，并能够用箭头键移动播放器。我尝试使用class属性，并将所有这些属性设置为相同的类名，但不起作用。我刚开始学习如何在编码中开发游戏，所以我不确定这段代码甚至接近正确

我可以向该代码中添加什么使它们位于对象/元素上？ 我怎样才能让所有的箭头键一起移动呢

 var playerHead = document.getElementById("playerHead");

    var playerMouth = document.getElementById("playerMouth");

    var playerOuterEye =document.getElementById("playerOuterEye");

    var playerInnerEye =document.getElementById("playerInnerEye");

    var playerBody = document.getElementById("playerBody");

    var playerArm = document.getElementById("playerArm");

    var playerLeg = document.getElementById("playerLeg");

如你所见，这些元素中的每一个都是用css制作的形状，我想把它们组合成一个对象，这样我就可以制作一个播放器，当按下箭头键时，它可以移动

const player = {
   playerHead:  document.getElementById("playerHead"),
   playerMouth: document.getElementById("playerMouth"),
   playerOuterEye: document.getElementById("playerOuterEye")
}

等等。 这样，每个值都是播放对象的属性

---

至于在页面上移动内容，您需要提供更多信息。我们不知道你在移动什么，或者你试图如何移动它。老实说，对于css和一些元素选择器来说，您试图做的事情听起来太复杂了。我想看一个真实的。

你能分享一下当前显示的内容吗？这听起来像是你在寻找……那么这将如何让OP同时在所有元素中移动呢？不知道，我正在回答这个问题的标题，因为它与OP提供的代码有关。没有提供足够的信息来回答其余的问题。或更短的问题：

const player=Object.assign（…[“playerHead”、“playerMouth”、“playerOuterEye”、
…
）。map（（key）=>（{[key]：document.getElementById（key）}））
。但目前还不清楚OP中“作为一个物体”的含义，以及他们如何想象这个物体能够“一起移动”。那么，我想推迟回答，直到进一步澄清，会比“回答标题”更好…我正在尝试制作我的第一个2d游戏，我正在尝试将多个形状制作为一个，并将所有形状移动到一起，当我按下键盘上的箭头键时，将同时向同一方向移动，以便我可以向游戏添加自定义玩家。