当前位置：首页 > news >正文

用HTML5和JavaScript实现可交互的兰顿蚂蚁模拟器

news 2026/4/14 16:18:40

1. 兰顿蚂蚁的奇妙世界

第一次听说兰顿蚂蚁时，我完全被这个简单规则产生的复杂行为震撼到了。想象一下，一只虚拟蚂蚁在黑白格子世界里，仅凭"见白左转涂黑，见黑右转涂白"的规则，就能创造出令人惊叹的图案。这让我想起了小时候玩过的"一笔画"游戏，但兰顿蚂蚁展现出的数学之美要深刻得多。

用技术人的眼光来看，兰顿蚂蚁是细胞自动机的经典案例。1986年克里斯·兰顿提出这个概念时，可能没想到它会成为计算机科学和数学领域的重要研究对象。最神奇的是，无论初始状态如何，经过足够长时间的运行后，蚂蚁总会进入"高速公路"模式——沿着对角线方向持续前进，留下规律的路径。

2. 构建基础模拟器

2.1 初始化画布与网格

我们先从最基础的HTML结构开始。创建一个800x600像素的画布，这将成为蚂蚁的游乐场：

<canvas id="antCanvas" width="800" height="600" style="border:1px solid #ddd;"></canvas>

JavaScript部分，我们需要初始化二维数组来表示网格状态。每个格子用0(白)或1(黑)表示：

