JS实现拼图游戏

2024-12-02 18:40:30

使用JS制作了一款拼图游戏供大家参考。

原理分析：

1.鼠标的点击和松开事件
2.显示原图作为参考
3.方块的移动替换
4.是否完成拼图的判断
5.完成之后会弹窗提示

效果演示

代码展示

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>拼图游戏</title>
 </head>

 <style>
 body,
 html {
 padding: 0px;
 margin: 0px;
 background: #eee;
 }

 #fangkuai {
 width: 460px;
 height: 460px;
 margin: 20px auto;
 background: #F9F9F9;
 padding: 1px 1px;
 position: relative;
 }

 #maskBox {
 opacity: 0.5;
 display: block;
 }

 #tu img {
 width: 120px;
 height: 120px;
 }

 #tu {
 width: 130px;
 height: 130px;
 margin-left: 150px;
 }
 </style>

 <body>

 <div style="width:460px;margin:20px auto;text-align:center;line-height:30px;">游戏玩法：点击选中一个方块，在点击放在对应的方块里。</div>

 <div id="tu">
 <font>参考原图</font>
 <img src="true.png" />
 </div>

 <div id="fangkuai"></div>

 </body>
 <script>
 window.onload = function() {
 //生成函数
 gameInfo.init();
 }
 </script>
 <script>
 (function($g) {
 //游戏配置
 setting = {
 gameConfig: {
 url: "true.png",
 id: "fangkuai",
 //生成规格横4 纵4
 size: "4*4",
 //每个元素的间隔
 margin: 1,
 //拖动时候块透明度
 opacity: 0.8
 },
 setElement: {
 type: "div",
 id: "",
 float: "",
 display: "",
 margin: "",
 background: "",
 width: "",
 height: "",
 left: "",
 top: "",
 position: "",
 opacity: 0.4,
 animate: 0.8
 }
 };
 //元素生成参数
 var sg = setting.gameConfig;
 var st = setting.setElement;
 var gameInfo = function() {};
 gameInfo.prototype = {
 init: function() {
 this.creatObj();
 this.eventHand();
 },
 sortObj: {
 rightlist: [], //正确的排序
 romdlist: [] //打乱后的排序
 },
 creatObj: function() {
 sg.boxObj = document.getElementById(sg.id) || "";
 //尺寸自动获取
 var size = sg.size.split('*') || [0, 0];
 //计算单个div的高宽
 var w = Math.floor(sg.boxObj.offsetWidth / size[0]);
 var h = Math.floor(sg.boxObj.offsetHeight / size[1]);
 //图片生成div
 var size = sg.size.split('*') || [0, 0];
 var wt = size[0],
 hg = size[1];

 var sortList = [];
 for (var a = 0; a < wt * hg; a++) {
 sortList.push(a);
 }
 sortList.sort(randomsort);
 this.sortObj.rightlist = sortList;

 var _i = 0,
 sid = 0;
 for (; _i < wt; _i++) {
 var _s = 0;
 for (; _s < hg; _s++) {
 //赋值随机打散后的id
 st.id = sortList[sid++];
 st.display = "block";
 st.float = "left";

 st.margin = sg.margin + "px";
 st.background = "url('" + sg.url + "') " + (-w * _s) + "px " + (-h * _i) + "px";
 st.width = w - sg.margin * (wt / 2) + "px";
 st.height = h - sg.margin * (hg / 2) + "px";
 this.sortObj.romdlist.push(this.addElement());

 }
 }

 this.boxSort();
 },
 boxSort: function() {
 var _arrySort = this.sortObj.romdlist;
 var _tmp = [],
 _n = 0;
 eachBox(_arrySort, function(d) {
 _tmp.push(parseInt(_arrySort[d].id));
 });

 _tmp.sort(function(a, b) {
 return a > b ? 1 : -1;
 });

 for (; _n < _tmp.length; _n++) {
 var _s = 0;
 for (; _s < _arrySort.length; _s++) {
 if (_arrySort[_s].id == _tmp[_n]) {
 sg.boxObj.appendChild(_arrySort[_s]);
 }
 }
 }
 return _tmp;
 },

 addElement: function() {
 var obj = document.createElement(st.type);
 obj.id = st.id;
 obj.style.display = st.display;
 obj.style.float = st.float;
 obj.style.margin = st.margin;
 obj.style.background = st.background;
 obj.style.width = st.width;
 obj.style.position = st.position;
 obj.style.top = st.top;
 obj.style.left = st.left;
 obj.style.height = st.height;
 return obj;
 },
 mouseEvent: {
 mousedown: function(ev) {
 ev = ev || ev.event;
 ev.preventDefault();

 st.type = "span";
 st.id = "maskBox";
 st.width = this.offsetWidth + "px";
 st.height = this.offsetHeight + "px";
 st.position = "absolute";
 st.background = "";

 st.left = this.offsetLeft + "px";
 st.top = this.offsetTop + "px";
 },
 mouseup: function(ev) {
 ev = ev || ev.event;

 ev.preventDefault();
 var obj = document.getElementById(this.id);
 if (obj) {
 sg.boxObj.removeChild(obj);
 }
 },
 mousemove: function(ev) {
 ev = ev || ev.event;
 this.style.left = getX_Y.call(this, "x", ev) + "px";
 this.style.top = getX_Y.call(this, "y", ev) + "px";
 }

 },

 gameCheck: function() {
 var s = 0,
 bols = true;
 var _arry = this.sortObj.rightlist;
 var _arryRom = this.sortObj.romdlist;
 console.log(_arry);
 console.log(_arryRom);
 for (; s < _arry.length; s++) {
 if (_arry[s] != _arryRom[s].id) {
 bols = false;
 break;
 }
 }
 return bols;
 },
 eventHand: function() {
 var obj = sg.boxObj.getElementsByTagName("div");
 var i = 0,
 olen = obj.length;
 var that = this;
 var m = that.mouseEvent;
 var box_index = 0;
 for (; i < olen;) {
 (function(n) {
 //按下鼠标
 obj[n].addEventListener("mousedown", function(e) {
 var _this = this;
 m.mousedown.call(_this, e);
 st.background = _this.style.background;
 _this.style.background = "#FFF";

 var _newObj = that.addElement();
 sg.boxObj.appendChild(_newObj);
 _newObj.style.opacity = sg.opacity;
 //移动位置
 _newObj.onmousemove = function(e) {
  m.mousemove.call(_newObj, e);

  var _i = 0;

  for (; _i < olen; _i++) {
  var _w = parseInt(obj[_i].style.width) / 1.5;
  var _h = parseInt(obj[_i].style.height) / 1.5;
  var _left = obj[_i].offsetLeft;
  var _top = obj[_i].offsetTop;
  var _boxX = parseInt(this.style.left);
  var _boxY = parseInt(this.style.top);

  eachBox(obj, function(d) {
  obj[d].style.opacity = 1.0;
  });

  if (_left + _w > _boxX || _left > _boxX + _w) {
  if (_top + _h > _boxY || _top > _boxY + _h) {
  box_index = _i;
  obj[_i].style.opacity = st.opacity;
  break;
  }

  }
  }
 };
 //鼠标松开
 _newObj.addEventListener("mouseup", function(e) {
  _newObj.onmousemove = function(e) {};
  //获取当前停留元素的坐标
  var tagObj = {
  id1: obj[box_index].id,
  id2: _this.id,
  bg1: obj[box_index].style.background,
  bg2: this.style.background
  };
  //交换位置
  _this.id = tagObj.id1;
  _this.style.background = tagObj.bg1;
  obj[box_index].id = tagObj.id2;
  obj[box_index].style.background = tagObj.bg2;

  that.sortObj.romdlist = obj;
  //还原样式
  eachBox(obj, function(d) {
  obj[d].style.opacity = 1.0;
  });
  m.mouseup.call(_newObj, e);
  //判断是否完成拼图
  if (that.gameCheck()) {
  alert("好棒呀！！！");
  }
 }, false);

 }, false);

 })(i++);

 }

 }
 }
 //随机数
 function randomsort(a, b) {
 return Math.random() > .5 ? -1 : 1;
 }

 function eachBox(obj, fn) {
 var _s = 0;
 for (; _s < obj.length; _s++) {
 fn(_s);
 }
 }

 function getX_Y(s, ev) {
 var _b = (ev.clientX - this.parentNode.offsetLeft) - (this.offsetWidth / 2);
 if (s === "y") {
 _b = (ev.clientY - this.parentNode.offsetTop) - (this.offsetHeight / 2);
 }
 return _b;
 }
 $g.gameInfo = new gameInfo();
 })(window)
 </script>
