JavaScript Background bogging up and down

[JLeger91]

When I delete hit_top variable in script.js and roomEffects.js that is sent into the function, then the background scrolls upwards as it should. But without the hit_top variable, how can I tell the program that the background has already been to the top of the screen? It should look like a bogging ship.

In script.js

import { bog_ship } from './roomEffects.js';

const canvas = document.getElementById('canvas1');
const ctx = canvas.getContext('2d');
const CANVAS_WIDTH = canvas.width = 640;
const CANVAS_HEIGHT = canvas.height = 480;

const backgroundLayer1 = new Image();
backgroundLayer1.src = 'assets/visual/ROOM_108/ROOM_108_00.png';
let bg_y=0;
let hit_top = false;

function animate(){
    ctx.clearRect(0,0,CANVAS_WIDTH, CANVAS_HEIGHT);
    ctx.drawImage(backgroundLayer1, 0, bg_y);
    bg_y, hit_top = bog_ship(bg_y, hit_top);
    requestAnimationFrame(animate);
}
animate();

and then in roomEffects.js:

function bog_ship(bg_y, hit_top){
    
    if(bg_y > -40 && hit_top === false){
        bg_y--;
    }
    if(bg_y <= -40){
        hit_top = true;
        bg_y++;
    }
    return { bg_y, hit_top };
}

export { bog_ship }

and here is the index file:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Project SOS</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <canvas id="canvas1"></canvas>
        <script type="module" src="script.js"></script>
    </body>
</html>

and the CSS file:

body {
    background: black;
}

#canvas1 {
    border: 3px solid white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 640px;
    height: 480px;
}

 

[simong1993]

Good evening so to address the issue of the background scrolling upwards and simulating the "bogging ship" effect, you need to ensure that the hit_top variable is properly managed and passed between the animate function and the bog_ship function. The problem seems to be related to how the hit_top variable is being updated and returned.

Here’s a revised version of your code that should work as intended:

import { bog_ship } from './roomEffects.js';

const canvas = document.getElementById('canvas1');
const ctx = canvas.getContext('2d');
const CANVAS_WIDTH = canvas.width = 640;
const CANVAS_HEIGHT = canvas.height = 480;

const backgroundLayer1 = new Image();
backgroundLayer1.src = 'assets/visual/ROOM_108/ROOM_108_00.png';
let bg_y = 0;
let hit_top = false;

function animate() {
ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
ctx.drawImage(backgroundLayer1, 0, bg_y);
    
// Update bg_y and hit_top using the bog_ship function
const result = bog_ship(bg_y, hit_top);
bg_y = result.bg_y;
hit_top = result.hit_top;
    
requestAnimationFrame(animate);
}
animate();

function bog_ship(bg_y, hit_top) {
    if (bg_y > -40 && !hit_top) {
        bg_y--;
    } else if (bg_y <= -40) {
        hit_top = true;
    }

    if (hit_top && bg_y < 0) {
        bg_y++;
    }

    return { bg_y, hit_top };
}

export { bog_ship };

let me know if this helps

 

[JLeger91]

Thank you simong1993, this was very helpful and it works. I'll have plenty more questions as I go which may require other threads.