HTML5实现汉诺塔演示程序

学习&实践爱好者

于 2024-03-11 21:30:00 发布

阅读量530

点赞数 9

文章标签： html5 游戏前端

本文链接：https://blog.csdn.net/cnds123/article/details/136540353

版权

这篇文章介绍了如何使用HTML5和JavaScript的Canvas技术实现汉诺塔问题的模拟，通过实例展示了如何创建一个可交互的游戏，让用户理解递归算法的过程。

摘要由CSDN通过智能技术生成

HTML5实现汉诺塔演示程序

汉诺塔问题

一个板子上有三根柱子以及一些大小各不相同的圆盘。我们分别把这三根柱子叫做起始柱A、辅助柱B和目标柱C，汉诺塔移动圆盘的规则如下：

把起始柱A上所有的圆盘都移动到C柱，且在移动过程中始终保持圆盘从小到大排列，即大盘在下、小盘在上。

换句话说，用户在移动圆盘时遵循以下规则：

（1）每次只能移动一个圆盘。

（2）每次移动只能将柱子顶部的圆盘移动到另一个柱子的顶部。

（3）圆盘只能放在更大的圆盘上面或空柱子上。

汉诺塔问题是用递归方法求解的一个典型问题，在此给出算法的模拟演示，使学生更直观的了解递归算法的思想。

这里用HTML5实现：使用HTML5的Canvas元素来绘制圆盘和柱子，并通过JavaScript来添加交互功能，使用户能够通过鼠标拖动操作移动圆盘。

先给出运行效果：

由两个文件组成：

1、HTML文件内容如下：

<!DOCTYPE html>
<html>
<head>    
    <meta charset="UTF-8">
    <title>汉诺塔问题</title>
    <style>
        canvas { background-color: #f0f0f0; }
    </style>
</head>
<body>
    <canvas id="hanoiCanvas" width="600" height="400"></canvas>
    <br>
    <label for="numDisks">选择圆盘数量：</label>
    <select id="numDisks">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3" selected>3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
    </select>
    <button onclick="startGame()">开始游戏</button>
    <br>
    汉诺塔移动圆盘的规则如下：
    <br>
    用鼠标拖动操作，把起始柱A上所有的圆盘都移动到C柱，且在移动过程中始终保持圆盘从小到大排列，即大盘在下、小盘在上。    
    <br> 
    <button onclick="showHints()">提示</button>
    <br> 
    <textarea id="hintsBox" rows="10" cols="30" readonly></textarea>
    
    <script src="hanoi.js"></script>
</body>
</html>

2、hanoi.js文件，用于实现汉诺塔的逻辑和绘图。源码如下：

// 获取canvas元素并设置绘图上下文
const canvas = document.getElementById('hanoiCanvas');
const ctx = canvas.getContext('2d');

// 设置初始参数
const numDisks = 3; // 圆盘数量
const towerWidth = 10;
const towerHeight = 150;
const diskHeight = 20;
const diskIncrement = 20; // 圆盘宽度递增量
let towers = [[], [], []]; // 三根柱子
let draggingDisk = null; // 当前拖动的圆盘
let draggingOffsetX = 0;
let draggingOffsetY = 0;

// 初始化游戏：接受一个参数：圆盘数量
function initGame(numDisks) {
    towers = [[], [], []]; // 重置游戏状态
    // 初始化圆盘
    for (let i = 0; i < numDisks; i++) {
        towers[0].push({
            width: (numDisks - i) * diskIncrement + 60,
            height: diskHeight,
            color: `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`
        });
    }
    draw();
}

// 添加startGame函数
function startGame() {
    const selectedNumDisks = document.getElementById('numDisks').value;
    initGame(parseInt(selectedNumDisks, 10)); // 根据选择的圆盘数量开始游戏
}

// 绘制游戏状态
function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布

    // 绘制三根柱子
    for (let i = 0; i <= 2; i++) {
        ctx.fillStyle = 'black';
        ctx.fillRect(100 + 200 * i - towerWidth / 2, canvas.height - towerHeight, towerWidth, towerHeight);
    }

    // 绘制圆盘
    for (let i = 0; i < 3; i++) {
        const tower = towers[i];
        for (let j = 0; j < tower.length; j++) {
            const disk = tower[j];
            ctx.fillStyle = disk.color;
            ctx.fillRect(100 + 200 * i - disk.width / 2, canvas.height - (j + 1) * diskHeight, disk.width, disk.height);
        }
    }

    // 绘制柱子底部的字符
    const baseY = canvas.height - towerHeight; // 字符的基线位置
    ctx.font = '20px Arial'; // 设置字体大小和样式
    ctx.fillStyle = 'black'; // 设置字符颜色
    ctx.textAlign = 'center'; // 设置文本对齐方式为居中，便于定位

    // 绘制每个柱子底部的字符
    ctx.fillText('A', 100, baseY); // 第一根柱子
    ctx.fillText('B', 300, baseY); // 第二根柱子
    ctx.fillText('C', 500, baseY); // 第三根柱子

}

