javascript開發(fā)五指棋和圍棋

javascript開發(fā)五指棋和圍棋

javascript開發(fā)的五指棋和圍棋的規(guī)則如下：

游戲規(guī)則：點(diǎn)擊一下下面的方塊會(huì)變一個(gè)顏色，第二次點(diǎn)擊會(huì)變成另一種顏色，兩種顏色交替進(jìn)行，雙擊是悔棋！

1.html部分如下（用來布局顯示的頁面效果）：

? ? ? ? ? ? ? ? ? ? <h3>五指棋/圍棋</h3>

? ? ? ? ? ? ? ? ? ? <p>游戲規(guī)則:點(diǎn)擊一下下面的方塊會(huì)變一個(gè)顏色，第二次點(diǎn)擊會(huì)變成另一種顏色！兩種顏色交替進(jìn)行！雙擊是悔棋！</p>

? ? ? ? ? ? ? ? ? ? <div class="games_2_con" id="game_yue1">

? ? ? ? ? ? ? ? ? ? ? <table id="yue_2">

? ? ? ? ? ? ? ? ? ? ? ? ? <tr>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? ? ? ? ? ? ? ? ? ? </tr>

? ? ? ? ? ? ? ? ? ? ? ? ? <tr>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? ? ? ? ? ? ? ? ? ? </tr>

? ? ? ? ? ? ? ? ? ? ? ? ? <tr>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? ? ? ? ? ? ? ? ? ? </tr>

? ? ? ? ? ? ? ? ? ? ? ? ? <tr>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? ? ? ? ? ? ? ? ? ? </tr>

? ? ? ? ? ? ? ? ? ? ? ? ? <tr>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? ? ? ? ? ? ? ? ? ? </tr>

? ? ? ? ? ? ? ? ? ? ? ? ? <tr>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? ? ? ? ? ? ? ? ? ? </tr>

? ? ? ? ? ? ? ? ? ? ? ? ? <tr>

? ? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? ? ? ? ? ? ? ? ? ? </tr>

? ? ? ? ? ? ? ? ? ? ? ? ? <tr>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? ? ? ? ? ? ? ? ? ? </tr>

? ? ? ? ? ? ? ? ? ? ? ? ? <tr>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? ? ? ? ? ? ? ? ? ? </tr>

? ? ? ? ? ? ? ? ? ? ? ? ? <tr>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? ? ? ? ? ? ? ? ? ? </tr>

? ? ? ? ? ? ? ? ? ? ? ? ? <tr>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? ? ? ? ? ? ? ? ? ? </tr>

? ? ? ? ? ? ? ? ? ? ? ? ? <tr>

? ? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? ? ? ? ? ? ? ? ? ? </tr>

? ? ? ? ? ? ? ? ? ? ? ? ? <tr>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? ? ? ? ? ? ? ? ? ? </tr>

? ? ? ? ? ? ? ? ? ? ? ? ? <tr>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? ? ? ? ? ? ? ? ? ? </tr>

? ? ? ? ? ? ? ? ? ? ? ? ? <tr>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? ? ? ? ? ? ? ? ? ? </tr>

? ? ? ? ? ? ? ? ? ? ? ? ? <tr>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? ? ? ? ? ? ? ? ? ? </tr>

? ? ? ? ? ? ? ? ? ? ? ? ? <tr>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? ? ? ? ? ? ? ? ? ? </tr>

? ? ? ? ? ? ? ? ? ? ? ? ? <tr>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? ? ? ? ? ? ? ? ? ? </tr>

? ? ? ? ? ? ? ? ? ? ? ? ? <tr>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

? ? ? ? ? ? ? ? ? ? ? ? ? </tr>

? ? ? ? ? ? ? ? ? ? ? </table>

? ? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? </div>

這里用table表格進(jìn)行布局，可以根據(jù)實(shí)際的情況來增加或者減少表格的行或者列；

2.CSS部分代碼如下（用來設(shè)置html顯示出來的樣子）：

table { border-spacing:0; border-collapse:collapse;}

.games_2_con{width:100%;height:400px;border:1px dashed #808080;}

.games_2_con table tr{width:100%;height:20px;}

.games_2_con table td{width:20px;height:20px;border:1px solid #808080;}

這里用來給表格賦予樣式，也是能根據(jù)實(shí)際情況來給不同顏色、不同大小的展現(xiàn)樣式；

3.javascript/js部分代碼如下（用來寫五指棋/圍棋的功能邏輯）：

//五指棋/圍棋

var yue_table = document.getElementById("yue_2");

var yue_num = 1;

yue_table.onclick = function (e) {

? ? e.target.style.background = yue_num++ % 2 ? "#808080" : "#000";

};

yue_table.ondblclick = function (e) {

? ? e.target.style.background = "#fff";

};

這里賦予五指棋/圍棋的規(guī)則邏輯，如果需要設(shè)計(jì)更為復(fù)雜的規(guī)則的話，也都可以在這個(gè)的基礎(chǔ)上面進(jìn)行修改；

五指棋/圍棋的效果如下：

圖1

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容