H5汉诺塔小游戏

简介: H5汉诺塔小游戏

汉诺塔小游戏

汉诺塔

<!DOCTYPE html>
<html>
<head>
  <title>汉诺塔游戏</title>
  <style>
    .tower {
    
    
      position: relative;
      display: inline-block;
      width: 200px;
      height: 300px;
      border: 1px solid #000;
      margin: 20px;
    }
    .disk {
    
    
      position: absolute;
      width: 100%;
      height: 20px;
      background-color: #00f;
      transition: left 0.5s, bottom 0.5s; /* 添加 bottom 过渡效果 */
    }
  </style>
</head>
<body>
  <div class="tower" id="tower1"></div>
  <div class="tower" id="tower2"></div>
  <div class="tower" id="tower3"></div>

  <script src="../js/jquery-3.7.0.min.js"></script>
  <script>
    $(document).ready(function() {
    
    
      var numDisks = 3;
      var diskHeight = 20;
      var towerHeight = 300;
      var towerWidth = 200;
      var towerPadding = 20;
      var selectedDisk = null;

      $('.tower').on('click', function() {
    
    
        var currentTower = $(this);

        if (selectedDisk === null) {
    
    
          var topDisk = currentTower.children('.disk').first();
          if (topDisk.length === 0) {
    
    
            return; // 当前柱子上没有盘子可选
          }
          selectedDisk = topDisk.detach();
          selectedDisk.addClass('selected');
        } else {
    
    
          var targetTower = currentTower;
          var targetDisk = currentTower.children('.disk').first();
          if (targetDisk.length === 0 || targetDisk.width() > selectedDisk.width()) {
    
    
            selectedDisk.prependTo(targetTower);
            selectedDisk.removeClass('selected');
            selectedDisk = null;
          } else {
    
    
            return; // 无效移动,目标柱子上有更小的盘子
          }
        }

        // 设置盘子位置
        $('.tower').each(function() {
    
    
          var tower = $(this);
          var disks = tower.children('.disk');
          var numDisks = disks.length;
          disks.each(function(index) {
    
    
            var disk = $(this);
            var bottom = (numDisks - 1 - index) * diskHeight;
            disk.css('bottom', bottom + 'px');
          });
        });

        // 判断是否完成游戏
        if ($('#tower3 .disk').length === numDisks) {
    
    
          console.log('游戏完成!');
          setTimeout(() => {
    
    
            alert("游戏完成!")
          }, 500);
        }
      });

      // 初始化游戏
      function init() {
    
    
        var tower1 = $('#tower1');
        var towerWidthOffset = (towerWidth - towerPadding) / 2;

        for (var i = numDisks; i > 0; i--) {
    
    
          var diskWidth = i * 40;
          var diskLeft = (towerWidth - diskWidth) / 2;
          var disk = $('<div class="disk"></div>').css({
    
    
            width: diskWidth + 'px',
            left: diskLeft + 'px'
          });
          tower1.prepend(disk);
        }

        // 设置初始盘子位置
        $('.tower').each(function() {
    
    
          var tower = $(this);
          var disks = tower.children('.disk');
          var numDisks = disks.length;
          disks.each(function(index) {
    
    
            var disk = $(this);
            var bottom = (numDisks - 1 - index) * diskHeight;
            disk.css('bottom', bottom + 'px');
          });
        });
      }

      init();
    });
  </script>
</body>
</html>
AI 代码解读
相关文章
内网穿透的原理和实现方式
一、定义 内网穿透也成NAT穿透,进行NAT穿透是为了使具有某一个特定源IP地址和源端口号的数据包不被NAT设备屏蔽而正确路由到内网主机。
微信小程序--data的赋值与取值的几种方式
微信小程序--data的赋值与取值的几种方式
859 0
通义灵码使用指南
一款不用充钱也能让你变强的插件 通义灵码(TONGYI Lingma),可以称之为中国copilot 的平替品。我们一起看看如何使用安装,功能介绍,常用问题,客户测评等。
6491 12
通义灵码使用指南
Linux:查看服务器信息,CPU、内存、系统版本、内核版本等
Linux:查看服务器信息,CPU、内存、系统版本、内核版本等
4921 0
Linux:查看服务器信息,CPU、内存、系统版本、内核版本等
2025年NVIDIA RTX 4090服务器租赁价格与选型详解
随着AI训练、深度学习与图形渲染需求激增,NVIDIA RTX 4090显卡成为算力租赁市场的热门选择。本文从价格体系、配置适配、成本优化三方面解析4090服务器租赁策略,涵盖短租长租价格差异、主流平台对比、硬件配置建议及成本优化方案,助您精准匹配业务需求。此外,还介绍了阿里云高性能GPU实例作为替代方案,提供稳定性和生态集成优势。
AI计算机视觉笔记二十六:YOLOV8自训练关键点检测
本文档详细记录了使用YOLOv8训练关键点检测模型的过程。首先通过清华源安装YOLOv8,并验证安装。接着通过示例权重文件与测试图片`bus.jpg`演示预测流程。为准备训练数据,文档介绍了如何使用`labelme`标注工具进行关键点标注,并提供了一个Python脚本`labelme2yolo.py`将标注结果从JSON格式转换为YOLO所需的TXT格式。随后,通过Jupyter Notebook可视化标注结果确保准确性。最后,文档展示了如何组织数据集目录结构,并提供了训练与测试代码示例,包括配置文件`smoke.yaml`及训练脚本`train.py`,帮助读者完成自定义模型的训练与评估。
2012 2
|
11月前
|
API
VUE3——如何挂载全局属性和方法
VUE3——如何挂载全局属性和方法
447 0
在 MySQL 中使用 `REPLACE` 函数
【8月更文挑战第8天】
1282 7
在 MySQL 中使用 `REPLACE` 函数
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问