Cookie拼图游戏的编写过程步骤

                  这是来自开发的Cookie拼图游戏的编写过程创建的步骤，可以试试着这样的创建步骤来编写：

       

<style>
      /* 拼图块样式 */
      .block {
          width:100px;
          height:100px;
          position:absolute;
          left:200px;
          top:200px;
       }
   </style>
   <center>
       <input type='button' value='保存' οnclick='save()'/>
       <input type='button' value='还原' οnclick='reset()'/>
       <!-缩略图 -->
       <img src='4.jpg' width=200 height:150 />
    </center>
   
    （2）编写拼图代码：
     <!-引入拖动接口 -->
     <script src='drag.js'></script>
     <spript>
     //浏览器是否支持Cooki
     var canCookie =navigator.cookieEnabled;
    
     //创建图片对象
     var img =new Image;
     //定义拼图块大小
     var blockwidth = 100;
     var blockHeight = 100;
     //指定图片加载地址
     img.src = '4.jpg';
     //在图片加载完成后执行匿名回调函数
     img.onload = function() {
         //读取Cookie
         var coordsObject = new objiect;
         //如果不支持Cookie
         if(canCookie) {
             var coords = document.cookie.split(',');
             for(var i=0,l=coords.length; 1<1; i++) {
                 var temp = coords[i].split(':');
                 coordsObject[temp[0] = temp[1];
             }
         }   

         //创建图片拼图，以100*100像素为图块尺寸
         //判断原图尺寸需要用多少个拼图块
         var xBlocks = img.width%blockwidth ?
           parseInt(img.width/blockwidth)+1 :img.width/blockwidth;
         var yBlocks = img.height%blockHeight ?
           parseInt(img.height/blockheight)+1 : img.height/blockHeight;
       
         //创建拼图块
         for(var i=0; i<yBlocks; 1++) { //行
             for(var j=0; j<xBlocks; j++) { //列
                 var block = document.createElement('div');
             //设置拼图块id, 用于在cookie中记录坐标
             block.id = 'b'+i+j;
             block.className = 'block';
             //使用图片剪切技术实现拼图块
             block.style.background = 'url(4.jpg) -'+(j*blockwidth)
               + 'px -' + (i*blockheight) + 'px';
             //曾加200像素的原始偏移
             block.style.left = j*blockwidth+200;
             block.style.top =blockHeight*i+200;
               
             docunment.body.appendChild(block);
             
             //高度误差
             var offH = i*blockHeight + 100-img.height;
              
             if(offH>0){
                 block.style.height = block.offsetHeight - offH;
             }
             //更新为已保存的坐标
             if(coordsObject[block.id] {
                 var temp = coordsObject[block.id].split('-');
                 block.style.left = temp[0];
                 block.style.top = temp[1];
             }
             //增加拖动功能
             canDrag(block);
          }
       }
       //3秒后打乱顺序
       setTimeout(function() {
           //只有在未保存时执行
           if(!dounment.cookie) {
               var blocks = document.getTementsByTagName('div');
               for(var i=0,1=blocks.length; i<1; i++) {
                   var blockleft =blocks[i].currentStyle.left;
                   blocks[i].style.left = blocks[i].currentStyle.top;
                   blocks[i].style.top = blockleft;
               }
           }
       }, 2000);
   }
   
    
    编写Cookie保存代码：
    
    //保存记录
    function save() {
        if(!canCookie) {
            alert('您的浏览器不支持cookie! ');
            return;
        }
        var blocks = document.getElementsByTagName('div');
        var temp = '';
        for(var i=0,1=blocks.lenght; i<1; i++) {
            if(!blocks[i].id.indexOf('b')) {
                //获得所有拼图块的坐标
                temp += "," + blocks[i].id + ":" + blocks[i].currentstyle.left
                  + "-" + blocks[i].currentstyle.top;
            }
        }
        //去掉最前面的逗号并保存到Cookie, 刷新页面
        docunment.cookie = temp.substring(1, temp.length);
        alert('保存成功')；
    }
    
        //重置。清除Cookie,刷新页面
        function reset() {
            var expiration = new date(new Date().getTime() + 1000);
            document.cookie = ";expires=" + expiration.toGMTString();
            location.reload();
        }
        
        //增加鼠标悬停效果
        document. = function(e) {
            e = e||event;
            var target = e.target||e.srcElement;
            if(!target.id.indexOf('b')) {
                target.style.border = '1px solid #80FF00';
            }
        }
        document. = function(e) {
            e = e||event;
            var target = e.target||e.srcElement;
            if(!target.id.indexOf('b')) {
                target.style.border = 'none';
            }
        }
    
        好了，开始努力拼图吧!
          
        Cookie可以在JavaScript直接拥有数据存储的能力，由于Cookie本身并不是数据库，能存储的信息是有限的，它在不同的一个域中所能生成的    
                 
   Cookie文件是有限的，也就是不同的浏览器有不同的限制，但是在编写Cookie代码时要清楚这一点，Cookie只辅助×××，当浏览器不支持Cookie时，
   也可以用别的方案来替代。
        即使在Cookie可用的情况下，我们写入Cookie的信息也要谨慎，例如：用户名、密码、访问过的网站地址等，最好不要写入Cookie中，就算没有被***也会把秘密信息被其他人看见；这是一件很不好的事情。(也就是说在选择浏览器浏览器时要注意的 一个问题)