Computer Science & Software Engineering
Implementing Enemies
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 ];