class AntSimulator { constructor() { this.grid = []; this.cellSize = 8; // 每个格子8像素 this.initGrid(100, 100); // 初始100x100的网格 } initGrid(width, height) { this.grid = Array(height).fill().map(() => Array(width).fill(0)); } }

2.2 绘制网格与蚂蚁

使用Canvas的2D绘图API来可视化网格：

drawGrid() { const ctx = this.canvas.getContext('2d'); ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); // 绘制网格线 ctx.strokeStyle = '#eee'; for (let x = 0; x <= this.grid[0].length; x++) { ctx.beginPath(); ctx.moveTo(x * this.cellSize, 0); ctx.lineTo(x * this.cellSize, this.grid.length * this.cellSize); ctx.stroke(); } // 类似代码绘制水平线... // 绘制填充格子 this.grid.forEach((row, y) => { row.forEach((cell, x) => { if (cell === 1) { ctx.fillStyle = '#333'; ctx.fillRect(x * this.cellSize, y * this.cellSize, this.cellSize, this.cellSize); } }); }); // 绘制蚂蚁 ctx.fillStyle = 'red'; ctx.beginPath(); ctx.arc( (this.ant.x + 0.5) * this.cellSize, (this.ant.y + 0.5) * this.cellSize, this.cellSize / 3, 0, Math.PI * 2 ); ctx.fill(); }

3. 实现核心蚂蚁逻辑

3.1 蚂蚁移动规则

兰顿蚂蚁的行为规则看似简单却蕴含深意：

moveAnt() { const currentCell = this.grid[this.ant.y][this.ant.x]; // 改变当前格子颜色 this.grid[this.ant.y][this.ant.x] = currentCell === 0 ? 1 : 0; // 根据格子颜色转向 if (currentCell === 0) { // 白格左转 this.ant.direction = (this.ant.direction + 3) % 4; } else { // 黑格右转 this.ant.direction = (this.ant.direction + 1) % 4; } // 移动蚂蚁 switch(this.ant.direction) { case 0: this.ant.y--; break; // 上 case 1: this.ant.x++; break; // 右 case 2: this.ant.y++; break; // 下 case 3: this.ant.x--; break; // 左 } this.steps++; }

3.2 动态扩展地图

当蚂蚁接近边界时，我们需要自动扩展地图。我采用了"按需扩展"策略，每次扩展30%：

checkBoundary() { // 检查是否需要水平扩展 if (this.ant.x < 0) { this.expandGrid('left'); this.ant.x = 0; } else if (this.ant.x >= this.grid[0].length) { this.expandGrid('right'); this.ant.x = this.grid[0].length - 1; } // 垂直扩展检查类似... } expandGrid(direction) { const newWidth = Math.floor(this.grid[0].length * 1.3); const newHeight = Math.floor(this.grid.length * 1.3); // 创建新网格 const newGrid = Array(this.grid.length).fill().map(() => { if (direction === 'left') { return [...Array(newWidth - this.grid[0].length).fill(0), ...this.grid[0]]; } else { return [...this.grid[0], ...Array(newWidth - this.grid[0].length).fill(0)]; } }); this.grid = newGrid; }

4. 添加交互功能

4.1 实现画布拖动与缩放

为了让用户能自由探索蚂蚁创造的复杂图案，我添加了画布交互功能：

setupInteraction() { let isDragging = false; let lastX, lastY; this.canvas.addEventListener('mousedown', (e) => { isDragging = true; lastX = e.clientX; lastY = e.clientY; }); window.addEventListener('mouseup', () => isDragging = false); this.canvas.addEventListener('mousemove', (e) => { if (!isDragging) return; const dx = e.clientX - lastX; const dy = e.clientY - lastY; this.offsetX += dx; this.offsetY += dy; lastX = e.clientX; lastY = e.clientY; this.drawGrid(); }); this.canvas.addEventListener('wheel', (e) => { e.preventDefault(); const zoomFactor = e.deltaY > 0 ? 0.9 : 1.1; this.zoom *= zoomFactor; this.drawGrid(); }); }

4.2 控制面板实现

添加实用的控制按钮让用户可以控制模拟速度：

<div class="controls"> <button id="step">单步执行</button> <button id="start">开始</button> <button id="stop">停止</button> <input type="range" id="speed" min="1" max="100" value="50"> <button id="randomize">添加干扰点</button> </div>

对应的JavaScript事件处理：

document.getElementById('step').addEventListener('click', () => { simulator.moveAnt(); simulator.drawGrid(); }); let simulationInterval; document.getElementById('start').addEventListener('click', () => { if (simulationInterval) clearInterval(simulationInterval); const speed = document.getElementById('speed').value; simulationInterval = setInterval(() => { simulator.moveAnt(); simulator.drawGrid(); }, 1000 / speed); }); document.getElementById('randomize').addEventListener('click', () => { // 随机改变5%格子的状态 for (let i = 0; i < simulator.grid.length; i++) { for (let j = 0; j < simulator.grid[0].length; j++) { if (Math.random() < 0.05) { simulator.grid[i][j] = simulator.grid[i][j] === 0 ? 1 : 0; } } } simulator.drawGrid(); });

5. 性能优化技巧

当模拟步数达到数万次后，性能可能成为问题。我总结了几个优化点：

5.1 局部重绘策略

不需要每次重绘整个画布，只需更新变化的格子：

drawChanges() { const ctx = this.canvas.getContext('2d'); // 只绘制上次和这次有变化的格子 this.changedCells.forEach(({x, y, value}) => { if (value === 1) { ctx.fillStyle = '#333'; ctx.fillRect(x * this.cellSize, y * this.cellSize, this.cellSize, this.cellSize); } else { ctx.clearRect(x * this.cellSize, y * this.cellSize, this.cellSize, this.cellSize); // 重绘网格线 ctx.strokeStyle = '#eee'; ctx.strokeRect(x * this.cellSize, y * this.cellSize, this.cellSize, this.cellSize); } }); this.changedCells = []; }

5.2 使用Web Workers

将计算密集型任务放到后台线程：

// worker.js self.onmessage = function(e) { const {steps, grid, ant} = e.data; const result = simulateSteps(steps, grid, ant); postMessage(result); }; // 主线程 const worker = new Worker('worker.js'); worker.onmessage = function(e) { this.grid = e.data.grid; this.ant = e.data.ant; this.drawGrid(); };