首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jquery实现的美女拼图游戏实例

Posted in Javascript onMay 04, 2015

本文实例讲述了jquery实现的美女拼图游戏。分享给大家供大家参考。具体如下：

这里可以自由打乱拼图次序，3*3，4*4等多种组合来进行格数拼图

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery-puzzle by 4074</title>
<style>
html{
 height:100%;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,button,textarea,p,blockquote,th,td{
 padding:0;
 margin:0;
}
body{
 font-family: "Helvetica Neue", "Hiragino Sans GB", "Segoe UI", "Microsoft Yahei", "微软雅黑", Tahoma, Arial, STHeiti, sans-serif;
 font-size:12px;
 background:#fff;
 color:#333;
}
a{
 outline:none;
 -moz-outline:none;
 text-decoration:none;
}
.clearfix{
 zoom:1;
 _height:1px;
}
.clearfix:after{
 content:".";
 display:block;
 height:0;
 clear:both;
 visibility:hidden;
}
.head{
 height:50px;
 line-height:50px;
 padding-left:20px;
 border-bottom:1px solid #eee;
 box-shadow: 1px 1px 5px #ccc;
}
.head h1{
 float:left;
 width:320px;
 font-weight:normal;
 font-size:22px;
}
.head span{
 display:block;
 float:right;
 font-size:12px;
 color:#999;
 line-height:14px;
 margin:30px 10px 0 0;
}
.wrap{
 width:1000px;
 margin:80px auto;
}
.play_wrap{
 width:300px;
 float:left;
 padding:20px;
 margin-left:200px;
}
#play_area{
 position:relative;
 width:300px;
 height:300px;
 margin:auto;
 background:#fefefe;
 border-radius:2px;
 color: black;
 box-shadow: 0px 0px 8px #09F;
 border:1px solid #fff;
 *border:1px solid #e5e5e5;
 cursor:default;
}
#play_area .play_cell{
 width:48px;
 height:48px;
 border:1px solid #fff;
 border-radius:4px;
 position:absolute;
 background-position: 5px 5px;
 cursor: default;
 z-index:80;
 box-shadow:0px 0px 8px #fff;
 transition-property:background-position;
 transition-duration:300ms;
 transition-timing-function:ease-in-out;
}
#play_area .play_cell.hover{
 filter: alpha(opacity=80);
 opacity:.8;
 box-shadow: 0px 0px 8px #000;
 z-index:90;
 *border:1px solid #09F;
}
.play_menu{
 float:left;
 margin-left:60px;
 font-size:14px;
 padding-top:20px;
}
.play_menu p{
 line-height:200%;
 clear:both;
}
.play_menu a.play_btn{
 display:block;
 margin-bottom:20px;
 width:80px;
 height:28px;
 line-height:28px;
 text-align:center;
 text-decoration:none;
 color:#333;
 background:#fefefe;
 border:1px solid #eee;
 border-radius: 2px;
 box-shadow: 1px 1px 2px #eee;
 border-color: #ddd #d2d2d2 #d2d2d2 #ddd;
 outline:none;
 -moz-outline:none;
}
.play_menu a.play_btn:hover{
 background-color: #fcfcfc;
 border-color: #ccc;
 box-shadow: inset 0 -2px 6px #eee;
}
.play_menu a#play_btn_level{
 position:relative;
 margin-bottom:30px;
}
.level_text{
 margin-left:-10px;
}
.level_icon{
 display:block;
 position:absolute;
 top:12px;
 right:16px;
 width:0;
 height:0;
 overflow:hidden;
 border:5px solid #FFF;
 border-color:#999 transparent transparent transparent;
}
.level_menu{
 position:absolute;
 margin:-30px 0 0px 1px;
 display:none;
}
.level_menu ul{
 list-style:none;
}
.level_menu li{
 float:left;
}
.level_menu li a{
 display:block;
 padding:3px 10px;
 border:1px solid #e8e8e8;
 margin-left:-1px;
 color:#09c;
}
.level_menu li a:hover{
 background:#09c;
 color:#fefefe;
}
#info{
 font-size:16px;
 margin:30px 0 0 0;
}
#info a{
 color:#09F;
}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
var puzzleGame = function(options){
 this.img = options.img || "";
 this.e_playArea = $("#play_area");
 this.e_startBtn = $("#play_btn_start");
 this.e_playScore = $("#play_score");
 this.e_playCount = $("#play_count");
 this.e_levelBtn = $("#play_btn_level");
 this.e_levelMenu = $("#play_menu_level");
 this.areaWidth = parseInt(this.e_playArea.css("width"));
 this.areaHeight = parseInt(this.e_playArea.css("height"));
 this.offX = this.e_playArea.offset().left;
 this.offY = this.e_playArea.offset().top;
 this.levelArr = [[3,3],[4,4],[6,6]];
 this.level = 1;
 this.scoreArr = [100,200,400];
 this.score = 0;
 this.playCount = 0;
 this.cellRow = this.levelArr[this.level][0];
 this.cellCol = this.levelArr[this.level][1];
 this.cellWidth = this.areaWidth/this.cellCol;
 this.cellHeight = this.areaHeight/this.cellRow;
 this.imgArr = [];
 this.ranArr = [];
 this.cellArr = [];
 this.easing = 'swing';
 this.time = 400;
 this.thisLeft = 0;
 this.thisTop = 0;
 this.nextIndex;
 this.thisIndex;
 this.cb_cellDown = $.Callbacks();
 this.isInit = false;
 this.isBind = false;
 this.start();
};
puzzleGame.prototype = {
 start:function(){
 this.init();
 this.menu();
 },
 set: function(options){
 this.level = options.level === 0 ? 0 : (options.level || 1);
 },
 menu:function(){
 var self = this;
 this.e_startBtn.click(function(){
 self.e_levelMenu.hide();
 self.play();
 });
 this.e_levelBtn.click(function(){
 if(self.playing) return;
 self.e_levelMenu.toggle();
 });
 this.e_levelMenu.find("a").click(function(){
 self.e_levelMenu.hide();
 self.e_levelBtn.find(".level_text").html($(this).html())
 if(parseInt($(this).attr("level")) !== self.level){
 self.set({
  "level": $(this).attr("level")
 });
 self.isInit = true;
 self.isBind = false;
 }
 })
 },
 play:function(){
 if(this.isInit){
 this.isInit = false;
 this.cellRow = this.levelArr[this.level][0];
 this.cellCol = this.levelArr[this.level][1];
 this.cellWidth = this.areaWidth/this.cellCol;
 this.cellHeight = this.areaHeight/this.cellRow;
 this.init();
 }
 this.e_playCount.html(this.playCount = 0);
 this.randomImg();
 if(!this.isBind)this.bindCell();
 },
 init:function(){
 var _cell;
 this.cellArr = [];
 this.imgArr = [];
 this.e_playArea.html("");
 for(var i = 0; i<this.cellRow; i++){
 for(var j = 0; j<this.cellCol; j++){
 this.imgArr.push(i*this.cellCol + j);
 _cell = document.createElement("div");
 _cell.className = "play_cell";
 $(_cell).css({
  "width": this.cellWidth-2,
  "height": this.cellHeight-2,
  "left": j * this.cellWidth,
  "top": i * this.cellHeight,
  "background": "url(" + this.img + ")",
  "backgroundPosition": (-j) * this.cellWidth + "px " + (-i) * this.cellHeight + "px"
 });
 this.cellArr.push($(_cell));
 this.e_playArea.append(_cell);
 }
 }
 },
 randomImg:function(){
 var ran,arr;
 arr = this.imgArr.slice();
 this.ranArr = [];
 for(var i = 0, ilen = arr.length; i < ilen; i++){
 ran = Math.floor(Math.random() * arr.length);
 this.ranArr.push(arr[ran]);
 this.cellArr[i].css({
 "backgroundPosition": (-arr[ran]%this.cellCol) * this.cellWidth + "px " + (-Math.floor(arr[ran]/this.cellCol)) * this.cellHeight + "px"
 })
 arr.splice(ran,1);
 }
 $("#p").html(this.ranArr.join())
 },
 bindCell:function(){
 var self = this;
 this.isBind = true;
 this.cb_cellDown.add(self.cellDown);
 for(var i = 0, len = this.cellArr.length; i<len; i++){
 this.cellArr[i].on({
 "mouseover": function(){
  $(this).addClass("hover");
 },
 "mouseout": function(){
  $(this).removeClass("hover");
 },
 "mousedown": function(e){
  self.cb_cellDown.fire(e, $(this), self);
  return false;
 }
 });
 }
 },
 cellDown:function(e,_cell,self){
 var //self = this,
 _x = e.pageX - _cell.offset().left,
 _y = e.pageY - _cell.offset().top;
 self.thisLeft = _cell.css("left");
 self.thisTop = _cell.css("top");
 self.thisIndex = Math.floor(parseInt(self.thisTop)/self.cellHeight)*self.cellCol;
 self.thisIndex += Math.floor(parseInt(self.thisLeft)/self.cellWidth);
 _cell.css("zIndex",99);
 $(document).on({
 "mousemove": function(e){
  _cell.css({
  "left": e.pageX - self.offX - _x,
  "top": e.pageY - self.offY - _y
  })
 },
 "mouseup": function(e){
  $(document).off("mouseup");
  $(document).off("mousemove");
  self.cb_cellDown.empty();
  if( e.pageX - self.offX < 0 || e.pageX - self.offX > self.areaWidth || e.pageY - self.offY < 0 || e.pageY - self.offY > self.areaHeight ){
  self.returnCell();
  return;
  }
  var _tx, _ty, _ti, _tj;
  _tx = e.pageX - self.offX;
  _ty = e.pageY - self.offY;
  _ti = Math.floor( _ty / self.cellHeight );
  _tj = Math.floor( _tx / self.cellWidth );
  self.nextIndex = _ti*self.cellCol + _tj;
  if(self.nextIndex == self.thisIndex){
  self.returnCell();
  }else{
  self.changeCell();
  }
 }
 })
 },
 changeCell:function(){
 var self = this,
 _tc = this.cellArr[this.thisIndex],
 _tl = this.thisLeft,
 _tt = this.thisTop,
 _nc = this.cellArr[this.nextIndex],
 _nl = (this.nextIndex % this.cellCol) * this.cellWidth,
 _nt = Math.floor(this.nextIndex / this.cellCol) * this.cellHeight;
 _nc.css("zIndex",98);
 this.cellArr[this.nextIndex] = _tc;
 this.cellArr[this.thisIndex] = _nc;
 this.ranArr[this.nextIndex] = this.ranArr[this.nextIndex] + this.ranArr[this.thisIndex];
 this.ranArr[this.thisIndex] = this.ranArr[this.nextIndex] - this.ranArr[this.thisIndex];
 this.ranArr[this.nextIndex] = this.ranArr[this.nextIndex] - this.ranArr[this.thisIndex];
 _tc.animate({
 "left": _nl,
 "top": _nt
 },self.time,self.easing,function(){
 _tc.removeClass("hover");
 _tc.css("zIndex","");
 })
 _nc.animate({
 "left": _tl,
 "top": _tt
 },self.time,self.easing,function(){
 _nc.removeClass("hover");
 _nc.css("zIndex","");
 self.check();
 if(!self.cb_cellDown.has(self.cellDown)) self.cb_cellDown.add(self.cellDown);
 })
 },
 returnCell:function(){
 var self = this;
 this.cellArr[this.thisIndex].animate({
 "left": self.thisLeft,
 "top": self.thisTop
 },self.time,self.easing,function(){
 $(this).removeClass("hover");
 $(this).css("zIndex","");
 if(!self.cb_cellDown.has(self.cellDown)) self.cb_cellDown.add(self.cellDown);
 });
 },
 check:function(){
 this.e_playCount.html( ++ this.playCount);
 if(this.ranArr.join() == this.imgArr.join()){
 this.success();
 }
 },
 success:function(){
 alert("ok");
 this.score += this.scoreArr[this.level]
 this.e_playScore.html(this.score);
 }
}
$(document).ready(function(e) {
 var pg = new puzzleGame({
 img: "images/120908-1347075337_M.jpg"
 });
});
</script>
</head>
<body>
<div class="wrap">
 <div class="play_wrap">
 <div id="play_area"></div>
 </div>
 <div class="play_menu">
   <a id="play_btn_start" class="play_btn" href="javascript:void(0);" unselectable="on">开始</a>
   <a id="play_btn_level" class="play_btn" href="javascript:void(0);" unselectable="on">
    <span class="level_text">4 x 4</span>
    <span class="level_icon"></span>
   </a>
    <div class="level_menu" id="play_menu_level">
     <ul>
      <li>
       <a href="javascript:void(0);" level=0 >3 x 3</a>
      </li>
      <li>
       <a href="javascript:void(0);" level=1 >4 x 4</a>
      </li>
      <li>
       <a href="javascript:void(0);" level=2 >6 x 6</a>
      </li>
     </ul>
    </div>
   <p>完成：<span id="play_score">0</span></p>
   <p>交换：<span id="play_count">0</span></p>
   <p>说明：<br>
   -点击开始，小图片将随机打乱；<br>
   -拖动小图片可交换位置，顺序完全正确则为成功；<br>
   -难度分“3x3”、“4x4”、“6x6”三级；<br>
   -对应的分值为100、200、400；
   </p>
  </div>