</html>

参考上述代码赶快去试试吧。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

基于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
js+html5实现可在手机上玩的拼图游戏

本文实例讲述了js+html5实现可在手机上玩的拼图游戏.分享给大家供大家参考.具体如下: 手机版的拼图.pc上用Chrome 或者 Firefox var R=(function(){ /*右边菜单*/ function fa(){ if(mo.style.right!='0px'){ mo.style.right='0px'; mco.rcss('','cmck'); }else{ mo.style.right='-100px'; mco.rcss('cmck',''); } } on(mc
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】

本文实例讲述了jQuery+vue.js实现的九宫格拼图游戏.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } /*#piclist { width: 600p
javascript结合Flexbox简单实现滑动拼图游戏

滑动拼图就是把一张图片分成几等份,打乱顺序(下图),然后通过滑动拼凑成一张完整的图片. 要实现一个拼图游戏,需要考虑怎样随机的打乱顺序,怎样交换两张图片的位置,等等.但是,使用了Flexbox布局以后,这都不需要你去考虑,浏览器会帮你做,Flexbox就是这么的强大.关于Flexbox的介绍可以点击这里. 这个游戏中要用的是Flexbox布局的order属性,order属性可以用来控制Flex项目的顺序. 这里我用九个canvas元素来把图片分成九等分,也可以用其他方法,比如背景图片定位: <d
JS 拼图游戏面向对象，注释完整。

在线演示 http://img.jb51.net/online/pintu/pintu.htm 复制代码代码如下: <html> <head> <title>JS拼图游戏</title> <style> body{ font-size:9pt; } table{ border-collapse: collapse; } input{ width:20px; } </style> </he
利用原生的JavaScript实现简单拼图游戏

前言本篇主要讲解,如何利用原生的 JavaScript 来实现一个简单的拼图小游戏. 一.游戏的基础逻辑想用一门语言来开发游戏,必须先了解如何使用这门语言来实现一些基础逻辑,比如图像的绘制.交互的处理.定时器等. 1.图形绘制图形绘制是一切的基础,这里使用 JavaScript 在 canvas 上进行绘制.即先在 html 中创建 canvas 元素,然后在 JavaScript 中,通过 id 拿到这个元素,并且通过 canvas 拿到对应的上下文环境 context ,为后续的绘图做
基于javascript制作经典传统的拼图游戏

本文实例为大家分享了javascript制作经典传统的拼图游戏的关键代码,供大家参考,具体内容如下效果图: 拼出你喜欢的白雪公主和七个小矮人实现代码: <!DOCTYPE html> <html> <head> <title>pingtu.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
JS快速实现移动端拼图游戏

最近做的一个简陋的手机端拼图游戏,代码简单易懂,废话不多说了,让大家证明一切吧! 先看下效果图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" id="viewport" cont
基于Vue.js实现数字拼图游戏

先来看看效果图: 功能分析当然玩归玩,作为一名Vue爱好者,我们理应深入游戏内部,一探代码的实现.接下来我们就先来分析一下要完成这样的一个游戏,主要需要实现哪些功能.下面我就直接将此实例的功能点罗列在下了: 1.随机生成1~15的数字格子,每一个数字都必须出现且仅出现一次 2.点击一个数字方块后,如其上下左右有一处为空,则两者交换位置 3.格子每移动一步,我们都需要校验其是否闯关成功 4.点击重置游戏按钮后需对拼图进行重新排序以上便是本实例的主要功能点,可见游戏功能并不复杂,我们只需一个个攻
JS实现拼图游戏

使用JS制作了一款拼图游戏供大家参考. 原理分析: 1.鼠标的点击和松开事件 2.显示原图作为参考 3.方块的移动替换 4.是否完成拼图的判断 5.完成之后会弹窗提示效果演示代码展示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>拼图游戏</title> </head> <style> body, html { p
用js实现拼图小游戏

本文实例为大家分享了js实现拼图小游戏的具体代码,供大家参考,具体内容如下一.js拼图是什么? 用js做得小游戏二.使用步骤 1.先创建div盒子 <style> div,body{ margin: 0; height: 0; } #box{ width: 800px; height: 800px; background-color: burlywood; position: relative; } #box div { width: 200px; height: 200px; backg
js实现拖拽拼图游戏

本文实例为大家分享了js实现拖拽拼图游戏的具体代码,供大家参考,具体内容如下该游戏主要使用了一些拖拽事件,以及对数据传递的应用,直接上代码,感兴趣的可以参考 html:代码 <div class="box"> <div id="d1" class="d1"></div> <div id="d2" class="d1"></div> <div
JS实现九宫格拼图游戏

本文实例为大家分享了JS实现九宫格拼图游戏的具体代码,供大家参考,具体内容如下 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>九宫格拼图</title> <style> *{ padding: 0; margin: 0; border: 0; } /* *是通配符,给所有的元素去掉默认样式,因为
使用js编写实现拼图游戏

本文实例为大家分享了用js编写实现拼图游戏的具体代码,供大家参考,具体内容如下目标使用原生js编写一个拼图游戏,我这里写了两种拼图的方法.一种是拖拽拼图,一种是经典的九宫格拼图,可以自定义参数设置游戏难度先看看截图效果拖拽模式(拖拽图片切换图片) 点击模式(点击图片与空白区域切换位置) 不多说,直接上代码 css #canvasBox{ margin: 0 auto; position: fixed; border: 2px solid #
js实现简单拼图游戏

本文实例为大家分享了js实现简单拼图游戏的具体代码,供大家参考,具体内容如下 HTML仅有一个id为game的div,并且没有编写css样式,只需要在img文件夹中放置一个图片文件就行,此处我放置的是LOL皇子的图片,图片名为'lol.png' <div id="game"> </div> 以下为实现后的效果图多的不说,直接上js代码 /** * 游戏配置 */ var gameConfig = { width: 500, height:

JS实现拼图游戏

相关推荐

随机推荐