帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» JS拖拽拼图小游戏(原创)
JS拖拽拼图小游戏(原创)
浏览:2462次
-
评论:1次
-
发布时间:2018-01-05
Html
Css
Js
开始游戏
重置游戏
body { background-color:rgb(247,238,217); } /*div#img img { width:500px; height:500px; } */ div#GameButton { width:120px; margin:0 auto; } .img0 { background-repeat:no-repeat; background-position:0px 0px; } .img1 { background-repeat:no-repeat; background-position:-168px 0px; } .img2 { background-repeat:no-repeat; background-position:-336px 0px; } .img3 { background-repeat:no-repeat; background-position:0px -168px; } .img4 { background-repeat:no-repeat; background-position:-168px -168px; } .img5 { background-repeat:no-repeat; background-position:-336px -168px; } .img6 { background-repeat:no-repeat; background-position:0px -336px; } .img7 { background-repeat:no-repeat; background-position:-168px -336px; } .img8 { background-repeat:no-repeat; background-position:-336px -336px; } td { width:168px; height:168px; background-size:504px 504px; }
//参数设置 //拼图成功后的提示。 var successFunction = function() { alert("成功"); }; //背景图 var backgroundImge = ""; //被拼图 var mainImge = "http://www.sucainiu.com/upload/userImages/712/20180105/41171_20180105085731.jpg"; //设置结束 var td = []; td = document.getElementsByTagName('td'); var Margin = parseInt(document.getElementById('img').currentStyle ? parseInt(screen.availWidth) * 0.31 : window.getComputedStyle(document.getElementById("img"), null)['marginLeft']); //alert(Margin); var i; var used = []; var clock; var flashClock; var flashClock2; var stop = 0; var makeTD = { leftTop: 0, rightButton: 0 }; var makeTable = []; function get_Random(maxNum) { return Math.floor(Math.random() * maxNum); } function getCss(elementObj, key) { return elementObj.currentStyle ? elementObj.currentStyle[key] : window.getComputedStyle(elementObj, false)[key]; } function contains(arr, obj) { var i = arr.length; while (i--) { if (arr[i] === obj) { return true; } } return false; } function flashBack() { var bodyDom = document.getElementsByTagName('body')[0]; bodyDom.style.backgroundImage = "url(img/fashBg.jpg)"; } function flash2() { document.getElementsByTagName("body")[0].style.backgroundImage = "url(img/flash2.jpg)" } function flash() { var bodyDom = document.getElementsByTagName('body')[0]; bodyDom.style.backgroundImage = "url(img/flash1.jpg)"; } function getOverlay(_hover) { var _Hover = new Object(); _Hover.middleX = parseInt(getCss(_hover, 'left')) + parseInt(getCss(_hover, 'width')) / 2; _Hover.middleY = parseInt(getCss(_hover, 'top')) + parseInt(getCss(_hover, 'height')) / 2; for (i = 0; i < makeTable.length; i++) { if ((makeTable[i].left < _Hover.middleX && _Hover.middleX < makeTable[i].right) && (makeTable[i].top < _Hover.middleY && _Hover.middleY < makeTable[i].bottom)) { return i; } } } function isWin() { for (i = 0, td = document.getElementsByTagName('td'); i < td.length; i++) { if (td[i].getAttribute('id') != td[i].className.slice(3)) { return false; } } return true; } function initTable(_col, _row) { //添加图片 document.getElementsByTagName("body")[0].style.backgroundImage = "url(" + backgroundImge + ")"; for (i = 0; i < td.length; i++) { td[i].style.backgroundImage = "url(" + mainImge + ")"; } // _col = _col ? _col : 3; _row = _row ? _row : 3; var table_cellSpacing = parseInt(document.getElementsByTagName('table')[0].getAttribute('cellspacing')); //实现自定义数量,需要增加创建td,和*class数组 for (i = 0, td = document.getElementsByTagName('td'); i < td.length; i++) { td[i].setAttribute('class', 'img' + i); td[i].setAttribute('id', i); td[i].style.height = "168px"; td[i].style.width = "168px"; td[i].style.position = "absolute"; td[i].style.left = i % _row * (168 + table_cellSpacing) + (parseInt(i % _row / _row) + 1) * Margin + "px"; td[i].style.top = parseInt(i / _col) * (168 + table_cellSpacing) + "px"; //确定td位置 makeTable[i] = new Object(); makeTable[i].left = parseInt(td[i].style.left); makeTable[i].top = parseInt(td[i].style.top); makeTable[i].right = parseInt(td[i].style.left) + parseInt(td[i].style.width); makeTable[i].bottom = parseInt(td[i].style.top) + parseInt(td[i].style.height); makeTable[i].middleX = (makeTable[i].left + makeTable[i].right) / 2; makeTable[i].middleY = (makeTable[i].top + makeTable[i].bottom) / 2; } } function random_disorder() { initTable(); used = []; for (i = 0, td = document.getElementsByTagName('td'); i < td.length; i++) { //打乱拼图块:设置td class(包含背景图定位),id为当前td位置,class,trueid为实际位置 var class_id; do { class_id = get_Random(9); if (used.length == 9) break; } while (contains(used, class_id)); td[i].setAttribute('class', 'img' + class_id); td[i].setAttribute('trueId', class_id); used[i] = class_id; } if (stop >= 12) { clearInterval(clock); stop = 0; } else stop++; } function drag(obj, mouseX, mouseY, successAction) { obj.style.zIndex = "2"; obj.style.zIndex = "2"; var templateObj = { left: getCss(obj, 'left'), top: getCss(obj, 'top'), currentX: mouseX, currentY: mouseY, flag: true }; document.onmousemove = function(event) { var e = event ? event : window.event; if (templateObj.flag) { var nowX = e.clientX, nowY = e.clientY; var disX = nowX - templateObj.currentX, disY = nowY - templateObj.currentY; obj.style.left = parseInt(templateObj.left) + disX + "px"; obj.style.top = parseInt(templateObj.top) + disY + "px"; if (event.preventDefault) { event.preventDefault(); } return false; } if (typeof callback == "function") { callback(parseInt(templateObj.left) + disX, parseInt(templateObj.top) + disY); } } for (i = 0; i < td.length; i++) { td[i].onmouseup = function() { obj.style.zindex = "0"; obj.style.zIndex = "0"; templateObj.flag = false; var oLI = getOverlay(obj); var OverLay = makeTable[oLI]; if (getCss(obj, "left") !== "auto") { //表格定位 obj.style.left = makeTable[obj.id].left + "px"; //图片定位(交换class) var oldClass = obj.getAttribute('class'); //alert(oLI); obj.setAttribute('class', document.getElementById(oLI.toString()).getAttribute('class')); document.getElementById(oLI).setAttribute('class', oldClass); } if (getCss(obj, "top") !== "auto") { //表格定位 obj.style.top = makeTable[obj.id].top + "px"; } //addTitle(); if (isWin()) { successAction(); } }; } } //重置游戏 document.getElementById('restartGame').addEventListener('click', function() { // location.reload(true); }); //开始游戏 document.getElementById('startGame').addEventListener('click', function() { //随机分割图片 clock = setInterval("random_disorder()", 40); //监听td部分鼠标拖动 for (i = 0; i < td.length; i++) { td[i].addEventListener('mousedown', function() { //拖拽 drag(event.target, event.clientX, event.clientY, successFunction); }); } }); initTable();
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.2.3
<!doctype html><html><head><meta charset="utf-8"><title>JS拖拽拼图小游戏(原创)-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.2.3/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:可方便修改被拼图、背景图,用纯js现实拼图游戏。
在js文件头部,可设置包括成功提示函数等自定义内容。
代码中有详细注释,方便大家修改。
点击获取手机验证码效果
alert弹框效果
讨论这个常用代码(1)
回答他人问题或分享心得会奖励牛币
Lv10 CTO
华***n
2018年01月06日
哇咔咔 感谢分享
回复
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
2462
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值