博客开张了,恭喜恭喜!

可喜可贺!

  1// JavaScript Document
  2// 地图初始化
  3
  4function mapClass(arg){
  5    
  6    var _this = this;
  7    var _map = document.getElementById(arg);
  8    var lands = []; //地图数组;landObj数组; landObj=[landDOM,landType,landFlag,landCountry]
  9    var landw=132;
 10    var landh=66;
 11    var cols=14;
 12    var rows=14;
 13    var offsetX=2;
 14    var offsetY=-2;
 15    var fixx=55;
 16    var fixy=26;
 17    var px=0+offsetX*landw+fixx;
 18    var py=-11+offsetY*landh-fixy;
 19    var lastLight=0;//最后发亮的
 20    var landIndex=0;//当前选中的land序号
 21    var maskrel;
 22    
 23    //初始化网格
 24    for(var n=0;n<rows*cols;n++){
 25        var landDOM = document.createElement('div');
 26        var tx=n;
 27        var ty=parseInt(tx/cols);
 28        tx=tx-ty*cols;
 29        var x=tx*landw/2-ty*landw/2;
 30        var y=(ty+tx)*landh/2;
 31        landDOM.style.left=x+px+'px';
 32        landDOM.style.top=y+py+'px';
 33        var landType;
 34        var landCountry;
 35        var landFlag = document.createElement('div');
 36/**//**/    var ran=Math.random()*100;
 37        if(ran>10)landType=6;//城池
 38        if(ran>20)landType=5;
 39        if(ran>30)landType=4;
 40        if(ran>40)landType=3;
 41        if(ran>50)landType=2;//
 42        if(ran>60)landType=1;//平原
 43        //landType = 1;
 44        if(n==cols*6+6)landType=6;
 45        landCountry = parseInt(Math.random()*3);
 46        var landObj = [landDOM,landType,landFlag,landCountry]; //
 47        $(landDOM).addClass('land');
 48        $(landDOM).addClass('land'+landObj[1]);
 49        landFlag.className='flag';
 50        landFlag.innerHTML=COUNTRYFLAG[landObj[3]];
 51        landFlag.style.display='none';
 52        landDOM.appendChild(landFlag);        
 53        if(landObj[1]==6){
 54            landFlag.style.display='';
 55        }
 56        lands.push(landObj);
 57    }
 58    
 59    //生成蒙版
 60    var mask = document.createElement('div');
 61    $(mask).css('width','1000px');
 62    $(mask).css('height','600px');
 63    $(mask).css('z-index','10');
 64    $(mask).css('position','absolute');
 65    
 66    //蒙版事件
 67    $(mask).mousemove(function(event) { 
 68        var cw=document.body.clientWidth;
 69        var x=event.pageX-(cw<1000?0:cw-1000)/2-fixx;
 70        var y=event.pageY+fixy;
 71        var fx=parseInt(x/landw);
 72        var fy=parseInt(y/landh);
 73        var qx=x-fx*landw;
 74        var qy=y-fy*landh;
 75        
 76        var area=0;
 77        var slope=0;
 78        if(qx>landw/2){
 79            if(qy>landh/2)area=3;
 80            else area=1;
 81        }else{
 82            if(qy>landh/2)area=2;
 83            else area=0;
 84        }
 85        switch(area){
 86            case 0:
 87                slope=qx/(landh/2-qy);
 88                farea=slope<2?1:0;
 89                break;
 90            case 1:
 91                slope=(landw-qx)/(landh/2-qy);
 92                farea=slope<2?2:0;
 93                break;
 94            case 2:
 95                slope=(landw/2-qx)/(landh-qy);
 96                farea=slope<2?0:3;
 97                break;
 98            case 3:
 99                slope=(qx-landw/2)/(landh-qy);
                farea=slope<2?0:4;
                break;
            default:
        }
        var mx=(fx-offsetX)+(fy-offsetY);
        var my=(fy-offsetY)-(fx-offsetX);
        switch(farea){
            case 0:
                break;
            case 1:
                mx--;
                break;
            case 2:
                my--;
                break;
            case 3:
                my++;
                break;
            case 4:
                mx++;
                break;
        }
        var tx=20+fixx;
        var ty=20-fixy;
        cursor.style.left=x+tx+'px';
        cursor.style.top=y+ty+'px';
        mx=mx<0?0:mx;
        my=my<0?0:my;
        mx=mx>cols-1?cols-1:mx;
        my=my>rows-1?rows-1:my;

        landIndex=mx+my*cols;
        if(landIndex!=lastLight){
            _this.darkLand(lastLight);
            _this.lightLand(landIndex);
            lastLight=landIndex;
        }
        cursor.innerHTML=LANDTYPE[lands[landIndex][1]-1]+':(x='+mx+',y='+my+')'+'<br/>'+landIndex;
//        clearTimeout(maskrel);
//        maskrel=setTimeout(function(){cursor.show()},0);
        cursor.show();
      });
    
    $(mask).mouseout(function(){
//        clearTimeout(maskrel);
//        maskrel=setTimeout(function(){cursor.hide();_this.darkLand(lastLight);},0);
        cursor.hide();_this.darkLand(lastLight);
    });
    $(mask).mousedown(function(){
        //var dlgTmp = new dialog(LANDTYPE[lands[landIndex][1]-1]);
        //dlgTmp.show();
    });
    _map.appendChild(mask);

    //land选中
    this.lightLand=function(arg){
        var tmp=lands[arg][0].className.replace(/land([0-9])/,"land$1light");
        lands[arg][0].className=tmp;
    }
    this.darkLand=function(arg){
        var tmp=lands[arg][0].className.replace(/land([0-9])light/,"land$1");
        lands[arg][0].className=tmp;
    }
    
    //生成游标
    var cursor = document.createElement('div');
    $(cursor).css('width','134px');
    $(cursor).css('height','67px');
    $(cursor).css('z-index','1');
    $(cursor).css('border','1px solid white');
    $(cursor).css('background','black');
    $(cursor).css('font-weight','bold');
    $(cursor).css('font-size','12px');
    $(cursor).css('font-family','Verdana');
    $(cursor).css('color','white');
    $(cursor).css('position','absolute');
    $(cursor).css('padding','4px');
    cursor.show=function(){this.style.display='block';$(this).fadeTo(0,0.9)};
    cursor.hide=function(){this.style.display='none';$(this).fadeTo(0,0);};
    cursor.hide();

    _map.appendChild(cursor);

    //生成地图网格
    for(n=0;n<lands.length;n++){
        _map.appendChild(lands[n][0]);
    }
    
    this.init = function(){
    }
    
    //地图渲染器
    //参数:o 地图数据数组(x,y,type)
    this.rander = function(o){
        for(var n=0;n<o.length;n++){
            var m=o[n][1]*cols+o[n][0];
            lands[m][0].className='land land'+6;
            lands[m][1]=6;
            lands[m][2].style.display='block';
            if(o[n][2]==6){
            }else{ //黄巾城旗帜
                lands[m][2].style.display='block';
                lands[m][3]=3;
                lands[m][2].innerHTML=COUNTRYFLAG[lands[m][3]];
            }
        }
    }
}