<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml" ><br /><head><br /><title>javascript實現圍棋介面</title><br /><mce:script type="text/javascript"><!--<br />function $(s){return document.getElementById(s)}<br />//全域變數<br />var step=0;<br />var black=1;<br />var ball="●";<br />var arr="ABCDEFGHJKLMNOPQRST".split("");<br />//<br />window.onload=function(){<br /> init();<br /> adde();//addevent<br />}<br />function init(){<br /> var r='';<br /> //畫棋盤線<br /> for(var i=0;i<324;i++)r+='<div></div>';//19*19個交叉點,每個交叉點用一個div<br /> $("line").innerHTML=r;<br /> r='';<br /> //畫落子點div<br /> for(var i=0;i<19;i++){<br /> for(var j=0;j<19;j++){<br /> r+='<div id="'+arr[j]+(19-i)+'"> </div>';<br /> }<br /> }<br /> $("grid").innerHTML=r;<br /> drawStar();<br />}<br />//畫九顆星<br />function drawStar(){<br /> var s="<div>o</div>";<br /> $("D16").innerHTML=s;<br /> $("D10").innerHTML=s;<br /> $("D4").innerHTML=s;<br /> $("K16").innerHTML=s;<br /> $("K10").innerHTML=s;<br /> $("K4").innerHTML=s;<br /> $("Q16").innerHTML=s;<br /> $("Q10").innerHTML=s;<br /> $("Q4").innerHTML=s;<br />}<br />//為每個落子點註冊單擊事件<br />function adde(){<br /> var o=$("grid").childNodes;<br /> for(var i=0;i<o.length;i++){<br /> o[i].onclick=function(){<br /> if(this.innerHTML==ball)return;<br /> this.innerHTML=ball;<br /> this.style.color=black?"#000":"White";<br /> black=!black;<br /> step++;<br /> cacu(this);<br /> }<br /> }<br />}<br />function cacu(o){<br /> //alert(o.id);<br />}<br />// --></mce:script><br /><mce:style type="text/css"><!--<br /> body{margin:0;padding:0;background:white;}<br /> /*最外層邊線*/<br /> #go{position:absolute;margin:50px;width:640px;height:640px;border:solid 5px Green;background-color:#a0a0a0;}<br /> /**/<br /> #line{position:absolute;width:540px;left:50px;top:50px;border:solid 2px #000;}<br /> /*棋盤是由19*19個有邊線的div組成,所以div相交的地方是雙線,邊上是單線<br /> 28*18=560-56=504是div寬度,18*2=36是線寬,總寬度為540<br /> */<br /> #line div{float:left;width:28px;height:28px;border:solid 1px #000;color:White;background-color:#fdcb6b}<br /> /*交叉點位置用隱藏的div,交叉點div寬高為30,與線交叉點間距為15,再減去line的線寬2<br /> 即50-(15-2)<br /> */<br /> #grid{position:absolute;width:590px;left:37px;top:37px;}<br /> /*這裡的寬度大於line似乎不太好*/<br /> #grid div{float:left;width:30px;height:30px;line-height:30px;text-align:center;color:#000;cursor:pointer;font-size:30px;}</p><p>--></mce:style><style type="text/css" mce_bogus="1"> body{margin:0;padding:0;background:white;}<br /> /*最外層邊線*/<br /> #go{position:absolute;margin:50px;width:640px;height:640px;border:solid 5px Green;background-color:#a0a0a0;}<br /> /**/<br /> #line{position:absolute;width:540px;left:50px;top:50px;border:solid 2px #000;}<br /> /*棋盤是由19*19個有邊線的div組成,所以div相交的地方是雙線,邊上是單線<br /> 28*18=560-56=504是div寬度,18*2=36是線寬,總寬度為540<br /> */<br /> #line div{float:left;width:28px;height:28px;border:solid 1px #000;color:White;background-color:#fdcb6b}<br /> /*交叉點位置用隱藏的div,交叉點div寬高為30,與線交叉點間距為15,再減去line的線寬2<br /> 即50-(15-2)<br /> */<br /> #grid{position:absolute;width:590px;left:37px;top:37px;}<br /> /*這裡的寬度大於line似乎不太好*/<br /> #grid div{float:left;width:30px;height:30px;line-height:30px;text-align:center;color:#000;cursor:pointer;font-size:30px;}<br /> </style><br /></head><br /><body><br /><div id="go"><br /> <div id="line"></div><br /> <div id="grid"></div><br /></div><br /></body><br /></html><br />
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
