博客开张了,恭喜恭喜!

可喜可贺!

Code
  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);
100                farea=slope<2?0:4;
101                break;
102            default:
103        }
104        var mx=(fx-offsetX)+(fy-offsetY);
105        var my=(fy-offsetY)-(fx-offsetX);
106        switch(farea){
107            case 0:
108                break;
109            case 1:
110                mx--;
111                break;
112            case 2:
113                my--;
114                break;
115            case 3:
116                my++;
117                break;
118            case 4:
119                mx++;
120                break;
121        }
122        var tx=20+fixx;
123        var ty=20-fixy;
124        cursor.style.left=x+tx+'px';
125        cursor.style.top=y+ty+'px';
126        mx=mx<0?0:mx;
127        my=my<0?0:my;
128        mx=mx>cols-1?cols-1:mx;
129        my=my>rows-1?rows-1:my;
130
131        landIndex=mx+my*cols;
132        if(landIndex!=lastLight){
133            _this.darkLand(lastLight);
134            _this.lightLand(landIndex);
135            lastLight=landIndex;
136        }
137        cursor.innerHTML=LANDTYPE[lands[landIndex][1]-1]+':(x='+mx+',y='+my+')'+'<br/>'+landIndex;
138//        clearTimeout(maskrel);
139//        maskrel=setTimeout(function(){cursor.show()},0);
140        cursor.show();
141      });
142    
143    $(mask).mouseout(function(){
144//        clearTimeout(maskrel);
145//        maskrel=setTimeout(function(){cursor.hide();_this.darkLand(lastLight);},0);
146        cursor.hide();_this.darkLand(lastLight);
147    });
148    $(mask).mousedown(function(){
149        //var dlgTmp = new dialog(LANDTYPE[lands[landIndex][1]-1]);
150        //dlgTmp.show();
151    });
152    _map.appendChild(mask);
153
154    //land选中
155    this.lightLand=function(arg){
156        var tmp=lands[arg][0].className.replace(/land([0-9])/,"land$1light");
157        lands[arg][0].className=tmp;
158    }
159    this.darkLand=function(arg){
160        var tmp=lands[arg][0].className.replace(/land([0-9])light/,"land$1");
161        lands[arg][0].className=tmp;
162    }
163    
164    //生成游标
165    var cursor = document.createElement('div');
166    $(cursor).css('width','134px');
167    $(cursor).css('height','67px');
168    $(cursor).css('z-index','1');
169    $(cursor).css('border','1px solid white');
170    $(cursor).css('background','black');
171    $(cursor).css('font-weight','bold');
172    $(cursor).css('font-size','12px');
173    $(cursor).css('font-family','Verdana');
174    $(cursor).css('color','white');
175    $(cursor).css('position','absolute');
176    $(cursor).css('padding','4px');
177    cursor.show=function(){this.style.display='block';$(this).fadeTo(0,0.9)};
178    cursor.hide=function(){this.style.display='none';$(this).fadeTo(0,0);};
179    cursor.hide();
180
181    _map.appendChild(cursor);
182
183    //生成地图网格
184    for(n=0;n<lands.length;n++){
185        _map.appendChild(lands[n][0]);
186    }
187    
188    this.init = function(){
189    }
190    
191    //地图渲染器
192    //参数:o 地图数据数组(x,y,type)
193    this.rander = function(o){
194        for(var n=0;n<o.length;n++){
195            var m=o[n][1]*cols+o[n][0];
196            lands[m][0].className='land land'+6;
197            lands[m][1]=6;
198            lands[m][2].style.display='block';
199            if(o[n][2]==6){
200            }else{ //黄巾城旗帜
201                lands[m][2].style.display='block';
202                lands[m][3]=3;
203                lands[m][2].innerHTML=COUNTRYFLAG[lands[m][3]];
204            }
205        }
206    }
207}

转载于:https://www.cnblogs.com/takuma/archive/2009/05/11/1454527.html