写一个连连看显示两个图片之间连线的函数

创建一个连连看功能，通常需要以下几个步骤，包括选择两个相邻的图片元素（通常是HTML中的img标签）、检查它们是否匹配，以及绘制连接线。这里是一个简单的JavaScript函数示例，用于在一个基础的连连看游戏中展示连线：

// 假设我们有一个HTML结构，包含id为"images"的div，内有若干个img元素
const imagesContainer = document.getElementById('images');

// 定义一个数组存储图片及其对应的ID
let imagePairs = [];

// 添加图片数据和ID到imagePairs数组
function initImageLinks() {
  for (let i = 0; i < imagesContainer.children.length; i++) {
    let img = imagesContainer.children[i];
    imagePairs.push({ id: i, src: img.src }); // 假设每个img标签都有src属性
  }
}

// 连接相邻匹配的图片
function drawLines(imgId1, imgId2) {
  if (imagePairs[imgId1].match === imagePairs[imgId2].match) { // 假设每个图片都有match属性表示是否匹配
    // 创建线条元素
    const line = document.createElement('line');
    line.x1 = imagesContainer.children[imgId1].offsetLeft;
    line.y1 = imagesContainer.children[imgId1].offsetTop;
    line.x2 = imagesContainer.children[imgId2].offsetLeft;
    line.y2 = imagesContainer.children[imgId2].offsetTop;
    line.stroke = 'black'; // 设置线条颜色
    line.strokeWidth = 2; // 线条宽度

    // 添加线条到DOM
    document.body.appendChild(line);
    console.log(`Connected images ${imgId1} and ${imgId2}`);
  }
}

// 初始化图片链接并添加点击事件监听
initImageLinks();
imagesContainer.addEventListener('click', function(event) {
  let imgClicked = event.target.closest('img');
  if (imgClicked) {
    drawLines(imagePairs.indexOf(imgClicked.dataset.id), // 获取被点击图片的索引
              // 你可以在此处添加另一个条件，如检查是否有未连接的邻居
              // ...getNeighbor(imgClicked)); // 获取邻居图片的id
    }
});

这个例子只是一个基本框架，实际应用中你可能还需要处理用户交互（例如拖拽和交换等），以及更复杂的匹配规则。同时，这个示例假设图片已经被标记为匹配或非匹配的状态。你需要根据具体的项目需求来调整代码。