Game Logic & AI

Simple Enemy AI with State Machines

Avoid massive "if-else" spaghetti code. Learn how to use Finite State Machines (FSM) to give your enemies clear behaviors: Patrolling, Chasing, and Attacking.

IntermediateJavaScriptLogic9 min read

What is a Finite State Machine?

If you've ever tried programming an enemy by just adding more and more if statements, you probably ended up with a bug where the enemy tries to attack and walk in the opposite direction at the same time. This happens because the enemy doesn't have a singular "state" of mind.

A Finite State Machine (FSM) solves this. The rule is simple: The enemy can only be in one state at a time. It is either Patrolling OR Chasing. It cannot be both.

Defining the States

For a basic top-down game, an enemy usually has three states:

PATROL: Moves slowly back and forth between two points.
CHASE: If the player comes within a certain radius, stop patrolling and move towards the player at high speed.
ATTACK: If the player is very close, stop moving and trigger an attack animation.

Every frame of your game loop, you check the enemy's current state, and run ONLY the code for that state.

Interactive AI Sandbox

Below is a working example of a State Machine. The Red Square is the enemy. Your Mouse Cursor is the player.

Try modifying the VISION_RADIUS to make the enemy blind, or increase chaseSpeed to make them terrifying. Click ▶ Run Code to test your changes!

💻 HTML/JS Editor

<canvas id="game" width="400" height="400" style="background:#222; border-radius: 8px; width: 100%; height: 100%; cursor: none;"></canvas>
<script>
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');

let player = { x: 200, y: 200 };

// --- TWEAK THESE AI SETTINGS! ---
const VISION_RADIUS = 120;
const ATTACK_RADIUS = 30;
const patrolSpeed = 1;
const chaseSpeed = 3;
// --------------------------------

const STATES = {
    PATROL: 'patrol',
    CHASE: 'chase',
    ATTACK: 'attack'
};

let enemy = {
    x: 50, y: 200,
    state: STATES.PATROL,
    patrolDir: 1,
    patrolLeft: 50,
    patrolRight: 350
};

// Track mouse
canvas.addEventListener('mousemove', (e) => {
    const rect = canvas.getBoundingClientRect();
    const scaleX = canvas.width / rect.width;
    const scaleY = canvas.height / rect.height;
    player.x = (e.clientX - rect.left) * scaleX;
    player.y = (e.clientY - rect.top) * scaleY;
});

function distance(p1, p2) {
    return Math.hypot(p2.x - p1.x, p2.y - p1.y);
}

function updateAI() {
    const distToPlayer = distance(enemy, player);

// 1. STATE TRANSITIONS
    if (distToPlayer <= ATTACK_RADIUS) {
        enemy.state = STATES.ATTACK;
    } else if (distToPlayer <= VISION_RADIUS) {
        enemy.state = STATES.CHASE;
    } else {
        enemy.state = STATES.PATROL;
    }

// 2. STATE ACTIONS
    switch (enemy.state) {
        case STATES.PATROL:
            // Move back and forth horizontally
            enemy.x += patrolSpeed * enemy.patrolDir;
            if (enemy.x > enemy.patrolRight) enemy.patrolDir = -1;
            if (enemy.x < enemy.patrolLeft) enemy.patrolDir = 1;
            break;
            
        case STATES.CHASE:
            // Move towards player
            const dx = player.x - enemy.x;
            const dy = player.y - enemy.y;
            const dist = Math.hypot(dx, dy);
            enemy.x += (dx / dist) * chaseSpeed;
            enemy.y += (dy / dist) * chaseSpeed;
            break;
            
        case STATES.ATTACK:
            // Stop moving, maybe flash red
            break;
    }
}

function loop() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    updateAI();

// Draw Vision Radius (Debug)
    ctx.beginPath();
    ctx.arc(enemy.x, enemy.y, VISION_RADIUS, 0, Math.PI * 2);
    ctx.fillStyle = 'rgba(255, 255, 255, 0.05)';
    ctx.fill();
    ctx.strokeStyle = 'rgba(255, 255, 255, 0.1)';
    ctx.stroke();

// Draw Enemy
    if (enemy.state === STATES.PATROL) ctx.fillStyle = '#4d96ff'; // Blue
    if (enemy.state === STATES.CHASE) ctx.fillStyle = '#ffd93d';  // Yellow
    if (enemy.state === STATES.ATTACK) ctx.fillStyle = '#ff4d4d'; // Red
    
    ctx.fillRect(enemy.x - 15, enemy.y - 15, 30, 30);
    
    // Draw Player (Mouse)
    ctx.fillStyle = '#ffffff';
    ctx.beginPath();
    ctx.arc(player.x, player.y, 8, 0, Math.PI * 2);
    ctx.fill();

// Text info
    ctx.fillStyle = 'white';
    ctx.font = '16px monospace';
    ctx.fillText('STATE: ' + enemy.state.toUpperCase(), 10, 25);

requestAnimationFrame(loop);
}

loop();
</script>

Scaling Up to Behavior Trees

State machines are incredible for simple enemies. However, if you are building an RPG boss with 15 different attacks, healing phases, and dodging logic, an FSM can become a tangled mess (often called a "State Explosion").

For complex AI, the industry standard is to move from FSMs to Behavior Trees, which allow you to compose small, reusable nodes of logic (like "Is Player Close?" -> "Sequence: Roar, then Charge"). We'll cover Behavior Trees in a future advanced tutorial!