第JavaScript實現網頁五子棋小游戲本文實例為大家分享了JavaScript實現網頁五子棋小游戲的具體代碼，供大家參考，具體內容如下

設計思路如下：

1.先采用的Math.random（）方法決定哪一方先行;

2.設置變量WFLAG=1，BFLAG=0時執白子，WFLAG=0，BFLAG=1時執黑子;

3.設置標志[I]中，當為白子時標志[I]=1，當為黑子時標志[I]=2，且標志[I]不為0時不能落子;

4.設置判斷語句，當列5子時，豎5子，斜5子時為勝利，并計分;

5.重新開始-重新初始化變量。

采用的方法如下：

1.Math.random（）：隨機產生0~1的隨機數，含0但不包括1;

2.window.addEventListener（type，javascript語句，false）：監聽器，三個參數，第一個參數為所要監聽的事件的類型（mousedown-鼠標按下，keydown-鍵盤按下等事件），第二個參數為發生事件后所要執行的JavaScript的語句，第三個參數可選，默認為假;

!doctypehtml

html

head

title五子棋/title

metacharset="utf-8"

style

padding:0;

margin:0;

}

#out{

width:610px;

height:610px;

border:5pxsolid;

position:absolute;

margin-left:300px;

margin-top:100px;

}

#play{

width:200px;

height:80px;

position:absolute;

margin-left:500px;

margin-top:0px;

}

#start{

width:100px;

height:45px;

border-radius:25px;

position:absolute;

margin-top:0px;

margin-left:50px;

font-size:20px;

background-color:#CCFF66;

}

span{

width:80px;

height:30px;

position:absolute;

margin-top:50px;

border:1pxsolid;

text-align:center;

}

width:40px;

height:40px;

border-radius:40px;

background-color:#999999;

margin-left:7px;

margin-top:0px;

}

width:40px;

height:40px;

border-radius:40px;

background-color:#000000;

margin-left:7px;

margin-top:0px;

}

tabletr{

height:50px;

}

tabletrtd{

width:50px;

height:50px;

}

.block{

width:50px;

height:50px;

}

#history{

width:100px;

height:50px;

position:absolute;

margin-top:40px;

margin-left:720px;

}

#return{

width:100px;

height:50px;

background-color:#999900;

border-radius:26px;

font-size:17px;

font-family:"LucidaConsole","LucidaSansTypewriter",Monaco,"CourierNew",monospace;

font-style:oblique;

}

.tab{

width:100px;

height:151px;

position:absolute;

margin-top:120px;

}

.head{

width:100px;

height:50px;

position:absolute;

margin-top:0px;

}

.score{

width:100px;

height:100px;

position:absolute;

margin-top:51px;

}

.feshu{

width:50px;

height:100px;

position:absolute;

margin-top:0px;

}

width:100%;

height:100%;

}

/style

script

