拼图 | (篮球投篮)

简介

这是一个基于拼图思路设计的篮球投篮小游戏，玩家需要通过将碎片拼合成一张完整的图片，来获得投篮的机会。游戏难度逐渐增加，需要玩家不断提高拼图技巧和篮球投篮技能。

游戏规则

1. 玩家需要将拼图碎片拼合成一张完整的图片，才能获得投篮的机会。
2. 拼图碎片的数量逐渐增加，难度逐渐加大。
3. 玩家需要在规定的时间内完成拼图，否则游戏失败。
4. 玩家需要在规定的时间内投中一定数量的篮球，否则游戏失败。
5. 游戏中设有多个关卡，难度逐渐增加。

技术实现

该游戏基于HTML、CSS和JavaScript技术实现。

HTML

HTML主要用于页面结构的搭建，包括游戏界面、开始界面、结束界面等。

CSS

CSS主要用于页面的样式设置，包括文字、图片、按钮等的样式。

JavaScript

JavaScript主要用于实现游戏的功能，包括拼图的拼合、倒计时、碰撞检测、分数计算等。

代码片段

// 生成拼图碎片
function createPuzzle(num) {
  let puzzleLength = num ** 2;
  let puzzleArr = [];
  
  // 生成拼图块的编号数组
  for (let i = 1; i < puzzleLength; i++) {
    puzzleArr.push(i);
  }
  puzzleArr.push(0);
  
  // 打乱拼图块的编号数组
  for (let i = puzzleLength - 1; i > 0; i--) {
    let j = Math.floor(Math.random() * (i + 1));
    [puzzleArr[i], puzzleArr[j]] = [puzzleArr[j], puzzleArr[i]];
  }
  
  // 根据编号数组生成拼图碎片
  for (let i = 0; i < puzzleLength; i++) {
    let puzzlePiece = document.createElement('div');
    if (puzzleArr[i] !== 0) {
      puzzlePiece.style.backgroundPositionX = -((puzzleArr[i] - 1) % num) * 100 + '%';
      puzzlePiece.style.backgroundPositionY = -Math.floor((puzzleArr[i] - 1) / num) * 100 + '%';
    } else {
      puzzlePiece.className = 'empty';
      emptyIndex = i;
    }
    puzzlePiece.className += ' puzzle-piece';
    puzzlePiece.id = i;
    puzzleContainer.appendChild(puzzlePiece);
  }
}

// 拼图块点击事件
function clickPuzzlePiece(e) {
  let number = parseInt(e.target.id);
  let row = Math.floor(number / num);
  let col = number % num;
  
  // 判断是否可交换
  if (row > 0 && emptyIndex === number - num) {
    swapPuzzle(number - num, number);
  } else if (row < num - 1 && emptyIndex === number + num) {
    swapPuzzle(number + num, number);
  } else if (col > 0 && emptyIndex === number - 1) {
    swapPuzzle(number - 1, number);
  } else if (col < num - 1 && emptyIndex === number + 1) {
    swapPuzzle(number + 1, number);
  }
}

// 交换拼图块
function swapPuzzle(currentIndex, targetIndex) {
  [puzzlePieces[currentIndex].style.backgroundPositionX, puzzlePieces[targetIndex].style.backgroundPositionX] = [puzzlePieces[targetIndex].style.backgroundPositionX, puzzlePieces[currentIndex].style.backgroundPositionX];
  [puzzlePieces[currentIndex].style.backgroundPositionY, puzzlePieces[targetIndex].style.backgroundPositionY] = [puzzlePieces[targetIndex].style.backgroundPositionY, puzzlePieces[currentIndex].style.backgroundPositionY];
  [puzzlePieces[currentIndex].id, puzzlePieces[targetIndex].id] = [puzzlePieces[targetIndex].id, puzzlePieces[currentIndex].id];
  emptyIndex = targetIndex;
  
  // 判断是否拼图完成
  if (checkPuzzleComplete()) {
    document.removeEventListener('click', clickPuzzlePiece); 
    setTimeout(startShooting, 500);
  }
}

以上代码片段包含了生成拼图碎片、实现拼图块点击事件、交换拼图块等功能的实现。