I'm about halfway through video 1 of chapter "Conversations with other characters", everything was going well but my other character won't appear, i.e. it's only the first one sprite of the "characters" table which is displayed but not the others, can you tell me what the problem is, here is my code concerned :


const charactersMap = []
for (let i = 0; i < charactersMapData.length; i += 70) {
    charactersMap.push(charactersMapData.slice(i, 70 + i)) } 
const offset = {
    x: -500,
    y: -570 
}



const boyImg = new Image()
boyImg.src = "../images/pnj/boy.png"

const characters = []
charactersMap.forEach((row, i) => {
    row.forEach((symbol, j) => {
        if (symbol === 1062)     
           characters.push(
                new Sprite ({
                    position: {
                        x: j * Boundary.width + offset.x,
                        y: i * Boundary.height + offset.y
                    },
                    image: boyImg,
                    frames: {
                        max: 4,
                        hold: 10
                    }
                })
            )
    })
})



const boundaries = [];    

 const image = new Image();
image.src = '../images/map/OrthogameStyleMap.png';

const foregroundImage = new Image(); foregroundImage.src = '../images/map/foregroundObjects.png';

const playerDownImage = new Image();
playerDownImage.src = '../images/player/garcon/playerDown.png';

const playerUpImage = new Image();
playerUpImage.src = '../images/player/garcon/playerUp.png';

const playerLeftImage = new Image();
playerLeftImage.src = '../images/player/garcon/playerLeft.png';

const playerRightImage = new Image();
playerRightImage.src = '../images/player/garcon/playerRight.png';

const logoImage = new Image();
logoImage.src = "../images/map/logoOrthogamePre-alphaV1.png";

const interiorBackgroundImage = new Image()
interiorBackgroundImage.src = "../images/map/interior.png"

const logo = new Sprite({
    position: {
        x: 0,
        y: 0
    },
    image: logoImage
})

const player = new Sprite({
    position : {
        x: canvas.width / 2 - 192 /4 / 2,
        y: canvas.height / 2 - 68 / 2
    },
    image: playerDownImage,
    frames: {
        max : 4
    },
    sprites: {
        up: playerUpImage,
        left: playerLeftImage,
        down: playerDownImage,
        right: playerRightImage
    }
})

const interiorBackground = new Sprite({position: {
        x: -450,
        y: -835
    },
    image: interiorBackgroundImage,
    opacity: 0
})

const background = new Sprite({
    position: { 
        x: offset.x,
        y: offset.y
    },
    image: image
});

const foreground = new Sprite({
    position: { 
        x: offset.x,
        y: offset.y
    },
    image: foregroundImage });  const keys = {
    ArrowDow:{
        pressed: false
    },
    ArrowUp:{
        pressed: false
    },
    ArrowRight:{
        pressed: false
    },
    ArrowLeft:{
        pressed: false
    }, 
}

const moveables = [background, ...boundaries, foreground, ...doors, ...iDoors, ...characters] 
const renderables = [background, player, ...characters, foreground]  


function animate() {

    const animationId = window.requestAnimationFrame(animate)

    renderables.forEach(renderable => {
        renderable.draw()
    })

Education

Support

Transparency

Legal