围格子(双人对战网页游戏)，谁围的格子多，谁就赢，JavaScript技术编写。默认是蓝色玩家先开始，可设置游戏格子大小，默认值为5，数值越大，格子越多，难度也就是越大，JS爱好者正好可借此学习JavaScript游戏的编写技巧。
<HTML>
<HEAD>
<TITLE>围格子</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content="MSHTML 6.00.2900.2180" name=GENERATOR>
<style type="text/css">
<!--
.STYLE2 {
font-family: "华文行楷";
font-size: 30px;
color: #CC00FF;
}
.STYLE4 {
font-family: "隶书";
color: #FF00FF;
font-size: 20px;
}
body {
background-color: #FFFFFF;
}
.STYLE5 {
font-family: "华文彩云";
font-size: 40px;
color: #990000;
}
.STYLE6 {
font-family: "方正姚体";
color: #0000FF;
font-size: 30px;
}
-->
</style>
</HEAD>
<BODY>
<CENTER>
<STYLE>A.cOn {
FONT-WEIGHT: bolder; TEXT-DECORATION: none
}
#article {
PADDING-RIGHT: 15pt; PADDING-LEFT: 5pt; BACKGROUND: white; PADDING-BOTTOM: 0px; FONT: 12pt Verdana, geneva, arial, sans-serif; COLOR: black; PADDING-TOP: 10pt
}
#article P.start {
TEXT-INDENT: 0pt
}
#article P {
MARGIN-TOP: 0pt; FONT-SIZE: 10pt; TEXT-INDENT: 12pt
}
#article #author {
MARGIN-BOTTOM: 5pt; TEXT-INDENT: 0pt; FONT-STYLE: italic
}
#pageList P {
PADDING-TOP: 10pt
}
#article H3 {
FONT-WEIGHT: bold
}
#article DL {
FONT-SIZE: 10pt
}
UL {
FONT-SIZE: 10pt
}
OL {
FONT-SIZE: 10pt
}
</STYLE>
<STYLE>#board {
FONT-FAMILY: arial
}
.dot {
FONT-SIZE: 0pt; BACKGROUND: black; WIDTH: 5px; POSITION: absolute; HEIGHT: 5px
}
#line {
FONT-SIZE: 0pt; POSITION: absolute; HEIGHT: 5px
}
.p1 {
FONT-SIZE: 0pt; BACKGROUND: navy; POSITION: absolute
}
.p2 {
FONT-SIZE: 0pt; BACKGROUND: red; POSITION: absolute
}
.p1B {
FONT-WEIGHT: bold; FONT-SIZE: 8pt; COLOR: navy; POSITION: absolute; TEXT-ALIGN: center
}
.p2B {
FONT-WEIGHT: bold; FONT-SIZE: 8pt; COLOR: red; POSITION: absolute; TEXT-ALIGN: center
}
</STYLE>
<STYLE type=text/css>BODY {
MARGIN-TOP: 0px; FONT-SIZE: 9pt; MARGIN-LEFT: 0px; MARGIN-RIGHT: 0px; FONT-FAMILY: "宋体"
}
A {
FONT-WEIGHT: 400; FONT-SIZE: 13px; COLOR: black; TEXT-DECORATION: none
}
A:hover {
FONT-WEIGHT: 400; FONT-SIZE: 13px; COLOR: red; TEXT-DECORATION: underline
}
A:active {
FONT: 9pt "宋体"; CURSOR: hand; COLOR: #ff0033
}
</STYLE>
<TABLE cellSpacing=0 cellPadding=0 width=509 border=0>
<TBODY>
<TR>
<TD width=10></TD>
<TD width=499 vAlign=top bgcolor="#99FFFF" id=article>
<P class=start STYLE5 style="TEXT-ALIGN: left" STYLE1><FONT
style="FONT-WEIGHT: bold"><B>围格子(双人对战游戏)</B></FONT></P>
<P align="left" class="STYLE2">谁围的格子多，谁就赢。</P>
<P style="MARGIN-TOP: 5pt">
<SCRIPT>
var scale= 25
var size = 5
var totalSize = ((size+1)*scale) + 6
var cache = new Object()
var move=0,point=0
var player = true
function initCache() {
cache.x = 0
cache.y = 0
cache.red = 0
cache.navy = 0
move=0,point=0
}
function updateScore() {
document.all.red.innerText = cache.red
document.all.navy.innerText = cache.navy
if ((cache.red+cache.navy)==((size-1)*(size-1))) {
board.onclick = null
document.all.message.innerText = "游戏结束了!"
}
}
function fillPos(x,y) {
document.all.board.insertAdjacentHTML("beforeEnd","<DIV class=" + (player ? "p1B" : "p2B") + " ID=\"point"+point+"\">" + (player ? "N" : "R") + "</DIV>")
var el = document.all["point"+point].style
el.pixelTop = (y*scale)+5
el.pixelLeft = (x*scale)+5
el.pixelWidth = scale - 5
el.pixelHeight = scale - 5
}
function checkBoard(x,y,dir, player) {
var piece=0
if ("vertical"==dir) {
if ((x==size) || (x>1)) {
var bPos = boardArray[x-1][y]
var nextV = boardArray[x-1][y+1]
if ((bPos["vertical"]) && (bPos["horizontal"]) && (nextV["horizontal"])) {
point++
piece++
fillPos(x-1,y)
}
}
if ((x==1) || (x<size)) {
var nextV = boardArray[x+1][y]
var nextH = boardArray[x][y+1]
if ((nextV["vertical"]) && (nextH["horizontal"]) && (boardArray[x][y]["horizontal"])) {
point++
piece++
fillPos(x,y)
}
}
}
else {
if ((y==size) || (y>1)) {
var nextV = boardArray[x+1][y-1]
var bPos = boardArray[x][y-1]
if ((bPos["vertical"]) && (bPos["horizontal"]) && (nextV["vertical"])) {
point++
piece++
fillPos(x,y-1)
}
}
if ((y==1) || (y<size)) {
var nextV = boardArray[x+1][y]
var nextH = boardArray[x][y+1]
if ((nextV["vertical"]) && (nextH["horizontal"]) && (boardArray[x][y]["vertical"])) {
point++
piece++
fillPos(x,y)
}
}
}
if (piece>0) {
if (player)
cache.navy+=piece
else
cache.red+=piece
document.all.message.innerText = "得分，可以接着下！"
updateScore()
return player
}
else
return !player
}
function doMouseMove() {
if (event.srcElement.className!="dot") {
var x = Math.floor(event.offsetX / scale)
var y = Math.floor(event.offsetY / scale)
var dirX = (event.offsetX % scale)
var dirY = (event.offsetY % scale)
if ((x<size+1) && (y<size+1) && (y>0) && (x>0)) {
if (dirX>=dirY) {
if (x<size) {
line.style.pixelHeight = 5
line.style.pixelWidth = scale - 5
line.style.pixelTop = (y * scale)
line.style.pixelLeft = (x * scale) + 5
cache.direction = "horizontal"
}
} else
{
if (y<size) {
line.style.pixelWidth = 5
line.style.pixelHeight = scale - 5
line.style.pixelTop = (y * scale) + 5
line.style.pixelLeft = x * scale
cache.direction = "vertical"
}
}
cache.x = x
cache.y = y
}
}
}
function doClick() {
if (cache.x==0) return
if (boardArray[cache.x][cache.y][cache.direction])
document.all.message.innerText="不能走，请换个地方！"
else {
document.all.board.insertAdjacentHTML("beforeEnd","<DIV class=" + (player ? "p1" : "p2") + " ID=move"+move+"></DIV>")
var el = document.all["move"+move]
el.style.top = line.style.top
el.style.left = line.style.left
el.style.width = line.style.width
el.style.height = line.style.height
boardArray[cache.x][cache.y][cache.direction]=true
var nextPlayer = checkBoard(cache.x,cache.y,cache.direction, player)
if (nextPlayer!=player) {
player = nextPlayer
if (player) {
document.all.message.innerText = "蓝色玩家"
line.style.border = "1px navy solid"
}
else {
document.all.message.innerText = "红色玩家"
line.style.border = "1px red solid"
}
}
}
move++
}
function buildDiv(x,y, scale) {
return ("<DIV CLASS=dot STYLE=\"top:" + (x*scale) + "; left: " + (y*scale) + "\"></DIV>")
}
var boardArray = new Object
function buildBoard() {
initCache()
board = ("<DIV ID=line STYLE=\"border: 1px navy solid; width: 0; height: 0\"></DIV>")
boardArray = new Object()
for (var x=1; x < size+1; x++) {
boardArray[x] = new Object()
for (var y=1; y < size+1; y++) {
boardArray[x][y] = new Object
boardArray[x][y]["vertical"] = false
boardArray[x][y]["horizontal"] = false
board+=(buildDiv(x,y, scale))
}
}
return board
}
function createGame() {
size=parseInt(document.all.setSize.value)
if (size>12)
size=12
if (size<3)
size=3
document.all.setSize.value = size
document.all.board.innerHTML = buildBoard()
document.all.board.onclick = doClick
totalSize = ((size+1)*scale) + 6
document.all.board.style.pixelWidth = totalSize
document.all.board.style.pixelHeight = totalSize
document.all.message.innerText = "蓝色玩家先开始！"
updateScore()
}
document.write("<DIV ID=board STYLE=\"position: relative; height: "+ totalSize + "; width:" + totalSize + "; border: 1px black solid\">" + buildBoard() + "</DIV>")
document.all.board.onmousemove = doMouseMove
document.all.board.onclick = doClick
</SCRIPT>
</P>
<DIV style="MARGIN-TOP: 5pt; MARGIN-LEFT: 10pt">
<P class=start STYLE6 id=message STYLE3>蓝色玩家先开始！</P>
<DD><BR>
<TABLE width=100 border=1>
<TBODY>
<TR>
<TD style="COLOR: red"><B>红色</B></TD>
<TD id=red>0</TD></TR>
<TR>
<TD style="COLOR: navy"><B>蓝色</B></TD>
<TD id=navy>0</TD></TR></TBODY></TABLE>
<P><BR></P>
<TABLE width=200>
<TBODY>
<TR>
<TD><span class="STYLE4">游戏大小:</span> </TD>
<TD><INPUT id=setSize size=2 value=5></TD></TR>
<TR>
<TD align=middle colSpan=2><INPUT onclick=createGame() type=button value=新游戏></TD></TR></TBODY></TABLE>
<P
class=copyright></P></DD></DIV></TD></TR></TBODY></TABLE></CENTER>
</BODY>
</HTML>