欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2022年05月06日 16:05:11   作者:luck638  
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)版的五子棋游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

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

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

上代碼

<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)開始了,點(diǎn)擊“重新開始”開始新游戲");
?? ??? ?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("輸入位置有誤,請(qǐng)重新輸入!");
?? ??? ?return;
?? ?}
?
?? ?pos[0] = x - 1;
?? ?pos[1] = y - 1;
?
?? ?if (hasChess(pos[0], pos[1]))
?? ?{
?? ??? ?alert("該位置已有棋子,請(qǐng)重新輸入!");
?? ??? ?return;
?? ?}
?? ?/*/防止電腦調(diào)用setChess時(shí)自動(dòng)調(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>

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

相關(guān)文章

  • 微信小程序?qū)崿F(xiàn)蒙版彈出窗功能

    微信小程序?qū)崿F(xiàn)蒙版彈出窗功能

    這篇文章主要介紹了微信小程序?qū)崿F(xiàn)蒙版彈出窗功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-09-09
  • 如何通過js實(shí)現(xiàn)圖片預(yù)覽功能【附實(shí)例代碼】

    如何通過js實(shí)現(xiàn)圖片預(yù)覽功能【附實(shí)例代碼】

    如何通過js實(shí)現(xiàn)圖片預(yù)覽功能呢?下面小編就為大家?guī)硪黄胘s實(shí)現(xiàn)圖片預(yù)覽功能。給大家做個(gè)參考吧,一起跟隨小編過來看看
    2016-03-03
  • 根據(jù)服務(wù)器時(shí)間作為起始,顯示時(shí)鐘的小程序

    根據(jù)服務(wù)器時(shí)間作為起始,顯示時(shí)鐘的小程序

    一般的網(wǎng)頁(yè)都有這種功能:在頁(yè)面上動(dòng)態(tài)顯示當(dāng)前時(shí)間,這個(gè)的實(shí)現(xiàn)也很簡(jiǎn)單,基本上一行代碼就實(shí)現(xiàn)了
    2009-06-06
  • javascript與webservice的通信實(shí)現(xiàn)代碼

    javascript與webservice的通信實(shí)現(xiàn)代碼

    關(guān)于javascript與webservice的通信,從理論上來說實(shí)現(xiàn)應(yīng)該不難,主要是將服務(wù)器端的xml數(shù)據(jù)進(jìn)行一個(gè)簡(jiǎn)單的處理然后以一種適當(dāng)?shù)男问秸宫F(xiàn)成來。
    2010-12-12
  • Bootstrap CSS使用方法

    Bootstrap CSS使用方法

    這篇文章主要為大家詳細(xì)介紹了Bootstrap中CSS的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-12-12
  • Js瀏覽器全屏代碼(模仿按F11)

    Js瀏覽器全屏代碼(模仿按F11)

    Js瀏覽器全屏代碼(模仿按F11),需要的朋友可以參考下。
    2011-01-01
  • 微信小程序?qū)崿F(xiàn)簡(jiǎn)單購(gòu)物車小功能

    微信小程序?qū)崿F(xiàn)簡(jiǎn)單購(gòu)物車小功能

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡(jiǎn)單購(gòu)物車小功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-07-07
  • 教你使用webpack打包編譯TypeScript代碼

    教你使用webpack打包編譯TypeScript代碼

    TypeScript同樣也可以結(jié)合構(gòu)建工具一起使用,下邊以webpack為例介紹一下如何結(jié)合構(gòu)建工具使用TypeScript,本文分步驟給大家介紹的非常詳細(xì),需要的朋友參考下吧
    2021-06-06
  • JS前端攻堅(jiān)淺析instanceof實(shí)現(xiàn)原理

    JS前端攻堅(jiān)淺析instanceof實(shí)現(xiàn)原理

    這篇文章主要為大家介紹了JS前端攻堅(jiān)淺析instanceof實(shí)現(xiàn)原理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-12-12
  • javascript中的prototype屬性實(shí)例分析說明

    javascript中的prototype屬性實(shí)例分析說明

    一說到prototype很多人可能第一個(gè)想到的是著名的prototype.js框架,當(dāng)然我們今天說的不是它,而是Javascript中的prototype屬性,一般都被翻譯為“原型”。這是一個(gè)比較特殊的屬性,Javascript中的繼承一般都依賴這屬性實(shí)現(xiàn)。
    2010-08-08

最新評(píng)論