js实现网页五子棋进阶版

第js实现网页五子棋进阶版本文实例为大家分享了js实现网页五子棋进阶版的具体代码，供大家参考，具体内容如下

对比上一版本增加了音效和计时器两个模块。

代码如下

!doctypehtml

html

head

metacharset="utf-8"

title五子棋/title

!--

scriptsrc="/jquery/1.10.2/jquery.min.js"/--

/head

!--css--

style

body{

width:800px;

}

#beginGameBtn{

background:url(startImg.png);

width:80px;

height:25px;

background-size:cover;

float:left;

}

#restartGameBtn{

background:url(restartImg.png);

width:80px;

height:25px;

background-size:cover;

float:right;

}

td{

width:50px;

height:50px;

margin:0px;

padding:0px

}

#timer{

background:#000;

float:left;

width:150px;

margin:30px;

color:#00ff00;

font-weight:bold;

border-radius:30px;

text-align:center;

font-size:20px;

}

/style

!--js--

scripttype="text/javascript"

varpresentChess=1;//当前执棋方，1代表白旗，0代表黑棋

varbeginFlag=0;//0代表未开始游戏，1代表已开始游戏

varmsg;

varchessboard=newArray(10);//记录下棋情况

varplayChessSound;

vartimerM;//计时器分

vartimerS;//计时器秒

varinterval;

for(vari=0;ii++){

chessboard[i]=newArray(10);

//初始化下棋情况，全为0

for(varj=0;jj++){

chessboard[i][j]=-1;

}

}

window.onload=function(){

msg=document.getElementById('msg')

playChessSound=document.getElementById("playChessSound")

timerM=document.getElementById('timerM')

timerS=document.getElementById('timerS')

timerS.innerText=0;

timerM.innerText=0;

}

//返回三者最小值

functionmin(x,y,z){

return(xyy:x)zz:(xyy:x)

}

//计时函数

functionsetTimer(){

varm=parseInt(timerM.innerText);

vars=parseInt(timerS.innerText);

if(s=59){

timerS.innerText=0;

timerM.innerText=m+1;

}elsetimerS.innerText=s+1;

}

functionbeginGame(){

//beginFlag=1;

//绑定棋盘下棋事件

for(vari=0;i100;i++){

document.getElementsByTagName('td')[i].onclick=palyChess;

}

interval=setInterval(setTimer,1000);

}

functionrestartGame(){

for(vari=0;i100;i++){

//document.getElementsByTagName('td')[i].onclick='';

document.getElementsByTagName('td')[i].innerHTML='';//清空棋子

timerS.innerText=0;

timerM.innerText=0;

}

for(vari=0;ii++){//清空棋盘记录

for(varj=0;jj++){

chessboard[i][j]=-1;

}

}

//计时器部分

clearInterval(interval)

interval=setInterval(setTimer,1000);

}

//下棋

functionpalyChess(){

//如果表格此处已经下了棋，则返回不作操作

text=this.innerHTML

if(text!='')return;

//放置棋子图片得字符串

varbqiStr="imgsrc=\"bqiImg.jpg\"width=\"100%\"

height=\"90%\"

alt=\"\"/"

varhqiStr="imgsrc=\"hqiImg.jpg\"width=\"100%\"height=\"90%\"alt=\"\"/"

//console.log('1')

if(presentChess==1){

this.innerHTML=bqiStr;

chessboard[this.parentNode.rowIndex][this.cellIndex]=1;

//setTimeout('',3000);

if(ifWin(this.parentNode.rowIndex,this.cellIndex)){

if(presentChess==1)alert('白棋方获胜');

elsealert('黑棋方获胜');

clearInterval(interval);

}

presentChess=0;

msg.innerHTML="黑棋";

playChessSound.play();

}else{

this.innerHTML=hqiStr;

chessboard[this.parentNode.rowIndex][this.cellIndex]=0;

if(ifWin(this.parentNode.rowIndex,this.cellIndex)){

if(presentChess==1)alert('白棋方获胜');

elsealert('黑棋方获胜');

clearInterval(interval);

}

presentChess=1;

msg.innerHTML="白棋";

playChessSound.play();

}

}

//判断是否胜利,h行，l列

functionifWin(h,l){

//varx=this.parentNode.rowIndex;

//vary=this.cellIndex-1;

vars=1;//记录连子个数

//判断竖直方向

for(vari=1;i=(h44:h);i++){

if(chessboard[h-i][l]==presentChess){

s++;

}elsebreak;

}

for(vari=1;i=((9-h)44:(9-h));i++){

if(chessboard[h+i][l]==presentChess){

s++;

}elsebreak;

}

if(s=5){

return1;

}

s=1;

//判断水平方向

for(vari=1;i=(l44:l);i++){

if(chessboard[h][l-i]==presentChess){

s++;

}elsebreak;

}

for(vari=1;i=((9-l)44:(9-l));i++){

if(chessboard[h][l+i]==presentChess){

s++;

}elsebreak;

}

if(s=5){

return1;

}

s=1;

//varmin=(h44:h)ll:(h44:h);

//判断左上、右下斜线方向

for(vari=1;i=min(4,l,h);i++){//取较小值作为移动半径

if(chessboard[h-i][l-i]==presentChess){

s++;

}elsebreak;

}

for(vari=1;i=min(4,9-l,9-h);i++){

if(chessboard[h+i][l+i]==presentChess){

s++;

}elsebreak;

}

if(s=5){

return1;

}

s=1;

//判断右上、左下斜线方向

for(vari=1;i=min(4,9-l,h);i++){//取较小值作为移动半径

if(chessboard[h-i][l+i]==presentChess){

s++;

}elsebreak;

}

for(vari=1;i=min(4,l,9-h);i++){

if(chessboard[h+i][l-i]==presentChess){

s++;

}elsebreak;

}

if(s=5){

return1;

}

return0;

}

/script

body

!--顶部--

div

div

!--开始游戏按钮--

buttonid="beginGameBtn"name="beginGameBtn"/button

!--重新开始游戏按钮--

buttonid="restartGameBtn"name="restartGameBtn"/button

/div

div执子方：labelid="msg"name="msg"白棋/label/div

/div

!--音效控制--

audioid="playChessSound"

sourcesrc="5390.mp3"

/audio

!--下部--

div

!--左边计时器--

divid="timer"style=""

比赛已进行br

span

spanid="timerM"/span分

spanid="timerS"/span秒

/span

/div

div

!--表格构成棋盘--

tableborder="5"

tr

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

/tr

tr

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

/tr

tr

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

/tr

tr

td/td

td/td

td/td

td/td

td/td

td/td

td/td

td/td