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 相关文章推荐
自动更新作用
Oct 08 Javascript
使用jquery mobile做幻灯播放效果实现步骤
Jan 04 Javascript
JS 删除字符串最后一个字符的实现代码
Feb 20 Javascript
JavaScript将数组转换成CSV格式的方法
Mar 19 Javascript
Javascript变量的作用域和作用域链详解
Apr 02 Javascript
javascript操作表格排序实例分析
May 06 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
May 07 Javascript
谈一谈jQuery核心架构设计
Mar 28 Javascript
js操作DOM--添加、删除节点的简单实例
Jul 08 Javascript
Angular4 中内置指令的基本用法
Jul 31 Javascript
基于JavaScript实现幸运抽奖页面
Jul 05 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
Sep 05 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数组函数序列之array_push() 数组尾部添加一个或多个元素(入栈),返回新长度。
2011/11/07 PHP
PHP常见字符串操作函数与用法总结
2019/03/04 PHP
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
2009/04/07 Javascript
JavaScript数组Array对象增加和删除元素方法总结
2015/01/20 Javascript
js实现简单div拖拽功能实例
2015/05/12 Javascript
js代码实现无缝滚动(文字和图片)
2015/08/20 Javascript
深入理解MVC中的时间js格式化
2016/05/19 Javascript
如何获取元素的最终background-color
2017/02/06 Javascript
Vue shopCart 组件开发详解
2018/01/26 Javascript
JavaScript实现获取select下拉框中第一个值的方法
2018/02/06 Javascript
JS实现判断数组是否包含某个元素示例
2019/05/24 Javascript
如何在Vue.JS中使用图标组件
2020/08/04 Javascript
VUE Elemen-ui之穿梭框使用方法详解
2021/01/19 Javascript
Python3基础之list列表实例解析
2014/08/13 Python
Python爬虫之pandas基本安装与使用方法示例
2018/08/08 Python
Appium+Python自动化测试之运行App程序示例
2019/01/23 Python
django框架自定义模板标签(template tag)操作示例
2019/06/24 Python
python opencv实现证件照换底功能
2019/08/19 Python
Python爬虫过程解析之多线程获取小米应用商店数据
2020/11/14 Python
大学生演讲稿范文
2014/01/11 职场文书
新春寄语大全
2014/04/09 职场文书
优秀学生干部先进事迹材料
2014/05/26 职场文书
社区维稳工作方案
2014/06/06 职场文书
大学生心理活动总结
2014/07/04 职场文书
教师党的群众路线学习心得体会
2014/11/04 职场文书
2014社区健康教育工作总结
2014/12/16 职场文书
预备党员转正材料
2014/12/19 职场文书
写给父母的感谢信
2015/01/22 职场文书
感谢信范文大全
2015/01/23 职场文书
2014年度个人总结范文
2015/03/09 职场文书
幼儿园教研工作总结2015
2015/05/12 职场文书
物业保洁员管理制度
2015/08/05 职场文书
《月球之谜》教学反思
2016/02/20 职场文书
JVM钩子函数的使用场景详解
2021/08/23 Java/Android
Python内置数据类型中的集合详解
2022/03/18 Python
深入理解MySQL中MVCC与BufferPool缓存机制
2022/05/25 MySQL