<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>chess</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript" src="wz_jsgraphics.js"></script>
</HEAD>
<BODY>
</body>
<script>
var o = document.body;
var flag = 0;
var count = 0;
var graphs = new Array();
//创建DIV
function createDIV(id,left,top)
{
var div = document.createElement("div");
div.setAttribute("id",id);
div.setAttribute("name","noChess");
div.style.position = "absolute";
div.style.left = left;
div.style.top = top;
div.style.height = 35;
div.style.width = 35;
div.onclick = function(){
if(div.getAttribute("name")=="noChess"){
var jg_div = new jsGraphics(div); // draw directly into document
graphs[count++]=jg_div;
jg_div.setColor("#000000"); // black
if(flag%2==0){
jg_div.fillEllipse(1, 1, 33, 33);
div.setAttribute("name","black");
}
else{
jg_div.drawEllipse(1,1,33,33);
jg_div.setColor("#ffffff"); // white
jg_div.fillEllipse(2, 2, 32, 32);
div.setAttribute("name","white");
}
jg_div.paint();
flag++;
isAnyoneWin(div,flag);
}
};
o.appendChild(div);
}
function myDrawTableFunction()
{
jg_doc.setColor("#000000"); // green
var count=1;
for(x=240;;x+=35){
if(count==17) break;
jg_doc.drawLine(x, 30, x, 555);
count++;
}
count=1;
for(y=30;;y+=35){
if(count==17) break;
jg_doc.drawLine(240, y, 765, y);
count++;
}
jg_doc.setStroke(3);
jg_doc.drawLine(238,557,767,557);
jg_doc.drawLine(767,26,238,26);//
jg_doc.drawLine(236,557,236,26);//
jg_doc.drawLine(767,28,767,557);
jg_doc.paint(); // draws, in this case, directly into the document
}
function myInitDivFunction(){
for(i=1;i<17;i++){
for(j=1;j<17;j++){
createDIV(i*100+j,222+(i-1)*35,12+(j-1)*35);
}
}
}
function resetAllDiv(){
var divs = document.getElementsByTagName("div");
for (var i=0; i<divs.length; i++)
{
divs[i].setAttribute("name","noChess");
if(graphs[i])
graphs[i].clear();
}
}
function isAnyoneWin(div,flag) //判断输赢的方法
{
temp=checkChessMap("(x+i)+(y+i)*100","",div);
temp=checkChessMap("(x+i)+y*100",temp,div);
temp=checkChessMap("(x+i)+(y-i)*100",temp,div);
temp=checkChessMap("x+(y+i)*100",temp,div);
if(temp.indexOf("11111")!=-1){
alert("经过"+flag+"手,"+(div.getAttribute("name")=="white"?"白":"黑")+"棋胜!");
reStartGame();
}
}
function checkChessMap(evalStr,temp,div)
{
var val=div.getAttribute("id"); //得到一个整数
x=val%100; //重新组合时，X要放在Y的后面
y=val/100-(val/100)%1;
for(i=-4;i<5;i++){
var pointValue=eval(evalStr); //这个方法很怪，从外面传字符串，在这里计算值
if(pointValue%100<1 || pointValue%100>15) continue; //如果不在棋盘中间，继续查询下一个
if(pointValue/100-(pointValue/100)%1<1 || pointValue/100-(pointValue/100)%1>15) continue;
var xxx=document.getElementById( pointValue ); //从上面传过来的条件查询
if(xxx.getAttribute("name")==div.getAttribute("name")) temp+="1";
else temp+="0";
}
return temp+=",";
}
function reStartGame()
{
flag=0; //下的手数重置
resetAllDiv();
}
var jg_doc = new jsGraphics(); // draw directly into document
//var jg_chess = new jsGraphics("chessTable");
myDrawTableFunction();
myInitDivFunction();
</script>
</HTML>
js画图作的五子棋程序，不用一个图片，所有图型都用js画出来的
5星 · 超过95%的资源 需积分: 10 98 浏览量
2008-10-08
14:58:17
上传
评论 1
收藏 8KB RAR 举报 
chess.rar （2个子文件） 
chess.html 3KB
wz_jsgraphics.js 23KB资源评论
lm6567612612012-04-24不错，只不过不是人机对战的- LAOYDONG2013-12-04还可以，也不是我想要的
过8客2013-11-26js写成这样已经不错了，我也写了一个算法，传上来 大家看看- dazhou1571002014-07-03不错，但不是我想要的
qisg931
- 粉丝: 0
- 资源: 11
