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


Posted in Javascript onOctober 12, 2019

成品效果

 基于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 相关文章推荐
DWR Ext 加载数据
Mar 22 Javascript
JQuery jsonp 使用示例代码
Aug 12 Javascript
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
Jan 12 Javascript
JS获取DropDownList的value值与text值的示例代码
Jan 07 Javascript
JavaScript获取DOM元素的11种方法总结
Apr 25 Javascript
jQuery实现简单的点赞效果
May 29 Javascript
jQuery实现点击行选中或取消CheckBox的方法
Aug 01 Javascript
JS简单生成两个数字之间随机数的方法
Aug 03 Javascript
浅谈jquery选择器 :first与:first-child的区别
Nov 20 Javascript
jQuery实现验证码功能
Mar 17 Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
Oct 26 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
Aug 08 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
Oct 12 #Javascript
Vue.js计算机属性computed和methods方法详解
Oct 12 #Javascript
微信小程序 导入图标实现过程详解
Oct 11 #Javascript
在vue中高德地图引入和轨迹的绘制的实现
Oct 11 #Javascript
vue实现点击按钮下载文件功能
Oct 11 #Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
Oct 11 #Javascript
详解vue 自定义组件使用v-model 及探究其中原理
Oct 11 #Javascript
You might like
sony ICF-2010 拆解与改装
2021/03/02 无线电
关于mysql 字段的那个点为是定界符
2007/01/15 PHP
Thinkphp模板中使用自定义函数的方法
2012/09/23 PHP
zf框架db类的分页示例分享
2014/03/14 PHP
php制作动态随机验证码
2015/02/12 PHP
php-msf源码详解
2017/12/25 PHP
Js 去掉字符串中的空格(实现代码)
2013/11/19 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
2015/02/10 Javascript
JS版元素周期表实现方法
2015/08/05 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
2016/01/27 Javascript
Vue响应式原理详解
2017/04/18 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
2017/05/02 Javascript
vue实现全选和反选功能
2017/08/31 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
2019/04/04 Javascript
node省市区三级数据性能测评实例分析
2019/11/06 Javascript
在vue-cli创建的项目中使用sass操作
2020/08/10 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
2020/10/02 Javascript
Python 自动安装 Rising 杀毒软件
2009/04/24 Python
Python使用cx_Oracle模块将oracle中数据导出到csv文件的方法
2015/05/16 Python
浅谈python可视化包Bokeh
2018/02/07 Python
浅谈python下含中文字符串正则表达式的编码问题
2018/12/07 Python
详细介绍pandas的DataFrame的append方法使用
2019/07/31 Python
Python 随机生成测试数据的模块:faker基本使用方法详解
2020/04/09 Python
Python classmethod装饰器原理及用法解析
2020/10/17 Python
python 元组和列表的区别
2020/12/30 Python
python爬取youtube视频的示例代码
2021/03/03 Python
如何用canvas实现在线签名的示例代码
2018/07/10 HTML / CSS
英国领先的奢侈品零售商之一:CRUISE
2016/12/02 全球购物
俄罗斯厨房产品购物网站:COOK HOUSE
2021/03/15 全球购物
岗位竞聘演讲稿范文
2014/04/24 职场文书
教师思想作风整顿个人剖析材料
2014/10/10 职场文书
党的群众路线教育实践活动实施方案
2014/10/31 职场文书
社保缴纳证明申请书
2014/11/03 职场文书
父亲节寄语大全
2015/02/27 职场文书
工作会议简报
2015/07/20 职场文书
PO模式在selenium自动化测试框架的优势
2022/03/20 Python