斗兽棋-by:lalasxc

body{margin:0;padding:0;font-size:14px;}

.drag{width:150px;height:150px;position:absolute;font-size:30px; font-family:"黑体";color:#fff;text-align:center;line-height:150px;cursor:pointer;background:#666}

ul{list-style:none;margin:0;padding:0;}

li{margin:0;padding:0;}

#bb{width:650px;height:650px;;background:#000}

#bb li{width:150px;height:150px;background:#fff;display:inline;padding:0;margin:10px 0 0 10px;float:left;}

#info{width:300px;background:#FF9900;position:absolute;top:10px;left:700px;padding:10px;border:3px solid #000}

var sx=0;//当前可走棋方，初始为红方

var baseDivs=[];//附着点的元素数组

var oDiv=$("bb").getElementsByTagName("li");//做为附着点的元素集合

for(var i=0;i

var dragDivs=[];//棋子数组

var player=[//保存棋子属性的数组

{p_name:"鼠",p_color:"red",p_value:0},

{p_name:"猫",p_color:"red",p_value:1},

{p_name:"狗",p_color:"red",p_value:2},

{p_name:"狼",p_color:"red",p_value:3},

{p_name:"豹",p_color:"red",p_value:4},

{p_name:"虎",p_color:"red",p_value:5},

{p_name:"狮",p_color:"red",p_value:6},

{p_name:"象",p_color:"red",p_value:7},

{p_name:"鼠",p_color:"green",p_value:0},

{p_name:"猫",p_color:"green",p_value:1},

{p_name:"狗",p_color:"green",p_value:2},

{p_name:"狼",p_color:"green",p_value:3},

{p_name:"豹",p_color:"green",p_value:4},

{p_name:"虎",p_color:"green",p_value:5},

{p_name:"狮",p_color:"green",p_value:6},

{p_name:"象",p_color:"green",p_value:7}

];

player.aSort(2);//对棋子进行随机排序

//创建棋子

for(var i=0;i

var drag=document.createElement("div");

drag.className="drag";

//添加棋子属性到棋子

drag.p_name=player[i].p_name;

drag.p_color=player[i].p_color;

drag.p_value=player[i].p_value;

drag.p_open=false;

drag.p_position=i;

//棋子位置分布规则

drag.style.top=parseInt(i/4)*160+10+"px";

drag.style.left=(i%4)*160+10+"px";

$("co").appendChild(drag);

dragDivs.push(drag);//把每个棋子添加到棋子数组

ev.addEvent(drag,"mousedown",open_player);

}

//翻开棋子

function open_player(){

var evn=ev.getEvent();

ev.formatEvent(evn);

var drag=evn.eTarget;

//显示翻开的棋子

drag.style.background=drag.p_color;

drag.innerHTML=drag.p_name;

drag.p_open=true;//棋子已翻开

sx+=1;

ev.removeEvent(drag,"mousedown",open_player);//移除翻开棋子功能

ev.addEvent(drag,"mousedown",mDown);//让棋子可拖动

}

var s_left=0;

var s_top=0;

var z=1000;

//判断游戏规则函数

function isOver(drag){

var overX=parseInt(drag.offsetWidth*30/100);//拖动元素和附着点的最小X差值

var overY=parseInt(drag.offsetHeight*30/100);//拖动元素和附着点的最小Y差值

var d1_left=parseInt(drag.offsetLeft);//当前拖动元素X坐标

var d1_top=parseInt(drag.offsetTop);//当前拖动元素Y坐标

var ableDivs=[];//可做为附着点元素的数组

for(var i=0;i

if(Math.abs(drag.p_position-i)==4||Math.abs(drag.p_position-i)==1){//如果是相邻元素则添加到可做为附着点元素的数组

ableDivs.push(baseDivs[i]);

}

}

var overBase=false;//拖动元素和附着点元素是否重合

var isplay=false;//附着点处是否有棋子

var tl=true;//附着点处棋子是否为已方

for(var i=0;i

var d2_left=parseInt(ableDivs[i].offsetLeft);//附着点的元素元素X坐标

var d2_top=parseInt(ableDivs[i].offsetTop);//附着点的元素元素Y坐标

if(Math.abs(d1_left-d2_left)<=overX&&Math.abs(d1_top-d2_top)<=overY){//判断拖动元素和附着点的元素是否重合

overBase=ableDivs[i];//得到附着点的元素

var ID=baseDivs.indexof(overBase);//查找附着点的元素的位置

for(var j=0;j

if(dragDivs[j].p_position==ID){//有棋子

isplay=dragDivs[j];//得到棋子

if(dragDivs[j].p_color!=drag.p_color){//对棋子颜色属性进行判断

tl=false;//拖动棋子与该棋子为不同方

}

}

}

}

}

//拖动元素和附着点元素重合

if(overBase){

//附着点处有棋子

if(isplay){

//是已方棋子，返回原处，不计步

if(tl||!isplay.p_open){

drag.style.left=s_left;

drag.style.top=s_top;

sx=sx;

}

//非已方棋子，计步

else{

//拖动棋子附着到附着点元素

drag.style.left=overBase.offsetLeft+"px";

drag.style.top=overBase.offsetTop+"px";

//拖动棋子与附着点处棋子为鼠和象时

if(isplay.p_value==0&&drag.p_value==7){drag.style.display="none";dragDivs.delItem(drag)}

else if(isplay.p_value==7&&drag.p_value==0){isplay.style.display="none";drag.p_position=baseDivs.indexof(overBase);dragDivs.delItem(isplay)}

//拖动棋子大于附着点处棋子时

else if(isplay.p_value

//拖动棋子小于附着点处棋子时

else if(isplay.p_value>drag.p_value){drag.style.display="none";dragDivs.delItem(drag)}

//拖动棋子等于附着点处棋子时

else if(isplay.p_value==drag.p_value){drag.style.display="none";isplay.style.display="none";dragDivs.delItem(isplay);dragDivs.delItem(drag)}

sx+=1;//计步

}

}

//附着点处没有棋子

else{

drag.style.left=overBase.offsetLeft+"px";

drag.style.top=overBase.offsetTop+"px";

drag.p_position=baseDivs.indexof(overBase);

sx+=1

}

}

//拖动元素和附着点元素不重合，返回原处，不计步

else{

drag.style.left=s_left;

drag.style.top=s_top;

sx=sx;

}

}

//按下鼠标事件

function mDown(){

z+=1

var evn=ev.getEvent();

ev.formatEvent(evn);

var drag=evn.eTarget;

drag.style.zIndex=z;

//drag.style.background="yellow";

f_left=evn.clientX-drag.offsetLeft;

f_top=evn.clientY-drag.offsetTop;

s_left=evn.clientX-f_left+"px";

s_top=evn.clientY-f_top+"px";

ev.addEvent(document.body,"mousemove",mMove);

ev.addEvent(document.body,"mouseup",mUp);

}

//移动鼠标事件

function mMove(){

var evn=ev.getEvent();

ev.formatEvent(evn);

var drag=evn.eTarget;

drag.style.left=evn.clientX-f_left+"px";

drag.style.top=evn.clientY-f_top+"px";

}

//释放鼠标事件

function mUp(){

var evn=ev.getEvent();

ev.formatEvent(evn);

var drag=evn.eTarget;

drag.style.background=drag.p_color;

ev.removeEvent(document.body,"mousemove",mMove);

ev.removeEvent(document.body,"mouseup",mUp);

//通过当前步数判断该何方走棋

if(drag.p_color=="red"&&sx%2==0){isOver(drag);}

else if(drag.p_color=="green"&&sx%2!=0){isOver(drag);}

//已走过棋了

else{

if(sx==0){alert("请让红棋先走")}//初始为红棋先走

else{alert("你已经走过了吧")}

drag.style.left=s_left;

drag.style.top=s_top;

sx=sx;

}

}

dom.getByName()