文档章节

棋盘js代码

w
 wangwenya
发布于 2014/06/08 14:26
字数 773
阅读 458
收藏 6

 this.board=function(name,width,height,rowBak,colBak){ /* 画棋盘 */
 nameBak=name;
 if("turnover"==name){row=8;col=8;}else if("gogame"==name){row=18;col=18;}
 var aW=Math.floor(width/(col+2)),aH=Math.floor(height/(row+2));
 minL=(aW>aH?aH:aW)-4;// 这个减法很重要,否则填空时会把表格撑大
 var array=new Array("<div style=\"margin:"+minL+"px;\"> "+
 "<table border=1 cellspacing=0 width=\""+(aW*col)+"\"
 height=\""+(aH*row)+"\">");
 for(var i=0;i<row;i++){
       array.push("<tr>");
       for(var j=0;j<col;j++){array.push("<td align=center>"+
 evt(i,j,minL,minL,aW*j+minL/2+8,aH*i+minL/2)+"</td>");}
       if(nameBak!="four"&&nameBak!="turnover")/* 将事件添加到表格中 */
             array.push(evt(i,col,minL,minL,aW*col+minL/2+8,aH*i+minL/2));
             array.push("</tr>");
   }
    if(nameBak!="four"&&nameBak!="turnover"){
           for(var j=0;j<=col;j++){
               array.push(evt(row,j,minL,minL,aW*j+minL/2+8,aH*row+minL/2));
               }
           }
 document.write(array.join("")+"</table></div>");
 setClick(row,col,minL,minL);/* 初始化事件 */
 start();/* 初始化棋子 */
}
function man(width,height,id,colorBak){ /* 画棋子 */
  var color=colorBak==null?(order++%2==0?"000":"CCC"):colorBak;
  var r="border-radius:"+width/2+"px;";
  var obj=id==null?event.srcElement:_$(id);
  obj.innerHTML="<div id=\"man_"+color+"_"+order+"\" style=\"display:block;-webkit-"
  +r+"-moz-"+r+""+r+"-moz-box-shadow:inset 0 -10px 40px rgba(0,0,0,1);"+
  "box-shadow:inset 0 -10px 40px rgba(0,0,0,1);"+
  "background:-webkit-gradient(radial, 50 40, 30, center center, 80, from(#"+color+"),
     to(rgba(255,255,255,1)));"+
  "width:"+width+"px;height:"+height+"px;\"></div>";
 }
function moreMan(array){for(var i=0;i<array.length;i++)
man(minL,minL,nameBak+"_"+array[i]);}
/* 绘制多个棋子 */
function evt(i,j,width,height,left,top){ /* 单一单元格事件 */
  return "<div id=\""+nameBak+"_"+i+"_"+j+"\" style=\"position:"+
 (nameBak=="four"||nameBak=="turnover"?"block":"absolute")+
 ";border:0px solid #000;width:"+
 width+"px;height:"+height+"px;top:"+top+"px;left:"+left+"px;\"></div>";
  }
function setClick(row,col,width,height){
     for(var i=0;i<=row;i++){
            for(var j=0;j<=col;j++){
                var els=_$(nameBak+"_"+i+"_"+j);
                if(els!=null)els.onclick=function(){if(rule())man(width,height);};
    }
     }
  }
function isMan(row,col){var obj=_$(nameBak+"_"+row+"_"+col,1);
if(obj==null||obj.indexOf("man_")==-1)return null;
else if(obj.indexOf("000")!=-1)
  return 0;
else if(obj.indexOf("CCC")!=-1)return 1;}
function rule(){/* 走棋规则 */
var id=event.srcElement.id;
if(id.indexOf("man_")==0){alert("不能在有子的地方落子");return false;}else{
    var p=id.indexOf("_"),p1=id.lastIndexOf("_");
    var row=id.substr(p+1,p1-p-1)*1,col=id.substr(p1+1)*1;
    if("gobang"==nameBak)return gobang(row,col);
       else if("four"==nameBak){
    if(isMan(row,col+1)==null&&isMan(row,col-1)==null&&
    isMan(row+1,col)==null&&
    isMan(row-1,col)==null){
    alert("四子棋不能在四周空白的地方落子!");
    return false;
}
return gobang(row,col,3);
}else if("turnover"==nameBak){
if(isMan(row,col+1)==null&&isMan(row,col-1)==null&&
isMan(row+1,col)==null&&isMan(row-1,col)==null&&
isMan(row-1,col-1)==null&&
isMan(row+1,col+1)==null){
alert("翻转棋不能在四周空白的地方落子!");
return false;
}
 turnover();
}else if("gogame"==nameBak){
    }
    }
 return true;
}
function gobang(row,col,num){
num=num==null?4:num;
var rs=[[],[],[],[]],b=[],w=[];/* 这里采用四维数组来存储棋子位置 */
for(var i=0,j=0;i<num*2+1;i++,j++){
rs[0].push(isMan(row-num+i,col));
rs[1].push(isMan(row,col-num+j));
rs[2].push(isMan(row-num+i,col-num+j));
rs[3].push(isMan(row-num+i,col-num+j));
if(i<num){b.push(0);w.push(1);}
  }
if(rs.join("#").indexOf(b.join(","))!=-1){alert("黑棋胜");return false;
}else if(rs.join("#").indexOf(w.join(","))!=-1){alert("白棋胜");return false;}
    return true;
 }