// 鼠标按下事件处理
canvas.onmousedown = function(e) {
    const mousePos = getMousePos(canvas, e);
    for (let i = 2; i >= 0; i--) {
        const tower = towers[i];
        if (tower.length > 0) {
            const topDisk = tower[tower.length - 1];
            const centerX = 100 + 200 * i;
            const centerY = canvas.height - tower.length * diskHeight + diskHeight / 2;
            if (Math.abs(mousePos.x - centerX) <= topDisk.width / 2 && Math.abs(mousePos.y - centerY) <= diskHeight / 2) {
                draggingDisk = tower.pop();
                draggingOffsetX = centerX - mousePos.x;
                draggingOffsetY = centerY - mousePos.y;
                draw();
                return;
            }
        }
    }
};

// 鼠标移动事件处理
canvas.onmousemove = function(e) {
    if (draggingDisk) {
        const mousePos = getMousePos(canvas, e);
        const centerX = mousePos.x + draggingOffsetX;
        const centerY = mousePos.y + draggingOffsetY;
        // 清空画布并重新绘制所有元素，包括被拖动的圆盘
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        draw();
        // 绘制被拖动的圆盘
        ctx.fillStyle = draggingDisk.color;
        ctx.fillRect(centerX - draggingDisk.width / 2, centerY - diskHeight / 2, draggingDisk.width, diskHeight);
    }
};

// 鼠标释放事件处理
canvas.onmouseup = function(e) {
    if (draggingDisk) {
        const mousePos = getMousePos(canvas, e);
        // 确定圆盘应该放置的柱子
        let targetTowerIndex = Math.floor(mousePos.x / 200);
        if (targetTowerIndex < 0) targetTowerIndex = 0;
        if (targetTowerIndex > 2) targetTowerIndex = 2;

        // 检查是否可以将圆盘放到目标柱子上
        if (canPlaceDiskOnTower(draggingDisk, towers[targetTowerIndex])) {
            towers[targetTowerIndex].push(draggingDisk);
        } else {
            // 如果不能放置，则将圆盘返回原柱子
            towers[Math.floor((draggingOffsetX + 100) / 200)].push(draggingDisk);
        }

        draggingDisk = null;
        draw();
        checkWin();
    }
};

// 检查圆盘是否可以放置到目标柱子上
function canPlaceDiskOnTower(disk, tower) {
    if (tower.length === 0) {
        return true; // 目标柱子为空，则可以放置
    }
    const topDisk = tower[tower.length - 1];
    return disk.width < topDisk.width; // 只能放在更大的圆盘上
}

// 获取鼠标位置
function getMousePos(canvas, evt) {
    const rect = canvas.getBoundingClientRect();
    return {
        x: evt.clientX - rect.left,
        y: evt.clientY - rect.top
    };
}

// 检查是否胜利
function checkWin() {
    if (towers[0].length === 0 && towers[1].length === 0) {
        alert('恭喜你，成功解决汉诺塔问题！');
    }
}

// 生成汉诺塔的解决步骤
//接收当前圆盘的数量n，源柱子source，目标柱子target，辅助柱子auxiliary，steps数组来存储所有的移动步骤，stepNumber步骤序号
function generateHanoiSteps(n, source, target, auxiliary, steps, stepNumber) {
    if (n > 0) {
        // 将n-1个圆盘从源柱子移动到辅助柱子
        generateHanoiSteps(n - 1, source, auxiliary, target, steps, stepNumber);
        // 将第n个圆盘从源柱子移动到目标柱子，并添加步骤序号
        steps.push(stepNumber[0] + ". " + source + " → " + target);
        stepNumber[0] += 1; // 更新步骤序号
        // 将n-1个圆盘从辅助柱子移动到目标柱子
        generateHanoiSteps(n - 1, auxiliary, target, source, steps, stepNumber);
    }
}

// 修改 showHints 函数，初始化步骤序号并传递给 generateHanoiSteps
function showHints() {
    const numDisks = document.getElementById('numDisks').value; // 获取圆盘数量
    let steps = [];
    let stepNumber = [1]; // 初始化步骤序号为1，并使用数组传递以便在递归调用中更新
    generateHanoiSteps(parseInt(numDisks, 10), 'A', 'C', 'B', steps, stepNumber);

    // 将步骤显示到多行文本框中
    document.getElementById('hintsBox').value = steps.join("\n");
}

// 启动游戏
// initGame(numDisks);

附录、汉诺塔递归算法文字版JS代码

//参数：n盘片数量, A为起始柱，C为目标柱，B为辅助柱
function move(n, a, b, c) {
    if (n === 1) {
        console.log(a + '-->' + c)
    } else {
        move(n - 1, a, c, b);
        move(1, a, b, c);
        move(n - 1, b, a, c)
    }
}

//将3个盘子从柱子A移动到柱子C。
move(3, 'A', 'B', 'C');

在浏览器控制台运行：