快捷導(dǎo)航

JavaScript實現(xiàn)網(wǎng)頁版的五子棋游戲

更新時間：2022年05月06日 16:05:11 作者：luck638

這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)網(wǎng)頁版的五子棋游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript實現(xiàn)網(wǎng)頁版五子棋游戲的具體代碼，供大家參考，具體內(nèi)容如下

根據(jù)畢老師的HTML+CSS+JavaScript教程和下載的一些文檔介紹自己在手機上寫出來的一個簡單五子棋，很簡單的功能，許多功能都沒有實現(xiàn)，寫的過程中也遇到很多問題，現(xiàn)在的代碼中也存在一些問題，比如電腦下棋時沒有下到最右邊和最下邊，改來改去也還沒試出電腦下最右邊和最下邊一排的情況，但每一個字符都是自己敲出來的，清楚他們的功能，還是很有成就感的！先看下概貌吧！

上代碼

<html>
?
<head><!--頭部標(biāo)簽開始-->
?
<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區(qū)域*/
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區(qū)域*/
var BOARD_SIZE = 9;
var board = new Array();
var s = "";
?
function play()
{
?? ?if (board.length != 0)
?? ?{
?? ??? ?alert("游戲已經(jīng)開始了，點擊“重新開始”開始新游戲");
?? ??? ?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 += "<br />";
?? ?}
//?? ?s += " ";
//?? ?for (var k=1; k<10; k++)
?? ?{
//?? ??? ?s += " "+k;?? ?
?? ?}
?? ?//alert(s);
}
?
function getBoard()
{
?? ?return board;
}
?
//var flag = false;?? ?//電腦沒下呢 ?電腦調(diào)用setChess又執(zhí)行了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 += "<br />";
?? ?}
?? ?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;
?? ?}
?? ?/*/防止電腦調(diào)用setChess時自動調(diào)用
?? ?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><!--頭部標(biāo)簽結(jié)束-->
?
<body><!--主體標(biāo)簽開始-->
?? ?<!--注釋區(qū)域-->
<table>
<th colspan=3 style="font-size:24; color:green">五子棋</th>
<tr>
?? ?<td colspan=3>
?? ?<span id="boardspan">
?? ?棋盤顯示區(qū)
?? ?</span>
?? ?</td>
</tr>
<tr>
?? ?<td rowspan=2>落子位置</td>
?? ?<td>橫向：<input type="text" id="posx" size=4 /></td>
?? ?<td rowspan=2><input type="button" value="確定" οnclick="setChess(getPos(), '●')"</td>
?? ?<tr>
?? ??? ?<td>豎向：<input type="text" id="posy" size=4 /></td>
?? ?</tr>
</tr>
<tr>
?? ?<th><input type="button" value="開始游戲" οnclick="play()" /></th>
?? ?<th colspan=2><input type="button" value="重新開始" οnclick="rePlay()" /></th>
</tr>
?
</table>
?
?
</body><!--主體標(biāo)簽結(jié)束-->
?
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: