Create rl_script.js

rl_script.js

@@ -0,0 +1,99 @@
+// rl_script.js
+
+const grid = document.getElementById('grid');
+const startButton = document.getElementById('startButton');
+const stepButton = document.getElementById('stepButton');
+const resetButton = document.getElementById('resetButton');
+
+const gridRows = 5;
+const gridCols = 5;
+
+const initialState = { row: 0, col: 0 };
+const goalState = { row: 4, col: 4 };
+const obstacles = [{ row: 1, col: 1 }, { row: 2, col: 2 }, { row: 3, 3 }];
+
+let agentState = { ...initialState };
+let gridCells = [];
+
+function createGrid() {
+    for (let row = 0; row < gridRows; row++) {
+        for (let col = 0; col < gridCols; col++) {
+            const cell = document.createElement('div');
+            cell.classList.add('cell');
+            if (row === agentState.row && col === agentState.col) {
+                cell.classList.add('agent');
+            } else if (row === goalState.row && col === goalState.col) {
+                cell.classList.add('goal');
+            } else if (obstacles.some(o => o.row === row && o.col === col)) {
+                cell.classList.add('obstacle');
+            }
+            grid.appendChild(cell);
+            gridCells.push(cell);
+        }
+    }
+}
+
+function moveAgent(action) {
+    const { row, col } = agentState;
+    let newRow = row;
+    let newCol = col;
+
+    switch (action) {
+        case 'up':
+            newRow = Math.max(0, row - 1);
+            break;
+        case 'down':
+            newRow = Math.min(gridRows - 1, row + 1);
+            break;
+        case 'left':
+            newCol = Math.max(0, col - 1);
+            break;
+        case 'right':
+            newCol = Math.min(gridCols - 1, col + 1);
+            break;
+    }
+
+    if (!obstacles.some(o => o.row === newRow && o.col === newCol)) {
+        agentState = { row: newRow, col: newCol };
+    }
+
+    updateGrid();
+}
+
+function updateGrid() {
+    gridCells.forEach((cell, index) => {
+        const row = Math.floor(index / gridCols);
+        const col = index % gridCols;
+        cell.classList.remove('agent', 'goal', 'obstacle');
+        if (row === agentState.row && col === agentState.col) {
+            cell.classList.add('agent');
+        } else if (row === goalState.row && col === goalState.col) {
+            cell.classList.add('goal');
+        } else if (obstacles.some(o => o.row === row && o.col === col)) {
+            cell.classList.add('obstacle');
+        }
+    });
+}
+
+function startRL() {
+    // Initialize the agent and grid
+    agentState = { ...initialState };
+    updateGrid();
+}
+
+function stepRL() {
+    // Simple policy: Move randomly
+    const actions = ['up', 'down', 'left', 'right'];
+    const action = actions[Math.floor(Math.random() * actions.length)];
+    moveAgent(action);
+}
+
+function resetRL() {
+    startRL();
+}
+
+createGrid();
+
+startButton.addEventListener('click', startRL);
+stepButton.addEventListener('click', stepRL);
+resetButton.addEventListener('click', resetRL);