Every level needs an exit. In this lesson, we'll add animated doors that the player can enter to progress to the next area.

Creating Door Sprites

Doors are Sprites with animation, stored in an array for easy management:

const doors = [   new Sprite({     position: { x: 767, y: 270 },     imageSrc: './img/doorOpen.png',     frameRate: 5,     frameBuffer: 10,     loop: false   }) ]

Setting loop: false makes the door animation play once and stop—perfect for an opening door.

Drawing Doors

Render doors in the animation loop, behind the player:

function animate() {   backgroundLevel1.draw()    doors.forEach(door => {     door.draw()   })    player.update()   player.draw() }

Detecting Door Interaction

Check if the player overlaps a door and presses the interaction key:

// In keydown event listener case 'w':   for (let i = 0; i < doors.length; i++) {     const door = doors[i]     if (       player.hitbox.position.x + player.hitbox.width >= door.position.x &&       player.hitbox.position.x <= door.position.x + door.width &&       player.hitbox.position.y + player.hitbox.height >= door.position.y &&       player.hitbox.position.y <= door.position.y + door.height     ) {       player.velocity.x = 0       player.velocity.y = 0       player.switchSprite('enterDoor')       door.play()  // Start door animation     }   }   break

Playing Animations On Demand

Add a play() method to Sprite for triggerable animations:

play() {   this.autoplay = true }

Why This Matters

Doors are the gateway between game areas. Getting them right—with proper animation timing and player interaction—creates satisfying level progression.