js实现拼图小游戏
代码语言：html
所属分类：游戏
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BFW NEW PAGE</title>
<style>
*{margin:0;padding:0;list-style:none;outline:0}html,body{height:100%;height:100%}.wrap{padding:120px 0}.btnBbox{margin:0 auto;width:600px;text-align:center}.btnBbox .selectbox{display:inline-block;vertical-align:top}.btnBbox .selectbox{display:inline-block;position:relative;width:120px}.btnBbox .selectbox .text{width:100%;height:40px;text-align:center;border:0;background:#ececec;border-radius:5px;display:block;line-height:40px;color:#3f3f3f;cursor:pointer;font-size:16px;transition:all ease .2s}.btnBbox .selectbox .text:hover{background:#e4e4e4}.btnBbox .selectbox .box{position:absolute;width:100%;padding:5px 0;background:#ececec;color:#666;border-radius:5px;z-index:10000;margin-top:5px;display:none;font-size:14px}.btnBbox .selectbox .box li{width:100%;height:30px;text-align:center;line-height:30px;transition:all ease .2s;cursor:pointer}.btnBbox .selectbox .box li:hover{background:#1abb85;color:#fff}.btnBbox .selectbox.active .text{background:#1abb85;color:#fff}.btnBbox .btn{width:120px;border:0;background:#3386e6;color:#fff;border-radius:5px;height:40px;cursor:pointer;font-size:16px;margin-right:10px}.btnBbox .btn:hover{background:#388cec}.picBox{text-align:center;margin-top:30px}.picBox .list{display:inline-block;width:600px;height:600px;position:relative}.picBox .list li{position:absolute;overflow:hidden;border-radius:0;background-image:url(http://repo.bfw.wiki/bfwrepo/image/afe.jpg);box-shadow:0 0 6px rgba(255,255,255,.6);cursor:pointer;overflow:hidden}
</style>
</head>
<body>
<div class="wrap">
<div class="btnBbox">
<button class="btn" type="button">开始</button>
<div class="selectbox">
<button class="text">简单</button>
<ul class="box">
<li>简单</li>
<li>入门</li>
<li>中等难度</li>
<li>高难</li>
<li>外星人</li>
</ul>
</div>
</div>
<div class="picBox">
<ul class="list"></ul>
</div>
</div>
<script src="http://repo.bfw.wiki/bfwrepo/js/jquery.17.js"></script>
<script>
var list=$('.picBox .list');var listW=list.width();var listH=list.height();var imgW=listW/3;var imgH=listH/3;var origArr=[];var randArr=[];var key=true;var imgCell;var num=3;var seleBox=$('.selectbox');var seleLi=seleBox.find('li');var seleBtn=seleBox.find('.text');init()
function init(){render(num)
gameState()
select()}
function render(n){list.html('')
imgW=listW/n;imgH=listH/n;origArr=[];for(var i=0;i<n;i++){for(var j=0;j<n;j++){origArr.push(i*n+j);var li=$('<li>')
li.css({left:j*imgW+'px',top:i*imgH+'px',backgroundPosition:-j*imgW+'px '+-i*imgH+'px',width:imgW+'px',height:imgH+'px'})
list.append(li)
imgCell=list.find('li')}}}
function select(){seleBtn.on('click',function(){$(this).siblings('.box').slideToggle()
seleBox.toggleClass('active');})
seleLi.on('click',function(){var index=$(thi.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0