JavaScript實(shí)現(xiàn)五子棋游戲的方法詳解
更新時(shí)間：2019年07月08日 09:53:46 作者：webbc
這篇文章主要介紹了JavaScript實(shí)現(xiàn)五子棋游戲的方法,結(jié)合實(shí)例形式詳細(xì)分析了javascript實(shí)現(xiàn)五子棋游戲的具體步驟、原理與相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了JavaScript實(shí)現(xiàn)五子棋游戲的方法。分享給大家供大家參考，具體如下：
最近半個(gè)月一直在看深入的學(xué)習(xí)JavaScript，里面有很多重點(diǎn)和難點(diǎn)，比如閉包、詞法分析、面向?qū)ο蟮?。今天給大家分享一個(gè)由JavaScript編寫的五子棋游戲，主要用到JavaScript的面向?qū)ο蟆⑹录?、閉包等知識(shí)，還是挺有分量的，正好可以檢測(cè)學(xué)習(xí)的成果。
老規(guī)矩，先上圖，再說(shuō)話。
效果圖：
五子棋素材圖：
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>HTML五子棋游戲</title>
<link rel="stylesheet" href="">
<script>
//五子棋的構(gòu)造函數(shù)
function Game(){
this.isWin = false;//游戲是否結(jié)束標(biāo)志
}
//閉包計(jì)棋器
Game.cnt = (function(){
var curr = 'black';
return function(){
var tmp = curr;
if(curr == 'black'){
curr = 'white';
}else{
curr = 'black';
}
return tmp;
}
})();
//下棋函數(shù)
Game.xiaQi = function(g){
//判斷選擇的位置是否已經(jīng)下過棋了
if(this.style.backgroundImage.indexOf('gif') >= 0){
alert('這里已經(jīng)下過棋了');
return ;
}
var color = Game.cnt();
this.style.backgroundImage = "url(./images/"+color+".gif)";
Game.judge.call(this,color,g);//判定函數(shù)
}
//判定游戲是否結(jié)束
Game.judge = function(color,g){
var tds = document.getElementsByTagName('td');
//獲取當(dāng)前棋子所下的位置
var curr = {x:this.cellIndex,y:this.parentElement.rowIndex,color:color};
var line = ['','','',''];//表示當(dāng)前棋子的橫、豎、左斜、右斜方向的棋子
//遍歷255個(gè)棋格，看看是否能贏
for(var i=0,tmp={};i<tds.length;i++){
tmp = {x:tds[i].cellIndex,y:tds[i].parentElement.rowIndex,color:'0'};
if(tds[i].style.backgroundImage.indexOf('black') >= 0){
tmp.color = 'b';
}else if(tds[i].style.backgroundImage.indexOf('white') >= 0){
tmp.color = 'w';
}
//獲取當(dāng)前棋子的橫向其他棋子的坐落情況
if(curr.y == tmp.y){
line[0] += tmp.color;
}
//獲取當(dāng)前棋子的豎向其他棋子的坐落情況
if(curr.x == tmp.x){
line[1] += tmp.color;
}
//獲取當(dāng)前棋子的左斜方向其他棋子的坐落情況
if(curr.x+curr.y == tmp.x+tmp.y){
line[2] += tmp.color;
}
//獲取當(dāng)前棋子的右斜方向其他棋子的坐落情況
if(curr.x-tmp.x == curr.y-tmp.y){
line[3] += tmp.color;
}
}
color = color == 'black'?'bbbbb':'wwwww';
//判斷是否五子連珠
for(var i=0;i<line.length;i++){
if(line[i].indexOf(color) >=0){
alert('你贏了');
g.isWin = true;
break;
}
}
}
//頁(yè)面加載完成
window.onload = function(){
var g = new Game();
document.getElementsByTagName('table')[0].onclick = function(ev){
//判斷是否已經(jīng)贏得游戲
if(g.isWin){
alert('此局已結(jié)束，請(qǐng)重新開始');
return;
}
Game.xiaQi.call(ev.srcElement,g);//下棋
}
}
</script>
</head>
<style>
table{
border-collapse:collapse;
width:540px;
height:540px;
border:solid 1px blue;
margin:auto;
background-image: url('./images/background.gif');
}
</style>
<body>
<table>
<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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</tr>
</table>
</body>
</html>
今天不知道怎么搞的，寫博客的時(shí)候上傳不了圖片，還好我機(jī)智，把圖片存到GitHub上，好了，來(lái)講代碼。首先，我必須先說(shuō)明一下，我覺得代碼還有很大的優(yōu)化空間，感興趣的同學(xué)可以繼續(xù)研究。
實(shí)現(xiàn)思路：首先創(chuàng)建一個(gè)表格，共15行，15列，把背景改成棋盤的圖片，給這個(gè)table添加onclick事件，這里使用到了事件委托，事件委托我在之前的文章有介紹過，感興趣的同學(xué)可以去看看。去調(diào)用xiaQi函數(shù)，在下棋函數(shù)中，先判斷選擇的位置是否已經(jīng)下過棋了，使用閉包獲取下一個(gè)棋子的顏色，然后調(diào)用judge函數(shù)，在函數(shù)中先獲取當(dāng)前棋子所下的位置，遍歷255個(gè)棋格，看看是否能贏，判斷是否五子連珠，如果有則游戲結(jié)束。
PS：這里再為大家推薦另一款本站的js版五子棋游戲供大家參考（其AI相對(duì)簡(jiǎn)單一些）
在線五子棋游戲：
http://tools.jb51.net/games/wuziqi
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》及《JavaScript遍歷算法與技巧總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- 純JS實(shí)現(xiàn)五子棋游戲兼容各瀏覽器(附源碼)
- 基于JavaScript實(shí)現(xiàn)五子棋游戲
- Javascript和HTML5利用canvas構(gòu)建Web五子棋游戲?qū)崿F(xiàn)算法
- 原生JS+Canvas實(shí)現(xiàn)五子棋游戲?qū)嵗?/a>
- JS canvas繪制五子棋的棋盤
- H5+C3+JS實(shí)現(xiàn)五子棋游戲（AI篇）
- javascript 初學(xué)教程及五子棋小程序的簡(jiǎn)單實(shí)現(xiàn)
- H5+C3+JS實(shí)現(xiàn)雙人對(duì)戰(zhàn)五子棋游戲（UI篇）
- 原生JS+Canvas實(shí)現(xiàn)五子棋游戲
- js+canvas實(shí)現(xiàn)五子棋小游戲
相關(guān)文章
利用原生JS與jQuery實(shí)現(xiàn)數(shù)字線性變化的動(dòng)畫
最近在工作中遇到一個(gè)需要，需要將數(shù)字實(shí)現(xiàn)遞增的動(dòng)態(tài)顯示，從網(wǎng)上找了相關(guān)的資料發(fā)現(xiàn)利用原生JS與jQuery都可以實(shí)現(xiàn)，suoyi8下面這篇文章主要給大家介紹了利用原生JS與jQuery實(shí)現(xiàn)數(shù)字線性變化動(dòng)畫的相關(guān)資料，需要的朋友可以參考下。2017-02-02
JS的location.href跳出框架打開新頁(yè)面的方法
登錄頁(yè)面在框架內(nèi)打開，想讓它直接跳出框架打開（這里不是打開新窗口），終于在網(wǎng)上找到了辦法，下面分享給大家2014-09-09
jQuery中 DOM節(jié)點(diǎn)操作方法大全
本文給大家介紹了jQuery中 DOM節(jié)點(diǎn)操作方法大全，感興趣的朋友一起看看吧2017-10-10
這篇文章主要介紹了layui的form.on的使用,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07
javascript實(shí)現(xiàn)checkBox的全選，反選與賦值
這篇文章主要介紹了javascript實(shí)現(xiàn)checkBox的全選，反選與賦值的方法，以實(shí)例形式詳細(xì)分析了實(shí)現(xiàn)的思路及對(duì)應(yīng)的html與js代碼的實(shí)現(xiàn)過程2015-03-03
javascript break指定標(biāo)簽打破多層循環(huán)示例
break的語(yǔ)法有兩種break; 和 break label;下面為大家介紹下直接break掉整個(gè)循環(huán)嵌套示例2014-01-01
這篇文章主要介紹了最常用的三款JS時(shí)間特效，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
Javascript控制input輸入時(shí)間格式的方法
這篇文章主要介紹了Javascript控制input輸入時(shí)間格式的方法,涉及鼠標(biāo)事件及正則表達(dá)式的靈活應(yīng)用,需要的朋友可以參考下2015-01-01
這篇文章主要為大家詳細(xì)介紹了swiper實(shí)現(xiàn)異形輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
JavaScript進(jìn)階之前端文件上傳和下載示例詳解
這篇文章主要為大家介紹了JavaScript進(jìn)階之前端文件上傳和下載示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09