window.onload=function(){

varwhite=document.getElementById("white");

varblack=document.getElementById("black");

varstart=document.getElementById("start");

varout=document.getElementById("out");

varle1=0,le2=0,ri1=0,ri2=0;

varleft1=document.getElementById("left1");

varleft2=document.getElementById("left2");

varright1=document.getElementById("right1");

varright2=document.getElementById("right2");

varimages=newArray("./images/s0.png","./images/s1.png","./images/s2.png","./images/s3.png","./images/s4.png","./images/s5.png","./images/s6.png","./images/s7.png","./images/s8.png","./images/s9.png");

functiongoal(le2,ri2){

left1.src=images[le1];

left2.src=images[le2];

right1.src=images[ri1];

right2.src=images[ri2];

for(m=0;mm++){

document.getElementsByTagName("td")[m].innerHTML='divid="the'+m+'"/div

}

//flag=1,不能放棋子

varflag=newArray(100);

for(varj=0;jj++){

flag[j]=0;

}

//1-白子先行，2-黑子先行

varwflag=0,bflag=0,lflag=0;

varturn=Math.floor(Math.random()*2);//0,1,如果是turn=0表示白子先行，=1表示黑子先行

start.unction(){

if(turn+1==1){

wflag=1;

bflag=0;

}

else{

wflag=0;

bflag=1;

}

down(wflag,bflag);

lflag=1;

}

//重新開始

document.getElementById("return").aishi;

functionkaishi(){

for(m=0;mm++){

document.getElementsByTagName("td")[m].innerHTML='divid="the'+m+'"/div

}

out.style.cursor="default";

for(varj=0;jj++){

flag[j]=0;//flag重置為0

}

white.innerHTML="";

black.innerHTML="";

wflag=0,bflag=0,lflag=0;

varturn=Math.floor(Math.random()*2);//0,1

start.unction(){

if(turn+1==1){

wflag=1;

bflag=0;

}

else{

wflag=0;

bflag=1;

}

down(wflag,bflag);

lflag=1;

}

win=0;

functiondown(wflag,bflag){

//下棋

if(wflag==0bflag==1){

black.innerHTML="黑方執子";

white.innerHTML="白方等待";

wflag=1;

bflag=0;

out.style.cursor="url(./images/cursor1.cur),auto";

}

else{

white.innerHTML="白方執子";

black.innerHTML="黑方等待";

wflag=0;

bflag=1;

out.style.cursor="url(./images/cursor2.cur),auto";

}

happen(wflag,bflag);

functionhappen(wflag,bflag){

if(wflag==0bflag==1){

//白子

fox("wq",wflag,bflag);

}

//黑子

else{

fox("bq",wflag,bflag);

}

}

functionfox(color,wflag,bflag){

for(vari=0;ii++){

downup(i,color,wflag,bflag);

}

functiondownup(i,color,wflag,bflag){

document.getElementById('the'+i).unction(){

if(flag[i]!=0){alert("禁止放子!");}

else{

document.getElementById('the'+i).className=color;

if(color=="wq"){

flag[i]=1;

}

else{flag[i]=2;}

down(wflag,bflag);

}

}

}

}

varwin=0;

//正5子

functionzheng(){

if(win==0){

for(varp=0;pp++){

if(flag[p]==1flag[p+1]==1flag[p+2]==1flag[p+3]==1flag[p+4]==1){

varh=p+4

if(h!=10h!==20h!==30h!==40h!=50h!==60h!==70h!==80h!==90h!==100){

alert("白方獲勝！");

win=1;

le2++;

goal(le2,ri2);

}

else{returnfalse;}

}

elseif(flag[p]==2flag[p+1]==2flag[p+2]==2flag[p+3]==2flag[p+4]==2){

varh=p+4

if(h!=10h!==20h!==30h!==40h!=50h!==60h!==70h!==80h!==90h!==100){

alert("黑方獲勝！");

win=1;

ri2++;

goal(le2,ri2);

}

else{returnfalse;}

}

}

}

else{returntrue;}

//豎5子

functionshu(){

if(win==0){

for(varp=0;pp++){

if(flag[p]==1flag[p+10]==1flag[p+20]==1flag[p+30]==1flag[p+40]==1){

alert("白方獲勝！");

win=1;

le2++;

goal(le2,ri2);

}

elseif(flag[p]==2flag[p+10]==2flag[p+20]==2flag[p+30]==2flag[p+40]==2){

alert("黑方獲勝！");

win=1;

ri2++;

goal(le2,ri2);

}

}

}

else{returntrue;}

}

//左斜5子

functionleft(){

if(win==0){

for(varp=0;pp++){

if(flag[p]==1flag[p+11]==1flag[p+22]==1flag[p+33]==1flag[p+44]==1){

alert("白方獲勝！");

win=1;

le2++;

goal(le2,ri2);

}

elseif(flag[p]==2flag[p+11]==2flag[p+22]==2flag[p+33]==2flag[p+44]==2){

alert("黑方獲勝！");

win=1;

ri2++;

goal(le2,ri2);

}

}

}

else{returntrue;}

}

//右斜5子

functionright(){

if(win==0){

for(varp=0;pp++){

if(flag[p]==1flag[p+9]==1flag[p+18]==1flag[p+27]==1flag[p+36]==1){

alert("白方獲勝！");

win=1;

le2++;

goal(le2,ri2);

}

elseif(flag[p]==2flag[p+9]==2flag[p+18]==2flag[p+27]==2flag[p+36]==2){

alert("黑方獲勝！");

win=1;

ri2++;

goal(le2,ri2);

}

}

}

else{returntrue;}

}

window.addEventListener('mousedown',zheng,false);

window.addEventListener('mousedown',shu,false);

window.addEventListener('mousedown',left,false);

window.addEventListener('mousedown',right,false);

window.addEventListener('mousedown',that,false);

/script

/head

body

divid="play"

buttonid="start"START/button

spanid="white"/spanspanid="black"/span

/div

divid="history"buttonid="return"重新開始/button/div

div

divimgsrc="./images/baif.png"http://div

div

divimgsrc="./images/s0.png"id="left1"/div

divimgsrc="./images/s0.png"id="left2"/div

/div

/div

divid="bi"imgsrc="./images/bi.png"http://div

div

divimgsrc="./images/heif.png"http://div

div

divimgsrc="./images/s0.png"id="right1"/div

divimgsrc="./images/s0.png"id="right2"/div

/div

/div

divid="out"

tablewidth="600px"height="600px"border="1px"

trheight="50px"td/tdtd/tdtd/tdtd/tdtd/tdtd/tdtd/tdtd/tdtd/tdtd/td/tr

trheight="50px"td/t