湖南湘源建设工程有限公司网站,ppt做视频的模板下载网站有哪些内容,做外贸的在哪些网站找工作,深圳网站建设html5使用JS制作了一款拼图游戏供大家参考。
原理分析#xff1a; 1.鼠标的点击和松开事件 2.显示原图作为参考 3.方块的移动替换 4.是否完成拼图的判断 5.完成之后会弹窗提示
效果演示 代码展示
!DOCTYPE html
htmlheadmeta charsetUTF-8 1.鼠标的点击和松开事件 2.显示原图作为参考 3.方块的移动替换 4.是否完成拼图的判断 5.完成之后会弹窗提示
效果演示 代码展示
!DOCTYPE html
htmlheadmeta charsetUTF-8title拼图游戏/title/headstylebody,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;}/stylebodydiv stylewidth:460px;margin:20px auto;text-align:center;line-height:30px;游戏玩法点击选中一个方块在点击放在对应的方块里。/divdiv idtufont参考原图/fontimg srctrue.png //divdiv idfangkuai/div/bodyscriptwindow.onload function() {//生成函数gameInfo.init();}/scriptscript(function($g) {//游戏配置setting {gameConfig: {url: true.png,id: fangkuai,//生成规格横4 纵4size: 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]);//图片生成divvar 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) {//赋值随机打散后的idst.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
参考上述代码赶快去试试吧。
了解更多关注我哟
