利用HTML5的drop、drag及拖动属性做元素位置交换《我是学霸》 - 图1

    很久没来这里，我也安静了很久。经过半年的技术转型，我现在是一名彻底前端开发人员，并也已前端开发人员的身份找到了工作。从后端的种种在到前端的种种，我技术转型成功了。

    空闲时间总结前段时间看过的html5的拖动写了一个小东东《我是学霸》，个人能力有限就没有做比较严谨的关卡设计，望大家理解。

    设计思路：使用九宫格作为画布背景；每个九宫格中的元素为数字、数学公式、物理公式(注:一切能在数学条件下代表大小的元素)；拖动九宫格选中元素到目标元素，元素进行两两交换位置；在每一次元素位置发生变化时进行比较当前九宫格中所有元素是否由小到大顺序排列，如顺序排列就进入下一关；
    技术要点：jquery、drop、drag、cookie
    实现步骤：
    1.解决九宫格展现内容问题：将九宫格中的元素内容做成80*80的图片并按照图片内容按照大小顺序数字编号排列好，为什么要将图片按照数字大小编号呢？容我在这里买个小关子(在代码中有答案，前提是你能看懂)。

    利用HTML5的drop、drag及拖动属性做元素位置交换《我是学霸》 - 图2

    2.绘制九宫格：使用css+html+js实现。
    3.记录游戏当前信息：关卡、移动步数、原始序列、当前移动序列、历史移动序列。使用cookie来记录这些信息。
    4.实现九宫格元素两两交换：使用html5的特性drop与drag来实现。

    css

    1. h1{
    2.    text-align: center;
    3.    }
    5. #toast{
    6.     min-width:10px;        
    7.     position: absolute;
    8.     top:-50px;
    9.     left:45%;
    10.     border:1px #ccc solid;
    11.     padding:10px 20px;
    12.     background-color: #000;
    13.     color: #fff;
    14.     border-radius: 10px;
    15.     display: none;
    16. }
    17. #heading{
    18.     width: 320px;
    19.     border: 0px #ccc solid;
    20.        margin: 0 auto;
    21.        padding: 10px 0px;
    22. }
    23.    #tf_box {
    24.        width: 300px;
    25.        height: 300px;
    26.        border: 1px #ccc solid;
    27.        margin: 0 auto;
    28.        padding: 10px;
    29.    }
    30.    .div_box {
    31.        float: left;
    32.        width: 80px;
    33.        height: 80px;
    34.        margin: 2px;
    35.        padding: 7px;
    36.        border: 1px solid #aaaaaa;
    37.    }
    38.    *[draggable=true] {
    39.     -moz-user-select:none;
    40.     -khtml-user-drag: element;
    41.     cursor: move;
    42. }
    43. img {               
    44.     display:inline-block;
    45.     transition: all 100ms;
    46.     position: absolute;
    47. }
    48. img.move {
    49.     -webkit-transform:scale3d( 1.1, 1.1, 1.1 );
    50. }

    html

    1. <h1>我是学渣</h1>
    3. <div id="toast">这里输出鼓励消息</div>
    5. <div id="tf_box"></div>
    7. <div id="heading">
    8.     <input id="instruct" type="button" value="玩法说明">
    9.     <input id="btn" type="button" value="复位">
    10.     <div id="gameMsg" style="padding-top:10px;">
    11.         当前级别: <b>1</b><br>
    12.         当前移动次数: <b>0</b><br>
    13.         总计移动次数: <b>0</b><br>
    14.     </div>
    15. </div>

    js
    向cookie记录并输出当前每一步的信息

    1. function cookieHelpers() {
    2.     //记录并输出每一步的信息
    3.     this.writeCookies = function(game) {        
    4.         var toWrite = "px=" +
    5.             game.level + " " +
    6.             game.totalClicks + " " +
    7.             game.currentClicks + " " +
    8.             game.dataY + " " +
    9.             game.pa + " " +
    10.             game.pb + " " +
    11.             game.dataP + " " +
    12.             ";";
    13.         document.cookie = toWrite;
    14.         console.log(document.cookie);
    15.     }
    16. }

    定义过关提示与周边其它信息

    1. function cheesyWordGetter() {
    2.     this.words = ['非常好', '干得漂亮', '帅呆了', '哇塞', 'I服U', '天才诞生了'];
    4.     /**
    5.      * 页面过关鼓励提示
    6.      * @return {[type]} [description]
    7.      */
    8.     this.getWord = function() {
    9.         var _this = this;
    11.         $('#toast').html(_this.words[Math.floor(Math.random()*_this.words.length)]);
    13.         $('#toast').fadeIn().animate({top:"50px"}, "slow", function() {
    14.             $(this).animate({top: "-50px"}, 500).fadeOut();
    15.         });
    16.     }
    18.     /**
    19.      * 玩法说明
    20.      * @return {[type]} [description]
    21.      */
    22.     this.instruct = function() {        
    23.         $('#gameMsg').html("如何才算赢：使拼板全部元素从小到大排列。拖动一个元素都另一个元素上，这两个元素就会交换位置。");
    24.     }
    26.     /**
    27.      * 更新页面统计信息
    28.      * @param  {[type]} game [description]
    29.      * @return {[type]}      [description]
    30.      */
    31.     this.updateCounts = function(game) {
    32.         var htmlMsg = "当前级别: <b>" + game.level + "</b><br>"+
    33.                       "当前移动次数: <b>" + game.currentClicks +"</b><br>"+
    34.                       "总计移动次数: <b>" + game.totalClicks + "</b><br>"+
    35.                       "";//this.dataY+"<br>"+this.dataP
    36.         $('#gameMsg').html(htmlMsg);
    38.     }
    39. }

    定义游戏相关方法

    1. function GameBoard(){
    2.     var self = this;
    4.     this.cwg = new cheesyWordGetter();
    5.     this.cook = new cookieHelpers();
    6.     this.pa = '0';
    7.     this.pb = '0';
    8.     this.dataY = [];//原始序列
    9.     this.dataP = [];//排序序列
    10.     this.level = 1;//等级
    11.     this.currentClicks = 0; //当前移动次数
    12.     this.totalClicks = 0; //总计移动次数    
    14.     /**
    15.      * 开始游戏
    16.      * @return {[type]} [description]
    17.      */
    18.     this.beginGame = function() {
    19.         var vv = self.createRandom(9,1,9);        
    20.         this.dataY = vv.toString();
    21.         this.dataP = vv;
    22.         this.cook.writeCookies(this);
    23.         self.renderBoard();
    24.     }
    26.     /**
    27.      * 进入下一关
    28.      * @return {[type]} [description]
    29.      */
    30.     this.resetGame = function() {
    31.         this.level++;
    33.         var vv = self.createRandom(9,1,9+this.level);
    34.         this.dataY = vv.toString();
    35.         this.dataP = vv;
    37.         this.cook.writeCookies(this);
    38.         self.setupLevel();
    39.     }
    41.     /**
    42.      * 复位
    43.      * @return {[type]} [description]
    44.      */
    45.     this.setupLevel = function(){
    46.         this.currentClicks = 0;//复位当前移动次数
    47.         self.renderBoard();
    48.         self.updateCounts();
    49.     }
    51.     /**
    52.      * 产生不重复的随机数
    53.      * @param  {[type]} num  [要产生多少个随机数]
    54.      * @param  {[type]} from [产生随机数的最小值]
    55.      * @param  {[type]} to   [产生随机数的最大值]
    56.      * @return {[type]}      [description]
    57.      */
    58.     this.createRandom = function(num ,from ,to){
    59.         var arr=[];
    60.         for(var i=from;i<=to;i++)
    61.             arr.push(i);
    62.         arr.sort(function(){
    63.             return 0.5-Math.random();
    64.         });
    65.         arr.length=num;
    66.         return arr;
    67.     }
    69.     /**
    70.      * 初始画布    
    71.      * @return {[type]}      [description]
    72.      */
    73.     this.renderBoard = function(){
    74.         var html = '';
    75.         $.each(this.dataY.split(","),function(i,itme){
    76.             html+='<div class="div_box" >';
    77.             html+='<img draggable="true" src="image/tf/'+itme+'.png" id="drag'+itme+'" data-num="'+itme+'" />';
    78.             html+='</div>';
    79.         });
    80.         $('#tf_box').html("").append(html);
    82.         var fl = $('.div_box').find("img");
    83.         fl.each(function(index, el) {
    84.             var _this=$(this);
    85.             // console.log(_this.attr("data-num"));
    86.             var t = _this.position().top;
    87.             var l = _this.position().left;
    89.             _this.css({
    90.                 "top": t+'px',
    91.                 "left": l+'px'
    92.             });
    95.         });
    97.         self.isDrop();
    98.     }
    100.     /**
    101.      * 绑定拖动事件
    102.      * @return {Boolean} [description]
    103.      */
    104.     this.isDrop=function(){
    105.         var _this = this;
    106.         var origin, is_moving = false;
    107.         $("#tf_box").find("img").on("drop",
    108.             function(e) {
    109.                 _this.pa=$(origin).attr('data-num');
    110.                 _this.pb=$(e.target).attr('data-num');
    111.                 var origin_pos = $(origin).position();
    112.                 var target_pos = $(e.target).position();
    114.                 $(origin).addClass("move").animate(target_pos, "fast",
    115.                     function() {
    116.                         $(this).removeClass("move");
    117.                     });
    119.                 $(e.target).addClass("move").animate(origin_pos, "fast",
    120.                     function() {
    121.                         $(this).removeClass("move");
    122.                     });
    124.                 self.updateCount();
    125.             }).on("dragstart",
    126.             function(e) {
    127.                 if (is_moving) {
    128.                     return false;
    129.                 }
    130.                 is_moving = true;
    131.                 e.originalEvent.dataTransfer.effectAllowed = 'move';
    132.                 origin = this;
    134.             }).on("dragover",
    135.             function(e) {
    136.                 if (e.stopPropagation()) e.stopPropagation();
    137.                 if (e.preventDefault) e.preventDefault(); // allows us to drop
    138.                 is_moving = false;
    139.                 e.originalEvent.dataTransfer.dropEffect = 'move'; // only dropEffect='copy' will be dropable
    140.             });
    141.     }
    143.     /**
    144.      * 更新统计数
    145.      * @return {[type]} [description]
    146.      */
    147.     this.updateCount = function() {
    148.         this.currentClicks++; //当前移动次数
    149.         this.totalClicks++; //总计移动次数
    151.         self.isSort();
    152.         self.updateCounts();
    153.     }
    154.     this.updateCounts = function() {
    155.         this.cwg.updateCounts(this);
    156.         this.cook.writeCookies(this);
    157.     }
    159.     /**
    160.      * 移动元素位置
    161.      * @return {Boolean} [description]
    162.      */
    163.     this.isSort = function(){
    164.         var _this=this;
    166.         var a = this.pa;
    167.         var b = this.pb;
    169.         var arr = this.dataP;
    171.         var i=0,len=arr.length,j,k;
    172.         for(;i<len;i++){
    173.             if(arr[i] == a)
    174.             {
    175.                 j=i;
    176.             }
    177.             if(arr[i] == b)
    178.             {
    179.                 k=i;
    180.             }
    181.         }
    182.         i=arr[j];
    183.         arr[j]=arr[k];
    184.         arr[k]=i;
    186.         self.ifSort();
    187.     }
    189.     /**
    190.      * 判断元素是否序列排序
    191.      * @return {[type]} [description]
    192.      */
    193.     this.ifSort = function(){
    194.         var bo = false;
    195.         var arr = this.dataP;
    196.         for(var i=0;i<arr.length-1;i++){            
    197.             if(arr[i]>arr[i+1]){
    198.                 bo = false;
    199.                 return;
    200.             }else{
    201.                 bo = true;
    202.             }            
    203.         }
    204.         if(bo){
    205.             this.cwg.getWord();
    206.             self.resetGame();
    207.         }
    208.     }
    209. }

    利用HTML5的drop、drag及拖动属性做元素位置交换《我是学霸》 - 图3

    源码包 http://download.csdn.net/detail/u012793146/8857407