function turnover(){
   if(order<64)return;
   var num=0;var total=row*col;for(var i=0;i<row;i++){
       for(var j=0;j<col;j++){num+=isMan(i+"_"+j);}
   }
if(num<total/2)alert("黑棋胜"+(total-num*2)+"子");
else if(num>row*col/2)alert("白棋胜"+(num*2-total)+"子");
else alert("平局");
 }
function start(){
  if("turnover"==nameBak){moreMan([3+"_"+3,4+"_"+3,4+"_"+4,3+"_"+4]);
  }else if("four"==nameBak){man(minL,minL,nameBak+"_"+row/2+"_"+0);
  }else if("gogame"==nameBak){moreMan([3+"_"+3,15+"_"+3,15+"_"+15,3+"_"+15]);
  }
 }

© 著作权归作者所有

共有 人打赏支持
w
粉丝 3
博文 94
码字总数 33768
作品 0
广州
私信 提问
在WebGL场景中建立游戏规则

  在前三篇文章的基础上,为基于Babylon.js的WebGL场景添加了类似战棋游戏的基本操作流程,包括从手中选择单位放入棋盘、显示单位具有的技能、选择技能、不同单位通过技能进行交互、处理交...

ljzc002
11/19
0
0
[CesiumJS]Cesium中级1 - 空间数据可视化(一)

Cesium中文网:http://cesiumcn.org/ 国内快速访问:http://cesium.coinidea.com/ 本教程将教读者如何使用Cesium的实体(Entity)API绘制空间数据,如点、标记、标签、线、模型、形状和物体。...

CoinIdea
11/02
0
0
JavaScript基础(一)概述

JavaScript 概述 JS作用 验证表单(以前的网速慢) 页面特效(PC端的网页效果) 移动端(移动web和app) 异步和服务器交互(AJAX) 服务端开发(nodejs) 语言类型 js是一种脚本语言,不仅是...

fengdaoting
05/03
0
0
【iOS & Web】JavaScript & Objective-C二重奏

一、JS call OC 方法1: 通拦截协议头来获取协议字符串。在UIWebView中的代理方法中有这样的方法,如下图所示: 下面是我写的简单的H5页面通过JS请求一个自定义协议的URL,然后通过UIWebView...

魔笛GNR
2016/10/19
0
0
asp.net中调用javascript自定义函数的方法(包括引入JavaScript文件)总结

通常javascript代码可以与HTML标签一起直接放在前端页面中,但如果JS代码多的话一方面不利于维护,另一方面也对搜索引擎不友好,因为页面因此而变得臃肿;所以一般有良好开发习惯的程序员都会...

黄献
2012/11/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

快速开发android,离不开这10个优秀的开源项目

作为一名菜鸡Android,时常瞻仰大佬们的开源项目是非常必要的。这里我为大家收集整理了10个优秀的开源项目,方便我们日常开发中学习! 作者:ListenToCode 博客:https://www.jianshu.com/p...

终端研发部
18分钟前
2
0
MiniUi tab页

architect刘源源
18分钟前
2
0
uitextview中'\n'不能换行的问题

后端返回的类似于这样的东西:'1、Fix bug;\n2、体验优化' 在textview里边是无法换行的,打断点发现 是因为 '\n'被转义成了'\\n'了 思路是replace。。。 _infoTextView.text = [self.info st...

RainOrz
23分钟前
1
0
年底了,该给自己写个总结了,一个六年女Java程序员的心声

简单的先说一下,坐标杭州,12届本科毕业,算上年前在阿里巴巴B2B事业部的面试,一共有面试了有6家公司(因为不想请假,因此只是每个晚上去其他公司面试,所以面试的公司比较少) 其中成功的...

Java架构资源分享
27分钟前
2
0
Shell脚本——cat/EOF输出多行

在某些场合,可能我们需要在脚本中生成一个临时文件,然后把该文件作为最终文件放入目录中。(可参考ntop.spec文件)这样有几个好处,其中之一就是临时文件不是唯一的,可以通过变量赋值,也...

吴伟祥
28分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部