</div>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

jquery实现的美女拼图游戏实例

- Author -

shichen2014

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
IE8 原生JSON支持
Apr 13 Javascript
JS小框架 fly javascript framework
Nov 26 Javascript
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
Nov 09 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
May 03 Javascript
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
Jan 21 Javascript
jQuery中bind与live的用法及区别小结
Jan 27 Javascript
JS提示：Uncaught SyntaxError:Unexpected token ) 错误的解决方法
Aug 19 Javascript
BootStrap中的Fontawesome 图标
May 25 Javascript
详解react服务端渲染（同构）的方法
Sep 21 Javascript
js实现鼠标单击Tab表单切换效果
May 16 Javascript
vue实现侧边栏导航效果
Oct 21 Javascript
JavaScript实现密码强度实时验证
Mar 18 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
May 04 #Javascript
jQuery插件kinMaxShow扩展效果用法实例
May 04 #Javascript
jQuery消息提示框插件Tipso
May 04 #Javascript
jquery实现多屏多图焦点图切换特效的方法
May 04 #Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
May 04 #Javascript
jQuery插件jPaginate实现无刷新分页
May 04 #Javascript
javascript白色简洁计算器
May 04 #Javascript
嵌套(1) 查找算法(1) OpenLayer(1) 分块(1) IDEA(2) 二维数组(2) android studio(3) 移动开发(2) 安卓(1) 循环(3)
You might like
php中ftp_chdir与ftp_cdup函数用法
2014/11/18 PHP
php实现refresh刷新页面批量导入数据的方法
2014/12/23 PHP
PHP实现的简易版图片相似度比较
2015/01/07 PHP
php实现字符串首字母转换成大写的方法
2015/03/17 PHP
自适应高度框架 ----属个人收藏内容
2007/01/22 Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
2012/12/12 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
2020/09/12 Javascript
Javascript基础教程之比较操作符
2015/01/18 Javascript
JavaScript中getUTCSeconds()方法的使用详解
2015/06/11 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
2016/06/14 Javascript
AngularJS 依赖注入详解和简单实例
2016/07/28 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
2016/09/27 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
2016/11/18 Javascript
利用jquery实现验证输入的是否是数字、小数，包含保留几位小数
2016/12/07 Javascript
在 webpack 中使用 ECharts的实例详解
2018/02/05 Javascript
vue中v-model的应用及使用详解
2018/06/27 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
2019/08/28 Javascript
Layui实现数据表格默认全部显示(不要分页)
2019/10/26 Javascript
Windows上node.js的多版本管理工具用法实例分析
2019/11/06 Javascript
浅析Vue 中的 render 函数
2020/02/28 Javascript
ES6扩展运算符和rest运算符用法实例分析
2020/05/23 Javascript
微信小程序实现上传照片代码实例解析
2020/08/04 Javascript
python连接MySQL数据库实例分析
2015/05/12 Python
TensorFlow实现创建分类器
2018/02/06 Python
python 匹配url中是否存在IP地址的方法
2018/06/04 Python
Python列表倒序输出及其效率详解
2020/03/04 Python
Python中常见的数制转换有哪些
2020/05/27 Python
Django视图、传参和forms验证操作
2020/07/15 Python
使用py-spy解决scrapy卡死的问题方法
2020/09/29 Python
迷你唐卡软皮鞋：Minnetonka Moccasin
2018/05/01 全球购物
Rossignol金鸡美国官网：始于1907年法国百年雪具品牌
2019/03/06 全球购物
村庄绿化方案
2014/05/07 职场文书
优秀党务工作者事迹材料
2014/05/07 职场文书
党校毕业心得体会
2014/09/13 职场文书
行政处罚事先告知书
2015/07/01 职场文书
2019年公司快递收发管理制度模板
2019/11/20 职场文书