在javascript中，当一个元素被另一个元素触及时，如何更改该元素的位置？

我是JavaScript新手，我正在尝试用JavaScript创建一个类似这样的游戏：。但是我不允许使用canvas元素，所以我使用的代码似乎不起作用。我遇到的问题是，当snake/slither元素与mouse/food元素碰撞时，让mouse/food元素移动到一个随机的新位置。我通常也不确定update（）函数是否正常工作，也不知道为什么

我尝试了很多不同的方法来让代码正确执行；将更新功能放置在不同的位置，如窗口加载、每个箭头功能等。我尝试寻找许多其他代码，但我能找到的只是使用画布元素创建游戏的人

var snake=null；
var sliter=document.querySelector（#snake>.snake”）；
var mouse=document.querySelector（“#food>mouse”）；
var body=document.getElementById（“grass”）；
x=主体宽度/2；
y=车身高度/2；
函数init（）{
snake=document.getElementById（“snake”）；
snake.style.position='relative'；
snake.style.left='0px'；
snake.style.top='0px'；
}
函数getKeyAndMove（e）{
var key|u code=e.which | e.keyCode；
开关（钥匙代码）{
案例37://左箭头键
左移（）；
打破
案例38://向上箭头键
moveUp（）；
打破
案例39://右箭头键
moveRight（）；
打破
案例40://向下箭头键
向下移动（）；
打破
}
}
函数moveLeft（）{
snake.style.left=parseInt（snake.style.left）-7+'px'；
更新（）；
}
函数moveUp（）{
snake.style.top=parseInt（snake.style.top）-7+'px'；
更新（）；
}
函数moveRight（）{
snake.style.left=parseInt（snake.style.left）+7+'px'；
更新（）；
}
函数moveDown（）{
snake.style.top=parseInt（snake.style.top）+7+'px'；
更新（）；
}
window.onload=init；
变量更新=（）=>{
如果(
mouse.x==slither.x | | mouse.y==slither.y | | mouse.y==slither.y&&mouse.x==slither.x
) {
mouse.x=Math.floor（（Math.random（）*30）+1）；
mouse.y=Math.floor（（Math.random（）*30）+1）；
}
};
您的碰撞检测需要工作，因为您当前只检查左侧和顶部是否相交，但还有更多的组合

查看和了解更多信息

我还更改了选择器，以与为snake定义的方式相同的方式移动容纳鼠标的div。我还将其设置为
position='relative'以便它可以四处移动。我在随机坐标字符串的末尾添加了“px”


var snake=null；
var=null；
var sliter=document.querySelector（#snake>.snake”）；
var mouse=document.querySelector（“#food>mouse”）；
var body=document.getElementById（“grass”）；
x=主体宽度/2；
y=车身高度/2；
函数init（）{
snake=document.getElementById（“snake”）；
snake.style.position='relative'；
snake.style.left='0px'；
snake.style.top='0px'；
food=document.getElementById（“food”）；
food.style.position='relative'；
}
函数getKeyAndMove（e）{
var key|u code=e.which | e.keyCode；
开关（钥匙代码）{
案例37://左箭头键
左移（）；
打破
案例38://向上箭头键
moveUp（）；
打破
案例39://右箭头键
moveRight（）；
打破
案例40://向下箭头键
向下移动（）；
打破
}
}
函数moveLeft（）{
snake.style.left=parseInt（snake.style.left）-7+'px'；
更新（）；
}
函数moveUp（）{
snake.style.top=parseInt（snake.style.top）-7+'px'；
更新（）；
}
函数moveRight（）{
snake.style.left=parseInt（snake.style.left）+7+'px'；
更新（）；
}
函数moveDown（）{
snake.style.top=parseInt（snake.style.top）+7+'px'；
更新（）；
}
window.onload=init；
变量更新=（）=>{
如果(
mouse.x==slither.x | | mouse.y==slither.y | | mouse.y==slither.y&&mouse.x==slither.x
) {
food.style.left=Math.floor（（Math.random（）*30）+1）+“px”；
food.style.right=Math.floor（（Math.random（）*30）+1）+“px”；
}
};
此代码未经测试，但可能会让您开始

功能冲突检查（elem1，elem2）{
var elem1Bounds=elem1.getBoundingClientRect（）；
var elem2Bounds=elem2.getBoundingClientRect（）；
变量elem1Center={
x:elem1Bounds.left+（elem1Bounds.width/2），
y:elem1Bounds.top+（elem1Bounds.height/2）
}
变量elem2Center={
x:elem2Bounds.left+（elem2Bounds.width/2），
y:elem2Bounds.top+（elem2Bounds.height/2）
}
//如果元素1在视口中，则初始化
如果(
elem1Bounds.top>=0&&
elem1Bounds.left>=0&&
elem1Bounds.bottom elem1Bounds.height）{
//无碰撞
返回false；
}否则{
//检测到碰撞！
返回true；
}
}
};
这是我最后得到的答案。我仍然在调整一些css的东西，但这段代码做了我想要的：）。
此外，元素的位置也是它不在窗口中的原因。我还有剩下的代码，这只是重要的部分。谢谢你的帮助

function init() {
    snake = document.getElementById("snake");
    snake.style.position = 'relative';
    snake.style.left = '0px';
    snake.style.top = '0px';
    food = document.getElementById("food");
    food.style.position = 'absolute';
}




function collisionCheck(slither, mouse) {
    var snakeBounds = slither.getBoundingClientRect();
    var mouseBounds = mouse.getBoundingClientRect();

    if (!((snakeBounds.top + snakeBounds.height) < mouseBounds.top ||
        snakeBounds.top > (mouseBounds.height + mouseBounds.top) ||
        (snakeBounds.left + snakeBounds.width) < mouseBounds.left ||
        snakeBounds.left > (mouseBounds.width + mouseBounds.left))) {

        food.style.left = Math.floor(Math.random() * 800) + 'px';  
        food.style.top = Math.floor(Math.random() * 500) + 'px';
    }
}

函数init（）{
snake=document.getElementById（“snake”）；
snake.style.position='relative'；
snake.style.left='0px'；
snake.style.top='0px'；
food=document.getElementById（“food”）；
food.style.position='绝对'；
}
功能冲突检查（滑动、鼠标）{
var snakeBounds=slither.getBoundingClientRect（）；
var鼠标垫=