首页
所有分类
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 相关文章推荐
各浏览器对click方法的支持差异小结
Jul 31 Javascript
jQuery代码优化 事件委托篇
Nov 01 Javascript
js获得地址栏?问号后参数的方法
Aug 08 Javascript
js定时器(执行一次、重复执行)
Mar 07 Javascript
JavaScript中的null和undefined区别介绍
Jan 01 Javascript
JS基于面向对象实现的选项卡效果示例
Dec 20 Javascript
ES6中Iterator与for..of..遍历用法分析
Mar 31 Javascript
详解Angular2 之 结构型指令
Jun 21 Javascript
jquery实现企业定位式导航效果
Jan 01 jQuery
vue判断input输入内容全是空格的方法
Mar 02 Javascript
vue代理和跨域问题的解决
Jul 18 Javascript
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
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
DE1102(1) ICOM(2) DE1107(3) 239军机(1) WR-800F(1) 胆机(1) DE1103(2) SONY600GR(1) DE1105(1) R9700(1)
You might like
Dedecms V3.1 生成HTML速度的优化办法
2007/03/18 PHP
mac下使用brew配置环境的步骤分享
2011/05/23 PHP
WampServer搭建php环境时遇到的问题汇总
2015/07/23 PHP
php实现的单一入口应用程序实例分析
2015/09/23 PHP
php邮箱地址正则表达式验证
2015/11/13 PHP
浅谈php中urlencode与rawurlencode的区别
2016/09/05 PHP
验证坐标在某坐标区域内php代码
2016/10/08 PHP
javascript下操作css的float属性的特殊写法
2007/08/22 Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能，页面刷新功能实效问题
2010/12/11 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
2013/05/03 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
2014/10/31 Javascript
Angularjs中的ui-bootstrap的使用教程
2017/02/19 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
2017/04/19 Javascript
javascript将url解析为json格式的两种方法
2017/08/18 Javascript
微信通过页面(H5)直接打开本地app的解决方法
2017/09/09 Javascript
jQuery EasyUI开发技巧总结
2017/09/26 jQuery
微信小程序的部署方法步骤
2018/09/04 Javascript
js数组去重的方法总结
2019/01/18 Javascript
jQuery实现鼠标移入显示蒙版效果
2020/01/11 jQuery
Python数据类型学习笔记
2016/01/13 Python
python socket多线程通讯实例分析(聊天室)
2016/04/06 Python
python通过配置文件共享全局变量的实例
2019/01/11 Python
Python程序包的构建和发布过程示例详解
2019/06/09 Python
html5使用html2canvas实现浏览器截图的示例
2017/08/31 HTML / CSS
英国领先的葡萄酒专家：Majestic Wine
2017/05/30 全球购物
世界排名第一的万圣节服装店：Spirit Halloween
2018/10/16 全球购物
智乐游戏测试笔试题
2014/05/21 面试题
你所在的项目是如何确定版本号的
2015/12/28 面试题
优秀学生干部先进事迹材料
2014/05/26 职场文书
我为党旗添光彩演讲稿
2014/09/13 职场文书
承诺函格式模板
2015/01/21 职场文书
工作时间调整通知
2015/04/24 职场文书
爱心捐款活动总结
2015/05/09 职场文书
2015年公司后勤管理工作总结
2015/05/13 职场文书
Nginx 502 Bad Gateway错误原因及解决方案
2021/03/31 Servers
解决vue $http的get和post请求跨域问题
2021/06/07 Vue.js