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 相关文章推荐
javascript知识点收藏
Feb 22 Javascript
JavaScript 输入框内容格式验证代码
Feb 11 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
Apr 26 Javascript
javascript跑马灯抽奖实例讲解
Apr 17 Javascript
jquery设置css样式的多种方法(总结)
Feb 21 Javascript
微信小程序 同步请求授权的详解
Aug 04 Javascript
JavaScript代码调试方法实例小结
Jan 05 Javascript
小程序实现短信登录倒计时
Jul 12 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
Nov 01 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
Nov 05 Javascript
Servlet返回的数据js解析2种方法
Dec 12 Javascript
vue实现公共方法抽离
Jul 31 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
用mysql内存表来代替php session的类
2009/02/01 PHP
thinkphp的静态缓存用法分析
2014/11/29 PHP
PHP中is_file()函数使用指南
2015/05/08 PHP
帝国CMS留言板回复后发送EMAIL通知客户
2015/07/06 PHP
Yii2.0表关联查询实例分析
2016/07/18 PHP
PHP让网站移动访问更加友好方法
2019/02/14 PHP
php7 错误处理机制修改实例分析
2020/05/25 PHP
js实现图片轮换效果代码
2013/04/16 Javascript
js判断为空Null与字符串为空简写方法
2014/02/24 Javascript
实用框架(iframe)操作代码
2014/10/23 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
2014/12/22 Javascript
干货分享:让你分分钟学会javascript闭包
2015/12/25 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
2016/01/05 Javascript
Javascript数组Array方法解读
2016/03/13 Javascript
JS定义类的六种方式详解
2016/05/12 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
2016/06/10 Javascript
js 点击a标签 获取a的自定义属性方法
2016/11/21 Javascript
vue中路由验证和相应拦截的使用详解
2017/12/13 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
2019/01/06 Javascript
Node.js实现一个HTTP服务器的方法示例
2019/05/13 Javascript
js计算最大公约数和最小公倍数代码实例
2019/09/11 Javascript
vue2.x数组劫持原理的实现
2020/04/19 Javascript
js实现简单的点名器随机色实例代码
2020/09/20 Javascript
[43:47]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第一场 12.09
2020/12/11 DOTA
如何通过python的fabric包完成代码上传部署
2019/07/29 Python
Python实现TCP通信的示例代码
2019/09/09 Python
Python3 xml.etree.ElementTree支持的XPath语法详解
2020/03/06 Python
pandas创建DataFrame的7种方法小结
2020/06/14 Python
简单几步用纯CSS3实现3D翻转效果
2019/01/17 HTML / CSS
德国孕妇装和婴童服装网上商店:bellybutton
2018/04/12 全球购物
JBL美国官方商店:扬声器、耳机等
2019/12/01 全球购物
广州御银科技股份有限公司试卷(C++)
2016/11/04 面试题
介绍一下linux文件系统分配策略
2012/11/17 面试题
会计专业推荐信
2013/10/29 职场文书
教师岗位聘任书范文
2014/03/29 职场文书
「偶像大师 MILLION LIVE!」七尾百合子手办开订
2022/03/21 日漫