Javascript 当图像到达屏幕边缘时更改图像源

我这里有dvd屏幕保护程序的代码

我想让它这样，每当图像击中边缘，它会改变到一个不同的图像src。我似乎不知道如何改变它

我尝试过使用这种技术：

var img = document.getElementById("myImage");
img.src = 'img/new-image.jpg';

但我认为我实施错了，因为它似乎不起作用。非常感谢您的帮助-下面是一段代码

const section=document.querySelector（“section”）；
const logo=document.querySelector（“.logo”）；
常数FPS=60；
section.style.height=window.innerHeight+“px”；
section.style.width=window.innerWidth+“px”；
//标志移动速度变量
设xPosition=10；
设yPosition=10；
设xSpeed=4；
让ySpeed=4；
函数更新（）{
logo.style.left=xPosition+“px”；
logo.style.top=yPosition+“px”；
}
设置间隔（（）=>{
如果（xPosition+logo.clientWidth>=window.innerWidth | | xPosition=window.innerHeight | | yPosition{
xPosition=10；
位置=10；
section.style.height=window.innerHeight+“px”；
section.style.width=window.innerWidth+“px”；
})；

*{
填充：0；
保证金：0；
框大小：边框框；
}
身体{
溢出：隐藏；
}
部分{
位置：相对位置；
}
svg{
位置：绝对位置；
宽度：200px；
填充：rgb（0,81,255）；
}
@介质（最大宽度：768px）{
svg{
宽度：150px；
}
}

你可以试试这个（）

函数changeImage（）{
const img=document.getElementById（“imageID”）；
img.setAttribute（“href”），（img.getAttribute（“href”）=”https://i.imgur.com/zmn2We7.jpeg") ? "https://i.imgur.com/gcrU9si.jpg" : "https://i.imgur.com/zmn2We7.jpeg");
}