js --斗兽棋游戏
index.html 源码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>斗兽棋-by:lalasxc</title>
<script type="text/javascript" src="sxcjs/base.js"></script>
<script type="text/javascript" src="sxcjs/dom.js"></script>
<script type="text/javascript" src="sxcjs/event.js"></script>
<style>
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}
</style>
</head>
<body id="co">
<ul id="bb">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div id="info"><b>斗兽棋游戏规则：</b><br />
先点击翻开棋子<Br />
红棋先走
每次只能走一格.<br />
按象-狮-虎-豹-狼-狗-猫-鼠的大小顺序，大的能吃所有比它小的，但鼠可吃象.<br />
最后谁剩下的棋子多为胜.
<span id="vb"></span>
</div>
<script>
var sx=0;//当前可走棋方，初始为红方
var baseDivs=[];//附着点的元素数组
var oDiv=$("bb").getElementsByTagName("li");//做为附着点的元素集合
for(var i=0;i<oDiv.length;i++){baseDivs.push(oDiv[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<player.length;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<baseDivs.length;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<ableDivs.length;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<dragDivs.length;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<drag.p_value){isplay.style.display="none";drag.p_position=baseDivs.indexof(overBase);dragDivs.delItem(isplay)}
//拖动棋子小于附着点处棋子时
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()
</script>
</body>
</html>
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2017-09-28，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读