网页版的简单五子棋

根据毕老师的HTML+CSS+JavaScript教程和下载的一些文档介绍自己在手机上写出来的一个简单五子棋，很简单的功能，许多功能都没有实现，写的过程中也遇到很多问题，现在的代码中也存在一些问题，但每一个字符都是自己敲出来的，清楚他们的功能，还是很有成就感的！先看下概貌吧！老鸟勿笑，凑着上网的机会贴上来希望能挣到点分。

已实现的功能：
   根据指定位置落子
   电脑玩家随即落子，与玩家实现简单对战
   显示电脑随即挑选位置的过程
   ……自己发现吧，问题也有很多
比如电脑下棋时没有下到最右边和最下边，改来改去也还没试出电脑下最右边和最下边一排的情况……
代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
/*CSS区域*/
table{
border: red 2px solid;
border-collapse: collapse;
text-align: center;
}
td,th{
border: red 1px solid;
padding: 5, 10, 5, 10;
}
</style>
<script type="text/javascript">
/*javascript区域*/
var BOARD_SIZE = 9;
var board = new Array();
var s = "";
function play()
{
if (board.length != 0)
{
alert("游戏已经开始了，点击“重新开始”开始新游戏");
return;
}
init();
show();
}
function init()
{
// s = "";
board = new Array()
for (var i=0; i<BOARD_SIZE; i++)
{
// s += ((i+1)+' ');
board[i] = new Array();
for (var j=0; j<BOARD_SIZE; j++)
{
board[i][j] = "┼";
// s += board[i][j];
}
// s += "
";
}
// s += " ";
// for (var k=1; k<10; k++)
{
// s += " "+k;
}
//alert(s);
}
function getBoard()
{
return board;
}
//var flag = false; //电脑没下呢电脑调用setChess又执行了computerDo
function setChess(pos, chessMan)
{
if (!pos)
{
return;
}
board[pos[0]][pos[1]] = chessMan;
show();
if (chessMan=='●')
{
computerDo();
}
/*
if (flag)
{
return;
}
flag = false;
if (!flag)
{
computerDo();
}
else
flag = false;
*/
}
function computerDo()
{
var x = parseInt(Math.random()*(BOARD_SIZE));
var y = parseInt(Math.random()*(BOARD_SIZE));
alert("Computer:"+x+"---"+y);
while (!checkPos(x+"", y+"") || hasChess(x-1,y-1))
{
x = parseInt(Math.random()*(BOARD_SIZE));
y = parseInt(Math.random()*(BOARD_SIZE));
alert("Computer:"+x+"---"+y);
}
var pos = [x-1, y-1];
setChess(pos, "○");
}
function show()
{
s = "";
var node = document.getElementById("boardspan");
for (var i=0; i<BOARD_SIZE; i++)
{
s += ((i+1)+' ');
for (var j=0; j<BOARD_SIZE; j++)
{
s += board[i][j];
}
s += "
";
}
s += " ";
for (var k=1; k<10; k++)
{
s += " "+k;
}
node.innerHTML = s;
}
function rePlay()
{
init();
show();
}
function getPos()
{
var pos = new Array();
var x = document.getElementById("posx").value;
var y = document.getElementById("posy").value;
if (!checkPos(x, y))
{
alert("输入位置有误，请重新输入！");
return;
}
pos[0] = x - 1;
pos[1] = y - 1;
if (hasChess(pos[0], pos[1]))
{
alert("该位置已有棋子，请重新输入！");
return;
}
/*/防止电脑调用setChess时自动调用
document.getElementById("posx").value = "";
document.getElementById("posy").value = "";
*/
//alert(pos[0] + "::" + pos[1]);
return pos;
}
function hasChess(x, y)
{
return (board[x][y]!='┼')?true:false;
}
function checkPos(x, y)
{
var reg = "^[1-9]{1}$";
return (x.match(reg)&&y.match(reg))?true:false;
}
</script>
</head>
<body>
<table>
<th colspan=3 style="font-size:24; color:green">五子棋</th>
<tr>
<td colspan=3>
<span id="boardspan">
棋盘显示区
</span>
</td>
</tr>
<tr>
<td rowspan=2>落子位置</td>
<td>横向：<input type="text" id="posx" size=4 /></td>
<td rowspan=2><input type="button" value="确定" onclick="setChess(getPos(), '●')"</td>
<tr>
<td>竖向：<input type="text" id="posy" size=4 /></td>
</tr>
</tr>
<tr>
<th><input type="button" value="开始游戏" onclick="play()" /></th>
<th colspan=2><input type="button" value="重新开始" onclick="rePlay()" /></th>
</tr>
</table>
</body>
</html>

复制代码

txl · txl

电脑随机落子?,那不是没有一点智能了......

黄锦成 · 黄锦成

五子棋，要设计到一些算法问题

yong230 · yong230

支持一下!

郭孟涛 · 郭孟涛

点开没有棋盘，不能下

鲁柯 · 鲁柯

黑马唐贤来发表于 2013-1-25 18:10电脑随机落子?,那不是没有一点智能了......

实现智能电脑涉及到算法问题，目前还没研究呢

鲁柯 · 鲁柯

黄锦成发表于 2013-1-25 18:39五子棋，要设计到一些算法问题

这个只是实现简单功能，还有许多不足

鲁柯 · 鲁柯

郭孟涛发表于 2013-1-25 22:06点开没有棋盘，不能下

要点击开始游戏显示棋盘

帐号		自动登录	找回密码
密码			加入黑马

网页版的简单五子棋

7 个回复

优秀作者