CODEWITHSUNDEEP
javascripthtml
mattijn325
mattijn325

Reputation: 25

a bouncing animation with Javascript?

The target: If the fish hits the corners it should bounce/swim the other way.

The Problem: If I try to run this code, the fish doesn't leave the screen. But just stays there instead of bouncing back. How do I make it bounce from the walls?

Here is my code:

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;
}

})

If anyone needs it, this is my html code :

<!DOCTYPE html>
<html>
  <head>
    <title>Pixel Aquarium Completed</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
  </head>
  <body>

      <background></background>

      <script src='js/main.js'></script>
  </body>
</html>

The styles in css are as following:

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;
}

(the dead element is for a later part of the assignment)

Thanks in advance.

Upvotes: 0

Views: 346

Answers (1)

Barry Michael Doyle
Barry Michael Doyle

Reputation: 10658

You need to change the direction movement of the fish when it hits and edge.

Try something like this:

...

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)
}

Note I've made it more robust by setting the upper limits to match your screenHeight and screenWidth.

Upvotes: 1

Related Questions