基于JS实现简单滑块拼图游戏

 更新时间:2019年10月12日 08:41:55   作者:凌寒舞_宇  
本文通过实例代码给大家介绍了JS实现简单滑块拼图游戏,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧

成品效果

 

<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列
}
//经过计算的一些数据
var computed = {
  num: config.col * config.row, //方块数量
  w: config.width / config.col, //每个小方块的宽度
  h: config.height / config.row //每个小方块的高度
}
//方块对象的数组,每个对象中记录了方块的正确坐标、当前坐标、dom元素、以及一些实用方法
var blocks;
/**
 * 为全局变量blocks赋值
 */
function setBlocks() {
  blocks = [];
  var points = getPointsArray(); //该数组用于设置每个方块的正确坐标
  var shuffledPoints = [...points]; //复制后的数组用于在洗牌后设置方块的当前坐标
  shuffle(shuffledPoints);//洗牌
  for (var i = 0; i < points.length; i++) {
    const point = points[i];
    //创建方块对象
    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 = ""; //清空区域
  for (const item of blocks) {
    if (!item.isEmpty) {
      config.gameDom.appendChild(item.dom);
    }
  }
}
/**
 * 获得所有方块的可取到的坐标数组
 */
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);
  }
}
/**
 * 数组洗牌
 * @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实现简单滑块拼图游戏,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

相关文章

  • 整理JavaScript创建对象的八种方法

    整理JavaScript创建对象的八种方法

    JavaScript创建对象的方法有很多种,本文给大家介绍javascript创建对象的八种方法,对javascript创建对象感兴趣的朋友可以参考下本篇文章
    2015-11-11
  • JavaScript面向对象的实现方法小结

    JavaScript面向对象的实现方法小结

    这篇文章主要介绍了JavaScript面向对象的实现方法,实例总结了两种常见的面向对象的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-04-04
  • JavaScript函数详解

    JavaScript函数详解

    本文由简入深,详细介绍了javascript的函数问题,非常的详尽,非常的实用,这里推荐给大家,是篇不可多得的文章
    2015-02-02
  • JavaScript取得键盘按下方向键是哪个的方法

    JavaScript取得键盘按下方向键是哪个的方法

    这篇文章主要介绍了JavaScript取得键盘按下方向键是哪个的方法,涉及javascript针对键盘按键事件的判定技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • js防止表单重复提交实现代码

    js防止表单重复提交实现代码

    重复提交、重复刷新、防止后退等等都是属于系统为避免重复记录而需要解决的问题,在客户端去处理需要针对每一种的可能提出相应的解决方案,然而在服务器端看来只不过是对于数据真实性的检验问题
    2012-09-09
  • JavaScript Object的extend是一个常用的功能

    JavaScript Object的extend是一个常用的功能

    对Object的extend是一个常用的功能。举一个例子,由于javascript 没有重载(overload),而且函数的参数类型是没有定义的,所以很多时候我们都传入一个对象来作为参数已方便控制。
    2009-12-12
  • JavaScript构造函数详解

    JavaScript构造函数详解

    构造函数就是初始化一个实例对象,对象的prototype属性是继承一个实例对象。本文给大家分享javascript构造函数详解,对js构造函数相关知识感兴趣的朋友一起学习吧
    2015-12-12
  • Javascript高级技巧分享

    Javascript高级技巧分享

    这篇文章主要介绍了Javascript高级技巧,需要的朋友可以参考下
    2014-02-02
  • window.opener用法和用途实例介绍

    window.opener用法和用途实例介绍

    window.opener,是通过window.open打开子窗体的父窗体的引用,下面为大家详细介绍下其具体的使用方法,感兴趣的朋友可以参考下
    2013-08-08
  • JavaScript 中级笔记 第五章 面向对象的基础

    JavaScript 中级笔记 第五章 面向对象的基础

    对象是JavaScript的基础。从最基本的层次上说,对象是一系列属性的集合。
    2009-09-09

最新评论