基于JS實現(xiàn)簡單滑塊拼圖游戲

更新時間：2019年10月12日 08:41:55 作者：凌寒舞_宇

本文通過實例代碼給大家介紹了JS實現(xiàn)簡單滑塊拼圖游戲，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧

成品效果

<body>
  <div id="game" style="position:relative"></div>
  </body>

/**
 * js配置
 */
var config = {
  width: 300,
  height: 300,
  img: "./img/fj.jpg",
  gameDom: document.getElementById("game"),
  row: 3, //3行
  col: 3 //3列
}
//經(jīng)過計算的一些數(shù)據(jù)
var computed = {
  num: config.col * config.row, //方塊數(shù)量
  w: config.width / config.col, //每個小方塊的寬度
  h: config.height / config.row //每個小方塊的高度
}
//方塊對象的數(shù)組，每個對象中記錄了方塊的正確坐標、當前坐標、dom元素、以及一些實用方法
var blocks;
/**
 * 為全局變量blocks賦值
 */
function setBlocks() {
  blocks = [];
  var points = getPointsArray(); //該數(shù)組用于設置每個方塊的正確坐標
  var shuffledPoints = [...points]; //復制后的數(shù)組用于在洗牌后設置方塊的當前坐標
  shuffle(shuffledPoints);//洗牌
  for (var i = 0; i < points.length; i++) {
    const point = points[i];
    //創(chuàng)建方塊對象
    var b = {
      left: point.left,
      top: point.top,
      curLeft: shuffledPoints[i].left,
      curTop: shuffledPoints[i].top,
      dom: document.createElement("div"),
      update() {
        this.dom.style.transition = "all .5s";
        this.dom.style.left = this.curLeft + "px";
        this.dom.style.top = this.curTop + "px";
      },
      isCorrect() {
        return this.curTop === this.top && this.curLeft === this.left;
      },
      isEmpty: i === points.length - 1 //是否應該是空白方塊
    }
    b.dom.style.width = computed.w + "px";
    b.dom.style.height = computed.h + "px";
    b.dom.style.position = "absolute";
    b.dom.style.border = "1px solid #fff";
    b.dom.style.boxSizing = "border-box";
    b.dom.style.background = `url("${config.img}")`;
    b.dom.style.cursor = "pointer";
    b.dom.style.backgroundPosition = `-${b.left}px -${b.top}px`;
    b.dom.block = b;
    b.dom.onclick = function () {
      switchBlock(this.block);
    }
    b.update();
    blocks.push(b);
  }
}
/**
 * 生成游戲
 */
function generateGame() {
  config.gameDom.style.width = config.width + "px";
  config.gameDom.style.height = config.height + "px";
  config.gameDom.style.border = "2px solid #8c8c8c";
  config.gameDom.innerHTML = ""; //清空區(qū)域
  for (const item of blocks) {
    if (!item.isEmpty) {
      config.gameDom.appendChild(item.dom);
    }
  }
}
/**
 * 獲得所有方塊的可取到的坐標數(shù)組
 */
function getPointsArray() {
  var arr = [];
  for (var i = 0; i < computed.num; i++) {
    arr.push({
      left: (i % config.col) * computed.w,
      top: parseInt(i / config.col) * computed.h
    });
  }
  return arr;
}

/**
 * 將某個block對象的坐標，與空坐標交換
 * @param {*} block 
 */
function switchBlock(block) {
  //找到空坐標
  var emptyBlock = blocks.find(b=>b.isEmpty);
  //判斷是否相鄰
  if(Math.abs(block.curLeft - emptyBlock.curLeft) + 
  Math.abs(block.curTop - emptyBlock.curTop) !== computed.w){
    return;
  }
  //交換
  var bLeft = block.curLeft;
  var bTop = block.curTop;
  block.curLeft = emptyBlock.curLeft;
  block.curTop = emptyBlock.curTop;
  emptyBlock.curLeft = bLeft;
  emptyBlock.curTop = bTop;
  block.update();
  emptyBlock.update();
  if(isWin()){
    setTimeout(() => {
      alert("游戲勝利")
    }, 500);
  }
}
/**
 * 數(shù)組洗牌
 * @param {*} arr 
 */
function shuffle(arr) {
  for (var i = 0; i < arr.length - 1; i++) {
    var targetIndex = getRandom(0, arr.length - 1);
    var temp = arr[i];
    arr[i] = arr[targetIndex];
    arr[targetIndex] = temp;
  }
}
function getRandom(min, max) {
  var dec = max - min;
  return Math.floor(Math.random() * dec + min);
}
/**
 * 游戲是否勝利
 */
function isWin() {
  for (const b of blocks) {
    if (!b.isCorrect()) {
      return false;
    }
  }
  return true;
}
setBlocks();
generateGame();

總結

以上所述是小編給大家介紹的基于JS實現(xiàn)簡單滑塊拼圖游戲,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！

您可能感興趣的文章: