JS与HTML拖拽功能改造：硬件图片匹配对应名称插槽问题咨询

原代码的匹配逻辑存在值不匹配问题：插槽的data-number存储的是1-10的数字，而你修改卡片为字符串标识后，卡片的data-number存储的是字符串，判断条件slotNumber == cardNumber自然无法触发正确逻辑。

• 统一匹配标识：将插槽和卡片的匹配值都改为和硬件名称对应的标准化字符串（和图片名前缀对应，比如motherboard对应motherboard.jpg）
• 改造卡片生成逻辑：把原来的数字文本替换为<img>标签加载硬件图片，保留匹配标识的存储
• 修改放置判断逻辑：将原数字比对改为标准化字符串比对

var correctCards = 0;
$( init );

function init() {

  // 隐藏成功提示
  $('#successMessage').hide();
  $('#successMessage').css( {
    left: '580px',
    top: '250px',
    width: 0,
    height: 0
  } );

  // 重置游戏状态
  correctCards = 0;
  $('#cardPile').html( '' );
  $('#cardSlots').html( '' );

  // 硬件配置数组，key为匹配标识，label为插槽显示名称，img为对应图片路径
  const hardwareMap = [
    { key: 'motherboard', label: 'Motherboard', img: 'motherboard.jpg' },
    { key: 'ram', label: 'RAM', img: 'ram.jpg' },
    { key: 'gpu', label: 'GPU', img: 'gpu.jpg' },
    { key: 'cpu', label: 'CPU', img: 'cpu.jpg' },
    { key: 'io', label: 'I/O', img: 'io.jpg' },
    { key: 'power', label: 'Power supply', img: 'power.jpg' },
    { key: 'optical', label: 'Optical Drive', img: 'optical.jpg' },
    { key: 'hdd', label: 'HDD', img: 'hdd.jpg' },
    { key: 'ssd', label: 'SSD', img: 'ssd.jpg' },
    { key: 'expansion', label: 'Expansion slots', img: 'expansion.jpg' }
  ];
  
  // 打乱卡片顺序
  const shuffledCards = [...hardwareMap].sort( () => Math.random() - 0.5 );

  // 生成可拖拽的图片卡片
  for ( let i=0; i<shuffledCards.length; i++ ) {
    const card = shuffledCards[i];
    $('<div><img src="'+ card.img +'" alt="'+ card.label +'" style="width:100%;height:100%;object-fit:contain;"></div>')
      .data( 'hardwareKey', card.key )
      .attr( 'id', 'card-'+card.key )
      .appendTo( '#cardPile' )
      .draggable( {
        containment: '#content',
        stack: '#cardPile div',
        cursor: 'move',
        revert: true
      } );
  }

  // 生成插槽
  for ( let i=0; i<hardwareMap.length; i++ ) {
    const slot = hardwareMap[i];
    $('<div>' + slot.label + '</div>')
      .data( 'hardwareKey', slot.key )
      .appendTo( '#cardSlots' )
      .droppable( {
        accept: '#cardPile div',
        hoverClass: 'hovered',
        drop: handleCardDrop
      } );
  }

}

function handleCardDrop( event, ui ) {
  const slotKey = $(this).data( 'hardwareKey' );
  const cardKey = ui.draggable.data( 'hardwareKey' );

  // 匹配成功逻辑
  if ( slotKey === cardKey ) {
    ui.draggable.addClass( 'correct' );
    ui.draggable.draggable( 'disable' );
    $(this).droppable( 'disable' );
    ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
    ui.draggable.draggable( 'option', 'revert', false );
    correctCards++;
  } 
  
  // 全部匹配成功的提示
  if ( correctCards == 10 ) {
    $('#successMessage').show();
    $('#successMessage').animate( {
      left: '380px',
      top: '200px',
      width: '400px',
      height: '100px',
      opacity: 1
    } );
  }

}

• 请将代码里的图片文件名替换为你实际存储的图片路径，确保图片能正常加载
• 你需要给#cardPile div和#cardSlots div设置固定宽高，和图片尺寸匹配，避免拖拽显示异常
• 原代码里的Oprical Drive为拼写错误，已修正为Optical Drive，如果需要保留原拼写可自行调整

内容的提问来源于stack exchange，提问作者Lullabella