JS实现拼图游戏


Posted in Javascript onJanuary 29, 2021

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

原理分析:

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

效果演示

JS实现拼图游戏

代码展示

<!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游戏的精彩文章,请查看专题:《JavaScript经典游戏 玩不停》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js文件中调用js的实现方法小结
Oct 23 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
May 23 Javascript
JavaScript操纵窗口的方法小结
Jun 28 Javascript
二叉树先序遍历的非递归算法具体实现
Jan 09 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
Jun 09 Javascript
jQuery分组选择器用法实例
Dec 23 Javascript
JS中完美兼容各大浏览器的scrolltop方法
Apr 17 Javascript
JavaScript数据结构与算法之集合(Set)
Jan 29 Javascript
AngularJS入门教程之路由与多视图详解
Aug 19 Javascript
JQuery和HTML5 Canvas实现弹幕效果
Jan 04 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
Mar 09 Javascript
vue监听dom大小改变案例
Jul 29 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
Dec 09 #Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
Dec 09 #Javascript
element-ui如何防止重复提交的方法步骤
Dec 09 #Javascript
js刷新页面location.reload()用法详解
Dec 09 #Javascript
vue 实现websocket发送消息并实时接收消息
Dec 09 #Javascript
Vue extend的基本用法(实例详解)
Dec 09 #Javascript
vue基于v-charts封装双向条形图的实现代码
Dec 09 #Javascript
You might like
php画图实例
2014/11/05 PHP
支付宝支付开发――当面付条码支付和扫码支付实例
2016/11/04 PHP
在laravel中使用Symfony的Crawler组件分析HTML
2017/06/19 PHP
Laravel 5使用Laravel Excel实现Excel/CSV文件导入导出的功能详解
2017/10/11 PHP
PHP实现数据库的增删查改功能及完整代码
2018/04/18 PHP
PHP PDOStatement::execute讲解
2019/01/31 PHP
3款实用的在线JS代码工具(国外)
2012/03/15 Javascript
页面使用密码保护代码
2013/04/10 Javascript
对称加密与非对称加密优缺点详解
2017/02/06 Javascript
React Native 使用Fetch发送网络请求的示例代码
2017/12/02 Javascript
web前端页面生成exe可执行文件的方法
2018/02/08 Javascript
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
使用RxJS更优雅地进行定时请求详析
2019/06/02 Javascript
深入了解Hybrid App技术的相关知识
2019/07/17 Javascript
JavaScript编写开发动态时钟
2020/07/29 Javascript
详解React的回调渲染模式
2020/09/10 Javascript
[48:46]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第二场 11.19
2020/11/19 DOTA
从零学python系列之浅谈pickle模块封装和拆封数据对象的方法
2014/05/23 Python
跟老齐学Python之有点简约的元组
2014/09/24 Python
python使用post提交数据到远程url的方法
2015/04/29 Python
简单介绍Python中的round()方法
2015/05/15 Python
Django原生sql也能使用Paginator分页的示例代码
2017/11/15 Python
Python聊天室程序(基础版)
2018/04/01 Python
python opencv3实现人脸识别(windows)
2018/05/25 Python
对python遍历文件夹中的所有jpg文件的实例详解
2018/12/08 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
Python requests.post方法中data与json参数区别详解
2020/04/30 Python
薇诺娜官方网上商城:专注敏感肌肤
2017/05/25 全球购物
美国在线自行车商店:Jenson USA
2018/05/22 全球购物
PHP面试题及答案二
2015/05/23 面试题
采购部岗位职责
2013/11/24 职场文书
小学教师岗位职责
2013/11/25 职场文书
企业厂务公开实施方案
2014/03/26 职场文书
平面设计师岗位职责
2014/09/18 职场文书
民间借贷纠纷起诉书
2015/08/03 职场文书
2016年社区服务活动总结
2016/04/06 职场文书