Adding an Enemy That Follows the Player in a JavaScript Game

In this tutorial, you’ll learn how to implement a simple “enemy” character in a JavaScript game engine. The enemy will follow the nearest player and end the game upon contact.

This notebook is designed for learners familiar with JavaScript, basic game loops, and sprite management.

Game Environment Structure

This example is built with custom classes like Player, Npc, Collectible, etc. We assume you have a level file like GameLevelEnd.js.

We’ll modify this level to include an enemy NPC with basic AI.

Step 1: Define the Enemy Sprite

basic sprite data to create the enemy:

```javascript const sprite_src_enemy = path + “/images/gamify/ederman.png”; const sprite_data_enemy = { id: ‘Enderman’, greeting: “You feel a dark presence…”, src: sprite_src_enemy, SCALE_FACTOR: 7, ANIMATION_RATE: 0, pixels: {height: 256, width: 128}, INIT_POSITION: { x: width / 2, y: height / 4 }, orientation: {rows: 1, columns: 1}, down: {row: 0, start: 0, columns: 1}, hitbox: { widthPercentage: 0.4, heightPercentage: 0.4 }, zIndex: 10, update: function(players, stopGameLoop) { // Follows nearest player … } };

Enemy AI: Following the Player

Step 2: Follow the Nearest Player

Inside the update function, add:

```javascript

    // The update method with all functionality inline
    update: function() {
        // Skip update if already in killing process
        if (this.isKilling) {
            return;
        }
        
        // Find all player objects
        const players = this.gameEnv.gameObjects.filter(obj => 
            obj.constructor.name === 'Player'
        );
        
        if (players.length === 0) return;
        
        // Find nearest player
        let nearest = players[0];
        let minDist = Infinity;

        for (const player of players) {
            const dx = player.position.x - this.position.x;
            const dy = player.position.y - this.position.y;
            const dist = Math.sqrt(dx*dx + dy*dy);
            if (dist < minDist) {
                minDist = dist;
                nearest = player;
            }
        }

        // Move towards nearest player
        const speed = 1.5; // Adjust speed as needed
        const dx = nearest.position.x - this.position.x;
        const dy = nearest.position.y - this.position.y;
        const angle = Math.atan2(dy, dx);
        
        // Update position
        this.position.x += Math.cos(angle) * speed;
        this.position.y += Math.sin(angle) * speed;

Game Over Logic

Step 3: End the Game on Collision

Still inside the update() method:

```javascript

                // 3. Reset the level after a short delay using page reload for reliability
                setTimeout(() => {
                    // Clean up any lingering resources before reload
                    if (self && self.timerInterval) {
                        clearInterval(self.timerInterval);
                    }
                    
                    // Force a complete page reload - most reliable way to reset
                    location.reload();
                }, 2000); // 2 second delay before reset

Add Enemy to the Level

Step 4: Include the Enemy in the Level

Make sure the enemy gets added to the game objects:

```javascript

this.classes = [ { class: BackgroundParallax, data: image_data_parallax }, { class: GamEnvBackground, data: image_data_end }, { class: Player, data: sprite_data_chillguy }, { class: Npc, data: sprite_data_tux }, { class: Collectible, data: sprite_data_eye }, { class: Player, data: sprite_data_alex }, { class: Enemy, data: sprite_data_enemy } // Add enemy here ];

Summary

```markdown

TL;DR

You’ve added:

An enemy sprite.
Simple AI to follow the nearest player.
Collision detection to trigger Game Over.

Homework

For your homework, we would want you to implement this enemy system into your actual game, unlike previous enemy lessons, this enemy will follow the player around instead of traveling around a set path.

Requirements:

Enemy following player
Game over when enemy interacts with player
Make it look fluid