Hey,

I'm currently trying myself on the pokemon-styled game and came already to around 2:34:00 till I encountered a error with the boundaries on the map. I did everything correctly, checked the order of lines, and redid the chapter again but the red rectangles/boundaries are not showing.

I've attached my code to this post and hope to get help soon.

Kind regards,

koetelkind from DE

PS: My map is 100x50 and my the resolution is 16x16.

const canvas = document.querySelector('canvas')
const c = canvas.getContext('2d')

canvas.width = 1024
canvas.height = 576 

const collisionsMap = []
for (let i = 0; i < collisions.length; i += 100) {
    collisionsMap.push(collisions.slice(i, 100 + i))
}

const boundaries = []
const offset = {
    x: -3488,
    y: -1760
}

class Boundary {
    static width = 64
    static height = 64
    constructor({position}) {
        this.position = position
        this.width = 64
        this.height = 64
    }

    draw() {
        c.fillStyle = 'red'
        c.fillRect(this.position.x, this.position.y, this.position.width, this.position.height)
    }
}

collisionsMap.forEach((row, i) => {
    row.forEach((symbol, j) => {
        if (symbol === 32127)
        boundaries.push(
            new Boundary({
                position: {
                    x: j * Boundary.width,
                    y: i * Boundary.height 
        }}))
    })
})

console.log(boundaries)

const image = new Image() image.src = 'myimagesource' 
const playerImage = new Image() playerImage.src = 'myimagesource'  

class Sprite {     constructor({position, velocity, image}) {
       this.position = position
       this.image = image 
    }
    draw() {
        c.drawImage(this.image, this.position.x, this.position.y)
    }
}

const background = new Sprite ({
    position: {
        x: -3488,
        y: -1760
},
image: image
})

const keys = {
    w: {
        pressed: false
    },
    a: {
        pressed: false
    },
    s: {
        pressed: false
    },
    d: {
        pressed: false
    }
}

function animate() {
    window.requestAnimationFrame(animate)
    console.log('animate')
    background.draw()
    boundaries.forEach(boundary => {
        boundary.draw()
    })
    c.drawImage(playerImage,
        0,
        0,
        playerImage.width / 4,
        playerImage.height,
        canvas.width / 2 - playerImage.width / 4 / 2, canvas.height / 2 - playerImage.height / 2,
        playerImage.width / 4,
        playerImage.height 
        )
    if (keys.w.pressed && lastKey === 'w') background.position.y += 4
    else if (keys.a.pressed && lastKey === 'a') background.position.x += 4
    else if (keys.s.pressed && lastKey === 's') background.position.y -= 4
    else if (keys.d.pressed && lastKey === 'd') background.position.x -= 4
}

animate()
let Lastkey = ''
window.addEventListener('keydown', (e) => {
    switch (e.key ) {
        case 'w':
            keys.w.pressed = true
            lastKey = 'w'
            break
        case 'a':
            keys.a.pressed = true
            lastKey = 'a'
            break
        case 's':
            keys.s.pressed = true
            lastKey = 's'
            break
        case 'd':
            keys.d.pressed = true
            lastKey = 'd'
            break
    }
    console.log(keys)
} )

window.addEventListener('keyup', (e) => {
    switch (e.key ) {
        case 'w':
            keys.w.pressed = false
            break
        case 'a':
            keys.a.pressed = false
            break
        case 's':
            keys.s.pressed = false
            break
        case 'd':
            keys.d.pressed = false
            break
    }
    console.log(keys)
} )

console.log(collisions)