JavaScript實(shí)現(xiàn)五子棋游戲的方法詳解
這篇文章將為大家詳細(xì)講解有關(guān)JavaScript實(shí)現(xiàn)五子棋游戲的方法詳解，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。
專注于為中小企業(yè)提供成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)老邊免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了成百上千家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
效果圖：
五子棋素材圖：
代碼：
<!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)下過(guò)棋了
if(this.style.backgroundImage.indexOf('gif') >= 0){
alert('這里已經(jīng)下過(guò)棋了');
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)重新開(kāi)始');
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>今天不知道怎么搞的，寫(xiě)博客的時(shí)候上傳不了圖片，還好我機(jī)智，把圖片存到GitHub上，好了，來(lái)講代碼。首先，我必須先說(shuō)明一下，我覺(jué)得代碼還有很大的優(yōu)化空間，感興趣的同學(xué)可以繼續(xù)研究。
實(shí)現(xiàn)思路：首先創(chuàng)建一個(gè)表格，共15行，15列，把背景改成棋盤(pán)的圖片，給這個(gè)table添加onclick事件，這里使用到了事件委托，事件委托我在之前的文章有介紹過(guò)，感興趣的同學(xué)可以去看看。去調(diào)用xiaQi函數(shù)，在下棋函數(shù)中，先判斷選擇的位置是否已經(jīng)下過(guò)棋了，使用閉包獲取下一個(gè)棋子的顏色，然后調(diào)用judge函數(shù)，在函數(shù)中先獲取當(dāng)前棋子所下的位置，遍歷255個(gè)棋格，看看是否能贏，判斷是否五子連珠，如果有則游戲結(jié)束。
關(guān)于“JavaScript實(shí)現(xiàn)五子棋游戲的方法詳解”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。
網(wǎng)頁(yè)題目：JavaScript實(shí)現(xiàn)五子棋游戲的方法詳解
URL地址：http://www.chinadenli.net/article24/gegjce.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、面包屑導(dǎo)航、微信小程序、App開(kāi)發(fā)、網(wǎng)站營(yíng)銷、網(wǎng)站收錄
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
- 中小企業(yè)品牌網(wǎng)站制作與塑造 2021-12-06
- 集團(tuán)型網(wǎng)站建設(shè)品牌網(wǎng)站制作設(shè)計(jì) 2020-12-03
- 品牌網(wǎng)站制作常見(jiàn)的布局方式！ 2022-05-11
- 湛江品牌網(wǎng)站制作：做好品牌網(wǎng)站制作方案有哪些要點(diǎn)？ 2021-12-23
- 保定品牌網(wǎng)站制作：如何做好一個(gè)成功的品牌網(wǎng)站？ 2021-08-27
- 高端品牌網(wǎng)站制作離不開(kāi)獨(dú)特新穎的設(shè)計(jì) 2016-10-30
- 周口品牌網(wǎng)站建設(shè)：在品牌網(wǎng)站制作的過(guò)程中有哪些值得注意的問(wèn)題？ 2021-09-10
- 品牌網(wǎng)站制作常見(jiàn)的布局方式 2022-03-22
- 品牌網(wǎng)站制作好方法好步驟？ 2021-06-03
- 品牌網(wǎng)站制作應(yīng)該體現(xiàn)企業(yè)文化和個(gè)性 2021-08-12
- 品牌網(wǎng)站制作的價(jià)格為什么那么高呢？ 2016-10-28
- 高端品牌網(wǎng)站制作策劃方案 2021-10-09