首页
所有分类
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 相关文章推荐
jquery $.ajax相关用法分享
Mar 16 Javascript
angularjs中的e2e测试实例
Dec 06 Javascript
Listloading.js移动端上拉下拉刷新组件
Aug 04 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
Nov 02 Javascript
javascript基础练习之翻转字符串与回文
Feb 20 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
Mar 30 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
Dec 14 Javascript
浅谈React深度编程之受控组件与非受控组件
Dec 26 Javascript
使用vue + less 实现简单换肤功能的示例
Feb 21 Javascript
Rollup处理并打包JS文件项目实例代码
May 31 Javascript
layui点击弹框页面 表单请求的方法
Sep 21 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
May 29 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) 国际空间站(1) 人造肉(1) 对撞机(1) 粒子对撞机(1) 塑料(1) 酶(1) 天问一号(1) 界面设计(1)
You might like
一个MYSQL操作类
2006/11/16 PHP
PHP array_flip() 删除重复数组元素专用函数
2010/05/16 PHP
免费的ip数据库淘宝IP地址库简介和PHP调用实例
2014/04/08 PHP
Laravel与CI框架中截取字符串函数
2016/05/08 PHP
PHP自动识别当前使用移动终端
2018/05/21 PHP
PHP回调函数简单用法示例
2019/05/08 PHP
JavaScript更改class和id的方法
2008/10/10 Javascript
jQuery的slideToggle方法实例
2013/05/07 Javascript
JQuery获取表格数据示例代码
2014/05/26 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
2015/01/26 Javascript
javascript 闭包详解
2015/07/02 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
2015/10/08 Javascript
NodeJs——入门必看攻略
2016/06/27 NodeJs
js中window.open的参数及注意注意事项
2016/07/06 Javascript
Ionic项目中Native Camera的使用方法
2017/06/07 Javascript
JavaScript事件方法(实例讲解)
2017/06/27 Javascript
jsTree事件和交互以及插件plugins详解
2017/08/29 Javascript
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
2019/07/19 Javascript
javascript删除数组元素的七个方法示例
2019/09/09 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
2019/11/26 Javascript
JavaScript 链表定义与使用方法示例
2020/04/28 Javascript
Node.js API详解之 dgram模块用法实例分析
2020/06/05 Javascript
python结合API实现即时天气信息
2016/01/19 Python
Python内置函数 next的具体使用方法
2017/11/24 Python
使用Python实现租车计费系统的两种方法
2018/09/29 Python
Python Numpy计算各类距离的方法
2019/07/05 Python
python中bs4.BeautifulSoup的基本用法
2019/07/27 Python
python ctypes库2_指定参数类型和返回类型详解
2019/11/19 Python
Python3实现个位数字和十位数字对调, 其乘积不变
2020/05/03 Python
经济实惠的名牌太阳镜和眼镜：Privé Revaux
2021/02/07 全球购物
英语自荐信范文
2013/12/11 职场文书
体育教师个人的自我评价
2014/02/16 职场文书
消防安全宣传口号
2014/06/10 职场文书
教师暑期培训感言
2014/08/15 职场文书
员工工作能力评语
2014/12/31 职场文书