首页
所有分类
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 相关文章推荐
JavaScript中实现块作用域的方法
Apr 01 Javascript
jquery 日期分离成年月日的代码
May 14 Javascript
有关于eclipse配置spket需要注意的一些地方
Apr 07 Javascript
调用jQuery滑出效果时闪烁的解决方法
Mar 27 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
Aug 22 Javascript
前端轻量级MVC框架CanJS详解
Sep 26 Javascript
JavaScript分析、压缩工具JavaScript Analyser
Dec 31 Javascript
angular.foreach 循环方法使用指南
Jan 06 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
May 24 Javascript
详解javascript replace高级用法
Feb 17 Javascript
VUE实现强制渲染,强制更新
Oct 29 Javascript
JavaScript与JQuery框架基础入门教程
Jul 15 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
岗位职责(1324) 自荐信(981) 推荐信(292) Delphi面试题(13) 求职信(1029) Ruby面试题(15) 创业计划书(312) SOA面试题(9) 自我鉴定(671) 自我评价(886)
You might like
php模板之Phpbean的目录结构
2008/01/10 PHP
php的日期处理函数及uchome的function_coomon中日期处理函数的研究
2011/01/12 PHP
php数组函数序列之end() - 移动数组内部指针到最后一个元素，并返回该元素的值
2011/10/31 PHP
CodeIgniter配置之routes.php用法实例分析
2016/01/19 PHP
php socket通信(tcp/udp)实例分析
2016/02/14 PHP
浅谈php中fopen不能创建中文文件名文件的问题
2017/02/06 PHP
PHP中的使用curl发送请求（GET请求和POST请求）
2017/02/08 PHP
php反射学习之依赖注入示例
2019/06/14 PHP
laravel 配置路由 api和web定义的路由的区别详解
2019/09/03 PHP
Jquery数独游戏解析（一）-页面布局
2010/11/05 Javascript
javascript数组的使用
2013/03/28 Javascript
一个封装js代码-----展开收起效果示例
2013/07/03 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
2015/05/28 Javascript
轻松5句话解决JavaScript的作用域
2016/07/15 Javascript
AngularJS 基础ng-class-even指令用法
2016/08/01 Javascript
JS判断form内所有表单是否为空的简单实例
2016/09/09 Javascript
Angular 2.0+ 的数据绑定的实现示例
2017/08/09 Javascript
vue-cli —— 如何局部修改Element样式
2020/10/22 Javascript
Python判断值是否在list或set中的性能对比分析
2016/04/16 Python
Python数据操作方法封装类实例
2017/06/23 Python
Python实现全排列的打印
2018/08/18 Python
python3 pillow模块实现简单验证码
2019/10/31 Python
浅谈Pytorch中的自动求导函数backward()所需参数的含义
2020/02/29 Python
Python sublime安装及配置过程详解
2020/06/29 Python
pytorch Dataset,DataLoader产生自定义的训练数据案例
2021/03/03 Python
澳大利亚手表品牌：Time IV Change
2018/10/06 全球购物
意大利在线大学图书馆：Libreria universitaria
2019/07/16 全球购物
美国家用和厨房电器销售网站：Appliances Connection
2020/01/24 全球购物
iostream与iostream.h的区别
2015/01/16 面试题
学校党的群众路线教育实践活动总结报告
2014/07/03 职场文书
高中生综合素质自我评价
2015/03/06 职场文书
2015年银行信贷员工作总结
2015/05/19 职场文书
公司的力量观后感
2015/06/05 职场文书
运动会宣传稿50字
2015/07/23 职场文书
教你用Java Swing实现自助取款机系统
2021/06/11 Java/Android
Python Numpy库的超详细教程
2022/04/06 Python