使用Javascript的反弹动画？

目标：如果鱼撞到角落，它应该反弹/游到另一个方向

问题： 如果我尝试运行此代码，鱼不会离开屏幕。但只是停留在那里，而不是反弹回来。如何使它从墙上反弹

这是我的密码：

window.addEventListener('load', () => {
    let elementFish = document.createElement("fish")
    document.body.appendChild(elementFish)

    let elementBubble = document.createElement("bubble")
    document.body.appendChild(elementBubble)

    let fish = document.getElementsByClassName("fish")
    let bubble = document.getElementsByClassName("bubble")

    let screenWidth = window.innerWidth
    let screenHeight = window.innerHeight

    fish = {
        x: randomNumber(2, 200),
        y: randomNumber(2, 200),
        color: randomNumber(0, 360)
    }

    bubble = {
        x: 20,
        y: 100
    }


    gameLoop()



function gameLoop(){

        if(fish.x < 1 || fish.x > 1500){(fish.x = -fish.x)}
        if(fish.y < 1 || fish.y > 600)fish.y = -fish.y

        fish.x += 1
        fish.y += 1


    elementFish.style.transform = `translate(${fish.x}px, ${fish.y}px)`

    requestAnimationFrame(gameLoop)
}


function randomNumber(min, max){
    return Math.random() * (max - min) + min;
}

})

（无效元素用于任务的后续部分）

---

提前感谢。

您需要在鱼撞击和边缘时改变鱼的移动方向

试着这样做：

...

let speedDirectionX = 1
let speedDirectionY = 1

function gameLoop(){
  if(fish.x < 1 || fish.x > 1500)
  if(fish.y < 1 || fish.y > 600)fish.y = -fish.y
  if (fish.x =< 0) speedDirectionX = 1
  else if (fish.x >= screenWidth) speedDirectionX = -1

  if (fish.y =< 0) speedDirectionY= 1
  else if (fish.y >= screenHeight) speedDirectionY = -1

  fish.x += speedDirection
  fish.y += speedDirection

  elementFish.style.transform = `translate(${fish.x}px, ${fish.y}px)`

  requestAnimationFrame(gameLoop)
}

。。。
设speedDirectionX=1
设speedDirectionY=1
函数gameLoop（）{
如果（fish.x<1 | | fish.x>1500）
如果（fish.y<1 | | fish.y>600）fish.y=-fish.y
如果（fish.x=<0）速度方向x=1
如果（fish.x>=屏幕宽度）speedDirectionX=-1，则为else
如果（fish.y=<0）speedDirectionY=1
如果（fish.y>=屏幕高度）speedDirectionY=-1，则为else
fish.x+=速度方向
fish.y+=速度方向
elementFish.style.transform=`translate（${fish.x}px，${fish.y}px）`
requestAnimationFrame（gameLoop）
}

---

注意：我通过设置上限来匹配您的

屏幕高度

和

屏幕宽度

是否有特定的代码指示鱼的方向？您也可以发布您的样式吗？还是代码笔中的复制版本？我刚刚添加了两行缺失的代码，它们决定了鱼的方向，我还添加了css。@BarryMichaelDoyle

body {
    background-color: #70CF51;
    font-family: Arial, Helvetica, sans-serif;
    overflow:hidden;
    margin:0px; padding:0px;
}

body * {
    position: absolute;
    display: block;
    margin:0px; padding:0px;
    box-sizing: border-box;
    background-repeat: no-repeat;
}

fish {
    background-image: url(../images/fish.png);
    width:130px; height: 110px;
    filter: hue-rotate(90deg);
    cursor:pointer;
}

.dead {
    background-image: url(../images/bones.png);
}

bubble {
    background-image: url(../images/bubble.png);
    width:55px; height: 55px;
    cursor:pointer;
}

background {
    background-image: url(../images/water.jpg);
    width:100%; height: 100%;
    background-size: cover;
}

...

let speedDirectionX = 1
let speedDirectionY = 1

function gameLoop(){
  if(fish.x < 1 || fish.x > 1500)
  if(fish.y < 1 || fish.y > 600)fish.y = -fish.y
  if (fish.x =< 0) speedDirectionX = 1
  else if (fish.x >= screenWidth) speedDirectionX = -1

  if (fish.y =< 0) speedDirectionY= 1
  else if (fish.y >= screenHeight) speedDirectionY = -1

  fish.x += speedDirection
  fish.y += speedDirection

  elementFish.style.transform = `translate(${fish.x}px, ${fish.y}px)`

  requestAnimationFrame(gameLoop)
}