经典9宫格拼图游戏 - 在线玩

// 获取所有拼图块的DOM元素 var blockdiv01 = document.getElementById('blockdiv01'); var blockdiv02 = document.getElementById('blockdiv02'); var blockdiv03 = document.getElementById('blockdiv03'); var blockdiv04 = document.getElementById('blockdiv04'); var blockdiv05 = document.getElementById('blockdiv05'); var blockdiv06 = document.getElementById('blockdiv06'); var blockdiv07 = document.getElementById('blockdiv07'); var blockdiv08 = document.getElementById('blockdiv08'); var blockdiv09 = document.getElementById('blockdiv09');

// 获取目标图像的DOM元素 var imgyuan = document.getElementById('imgyuan');

// 定义拼图块的位置数组 var positions = [ { top: '0px', left: '0px' }, { top: '0px', left: '150px' }, { top: '0px', left: '300px' }, { top: '150px', left: '0px' }, { top: '150px', left: '150px' }, { top: '150px', left: '300px' }, { top: '300px', left: '0px' }, { top: '300px', left: '150px' }, { top: '300px', left: '300px' } ];

// 定义拼图块的初始位置 var initPositions = [ { top: '0px', left: '0px' }, { top: '0px', left: '150px' }, { top: '0px', left: '300px' }, { top: '150px', left: '0px' }, { top: '150px', left: '150px' }, { top: '150px', left: '300px' }, { top: '300px', left: '0px' }, { top: '300px', left: '150px' }, { top: '300px', left: '300px' } ];

// 定义当前空白块的位置 var blankPosition = 8;

// 随机打乱拼图块的位置 function shuffle() { for (var i = 0; i < 100; i++) { var randomIndex = Math.floor(Math.random() * 8); swap(randomIndex, blankPosition); blankPosition = randomIndex; } }

// 交换两个拼图块的位置 function swap(index1, index2) { var temp = positions[index1]; positions[index1] = positions[index2]; positions[index2] = temp; updateBlockPosition(); }

// 更新拼图块的位置 function updateBlockPosition() { blockdiv01.style.top = positions[0].top; blockdiv01.style.left = positions[0].left;

blockdiv02.style.top = positions[1].top; blockdiv02.style.left = positions[1].left;

blockdiv03.style.top = positions[2].top; blockdiv03.style.left = positions[2].left;

blockdiv04.style.top = positions[3].top; blockdiv04.style.left = positions[3].left;

blockdiv05.style.top = positions[4].top; blockdiv05.style.left = positions[4].left;

blockdiv06.style.top = positions[5].top; blockdiv06.style.left = positions[5].left;

blockdiv07.style.top = positions[6].top; blockdiv07.style.left = positions[6].left;

blockdiv08.style.top = positions[7].top; blockdiv08.style.left = positions[7].left;

blockdiv09.style.top = positions[8].top; blockdiv09.style.left = positions[8].left; }

// 初始化拼图 function init() { shuffle(); updateBlockPosition(); }

// 拼图块被点击时触发的函数 function change(blockId) { var blockIndex = blockId.slice(-2) - 1; // 获取拼图块在数组中的下标

// 判断点击的拼图块是否与空白块相邻 if ( (blockIndex === 1 && blankPosition === 0) || (blockIndex === 0 && blankPosition === 1) || (blockIndex === 2 && blankPosition === 1) || (blockIndex === 1 && blankPosition === 2) || (blockIndex === 4 && blankPosition === 3) || (blockIndex === 3 && blankPosition === 4) || (blockIndex === 5 && blankPosition === 4) || (blockIndex === 4 && blankPosition === 5) || (blockIndex === 7 && blankPosition === 6) || (blockIndex === 6 && blankPosition === 7) || (blockIndex === 8 && blankPosition === 7) || (blockIndex === 7 && blankPosition === 8) ) { swap(blockIndex, blankPosition); blankPosition = blockIndex; }

// 判断是否拼图完成 if ( positions[0].top === initPositions[0].top && positions[0].left === initPositions[0].left && positions[1].top === initPositions[1].top && positions[1].left === initPositions[1].left && positions[2].top === initPositions[2].top && positions[2].left === initPositions[2].left && positions[3].top === initPositions[3].top && positions[3].left === initPositions[3].left && positions[4].top === initPositions[4].top && positions[4].left === initPositions[4].left && positions[5].top === initPositions[5].top && positions[5].left === initPositions[5].left && positions[6].top === initPositions[6].top && positions[6].left === initPositions[6].left && positions[7].top === initPositions[7].top && positions[7].left === initPositions[7].left && positions[8].top === initPositions[8].top && positions[8].left === initPositions[8].left ) { alert('恭喜你，拼图完成！'); } }

// 页面加载完成后初始化拼图 window.onload = function () { init(); };