基于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 相关文章推荐
javascript计算用户打开网页的停留时间
Jan 09 Javascript
javascript中解析四则运算表达式的算法和示例
Aug 11 Javascript
jquery限定文本框只能输入数字(整数和小数)
Jan 08 Javascript
Vue2.x中的父子组件相互通信的实现方法
May 02 Javascript
Angularjs 事件指令详细整理
Jul 27 Javascript
JScript实现表格的简单操作
Aug 15 Javascript
Webpack 之 babel-loader文件预处理器详解
Mar 23 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
Aug 02 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
Mar 05 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
Aug 01 Javascript
vue-cli随机生成port源码的方法
Sep 02 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
Sep 24 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
地球防卫队:陪着奥特曼打小怪兽的人类力量 那些经典队服
2020/03/08 日漫
PHP数组的交集array_intersect(),array_intersect_assoc(),array_inter_key()函数的小问题
2011/05/29 PHP
用PHP+MySQL搭建聊天室功能实例代码
2012/08/20 PHP
php计算程序运行时间的简单例子分享
2014/05/10 PHP
Codeigniter整合Tank Auth权限类库详解
2014/06/12 PHP
php模仿asp Application对象在线人数统计实现方法
2015/01/04 PHP
PHP下载生成的csv文件及问题总结
2015/08/06 PHP
PHP实现从PostgreSQL数据库检索数据分页显示及根据条件查找数据示例
2018/06/09 PHP
Prototype使用指南之base.js
2007/01/10 Javascript
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
2012/03/14 Javascript
javascript中2个感叹号的用法实例详解
2014/09/04 Javascript
JavaScript通过代码调用Flash显示的方法
2016/02/02 Javascript
JS从一组数据中找到指定的单条数据的方法
2016/06/02 Javascript
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
原生JS使用Canvas实现拖拽式绘图功能
2019/06/05 Javascript
Openlayers显示瓦片网格信息的方法
2020/09/28 Javascript
[36:09]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
python实现在每个独立进程中运行一个函数的方法
2015/04/23 Python
Python 爬虫之超链接 url中含有中文出错及解决办法
2017/08/03 Python
Python使用PIL模块生成随机验证码
2017/11/21 Python
django admin添加数据自动记录user到表中的实现方法
2018/01/05 Python
Python3使用正则表达式爬取内涵段子示例
2018/04/22 Python
Python 实现引用其他.py文件中的类和类的方法
2018/04/29 Python
Sanic框架配置操作分析
2018/07/17 Python
使用K.function()调试keras操作
2020/06/17 Python
如果NULL定义成#define NULL((char *)0)难道不就可以向函数传入不加转换的NULL了吗
2012/02/15 面试题
机电一体化毕业生求职信
2013/11/02 职场文书
大学专科求职信
2014/07/02 职场文书
银行授权委托书范本
2014/10/04 职场文书
十八大标语口号
2014/10/09 职场文书
2014年学生会生活部工作总结
2014/11/07 职场文书
小学班级标语口号大全
2015/12/26 职场文书
如何书写你的职业生涯规划书?
2019/06/27 职场文书
vue3中provide && inject的使用
2021/07/01 Vue.js
opencv检测动态物体的实现
2021/07/21 Python
游戏《东方异文石:爱亚利亚黎明》正式版发布
2022/04/03 其他游戏