jquery实现任意数量拼图游戏代码
代码语言:html
所属分类:游戏
代码描述:jquery实现任意数量拼图游戏代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background:#eaeaea; color: #444; font-size:100%; font-family: Helvetica, Tahoma, Arial,"Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", SimSun, "宋体", Heiti, "黑体", sans-serif; } #puzzle { position:absolute; left:50%; top:50%; margin:-250px 0 0 -250px;min-width:500px; min-height:500px; _width:auto; _width:500px; _height:auto; _height:500px; border:5px solid #666; background:#fff; -webkit-user-select:none;} .item { position:absolute; top:0; left:0; border:1px solid #aaa; overflow:hidden;} .item.selected { opacity:1;} .item.selected .mask { background:rgba(155,202,121,0.6); border-radius:50%; } @media \0screen\,screen\9 { .item.selected .mask {filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#999bca79', endColorstr='#999bca79');} } .item img { width:500px;} .mask { width:100%; height:100%; position:absolute; left:0; top:0; background:rgba(155,202,121,0); -webkit-transition:all 1s ease;-moz-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease;} .levelList { width:300px; height:360px; position:absolute; top:50%; left:50%; margin:-180px 0 0 -150px; } .levelList li { width:100%; height:40px; margin-bottom:40px; background:#6699cc; font-size:18px; line-height:40px; text-align:center; color:#fff; ; border-radius:10px;} li.opt { cursor:pointer} li.opt:hover { background:#9bca79; } .span { display: block; width: 40px; height: 40px; position: absolute; font-size: 30px; left: 50%; margin-left: -20px; bottom: -20px; color: #6699cc;} #form { width:100%; height:30px; position:absolute; top:50%; margin-top:-300px; text-align:center;} #file, #cue, #test { width:200px; height:30px; font-size:16px; line-height:30px; text-indent:5px; border:1px solid #6699cc; color:#9bca79; } #btn, #try { width:100px; height:30px; margin-left:10px; text-align:center; background:#6699cc; border:0; cursor:pointer; color:#fff; font-weight:bold; outline:none; } #cue { position:absolute; top:0px; left:50%; margin-left:-153px; text-align:left; border:0;} #noZuoNoDie { position:absolute; left:5%; top:50%; margin-top:-250px; width:360px; } .tips { color:#999; margin-top:10px; line-height:28px;} .tips strong { color:#f00;} #copyRight { position:fixed; bottom:1%; right:1%;} </style> </head> <body > <div id="puzzle"></div> <div id="noZuoNoDie"> <input id="test" type="text" value="在这里输入数字"><input id="try" type="button" value="点击测试"> <p class="tips">说明:此测试旨在探索浏览器的处理能力。IE、Firefox、Chrome、Safari等浏览器,在处理DOM与计算小数的能力上各不相同。当DOM元素数量多到一定程度时,动画效果将消失。而对小数计算精度不足,图片之间将可能产生缝隙。</p> <p class="tips">例子:输入数字10,点击测试,拼图格子数量将变成10*10,以此类推。</p> <p class="tips"><strong>警示</strong>:输入数字过大,有可能超出您的浏览器的处理能力,导致浏览器崩溃,甚至电脑死机;请确定当前您的浏览器或电脑内没有需要保存的数据!</p> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.2.11.js"></script> <script > //作者:Lucifier //微博:http://weibo.com/islucifier $(function() { var puzzle = { area: $('#puzzle'), //初始化 init: function() { this.drawIndex().getLevel().createInput().toDie(); }, //提供换图控件 createInput: function() { var that = this, form = $('<form></form>'), file = $('<input>').attr('type', 'text'), btn = $('<input>').attr({ type: 'button', value: '更换图片'}), cue = $('<div>请将图片网址粘贴在<span>这里</span></div>'); form.append(cue, file, btn).appendTo(document.body)[0].id = 'form'; file[0].id = 'file'; btn.on('click', function() { var i, src = file.val(), srcArray = that.state.src, len = srcArray.length; if (src.length === 0) { alert('请输入网址!'); return; } else if (srcArray[0] === src) { that.play(); return; } for (i= 0; i < len; i += 1) { if (srcArray[i] === src) { srcArray.unshift(srcArray.splice(i, 1)[0]); that.play(); return; } } srcArray .unshift(src); that.play(); })[0].id = 'btn'; cue.one('click', function() { $(this).animate({top: '-35px'}, 'fast', function() { file.focus(); }).find('span').html('下面'); })[0].id = 'cue'; return this; }, //开始游戏 play: function() { var that = this, levelList = this.area.find('.levelList'); if( levelList.css('marginLeft') === '300px') { start(); return; } levelList.animate({marginLeft: '300px'}, function() { levelList.animate({width: '100px'}, function() { $('<li>恢复顺序</li>').addClass('opt').appendTo(levelList).on('click', function() { that.recover(); }).parent().css('height', '445px').animate({marginTop: '-=35px'}); start(); }); }); function start() { var item = that.area.find('.item'); if (item.size()) { item.remove(); } that.draw().mix().area.off('click').on('click', '.item', function() { that.addEvent($(this)); }); } }, //状态管理 state: { level:3, minLevel: 3, maxLevel:21, position: [], src: ['//repo.bfw.wiki/bfwrepo/image/649d3ce22371b.png'], defaultImg: '//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png' }, //绘制拼图界面 draw: function() { var that = this, layout = that.getLayout(), len = layout.length, frag = document.createDocumentFragment(), i; for (i = 0; i < len; i += 1) { frag.appendChild(that.createCell(layout[i])); } that.area[0].appendChild(frag); return this; }, //绘制起始界面 drawIndex: function() { var ul = $('<ul></ul>'), span = $('<span>◆&l.........完整代码请登录后点击上方下载按钮下载查看
网友评论0