本文介绍使用JavaScript开发网页版五子棋小游戏的完整实现方案。内容涵盖游戏初始化逻辑、随机先手判定、黑白棋子状态管理、胜负判定算法以及重新开始功能。通过Math.random()和addEventListener()等核心API，结合HTML表格布局与CSS样式，实现完整的交互体验。
本文分享了一个使用JavaScript编写的网页版五子棋小游戏的完整代码示例，供读者参考学习。
游戏的核心设计思路如下：
首先，利用Math.random()方法随机生成0到1之间的数值，以此决定由哪一方玩家先行。
其次，定义状态变量WFLAG和BFLAG来控制执棋颜色。当WFLAG为1且BFLAG为0时，代表执白子；当WFLAG为0且BFLAG为1时，代表执黑子。
接着，设置棋盘落子标志数组[I]。若为白子，则标志[I]赋值为1；若为黑子，则标志[I]赋值为2。当标志[I]不为0时，该位置禁止再次落子。
然后，编写胜负判断逻辑。当检测到横列、竖列或斜向连续出现5个相同颜色的棋子时，判定当前玩家获胜，并更新计分。
最后，实现重新开始功能，通过重新初始化所有相关变量来重置游戏状态。
具体实现所依赖的关键方法如下：
Math.random()：该方法用于生成一个大于等于0且小于1的随机浮点数。
window.addEventListener(type, "javascript语句", false)：这是事件监听器函数，包含三个参数。第一个参数指定监听的事件类型（如mousedown表示鼠标按下，keydown表示键盘按下等）；第二个参数是事件触发后执行的JavaScript代码；第三个参数为可选布尔值，默认为false。
<!doctype html>
<html>
<head>
<title>五子棋</title>
<meta charset="utf-8">
<style>
*{
padding:0;
margin:0;
}
#out{
width:610px;
height:610px;
border:5px solid;
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:1px solid;
text-align:center;
}
.wq{
width:40px;
height:40px;
border-radius:40px;
background-color:#999999;
margin-left:7px;
margin-top:0px;
}
.bq{
width:40px;
height:40px;
border-radius:40px;
background-color:#000000;
margin-left:7px;
margin-top:0px;
}
table tr{
height:50px;
}
table tr td{
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:"Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", 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;
}
img{
width:100%;
height:100%;
}
</style>
<script>
window.onload=function(){
var white=document.getElementById("white");
var black=document.getElementById("black");
var start=document.getElementById("start");
var out=document.getElementById("out");
var le1=0,le2=0,ri1=0,ri2=0;
var left1=document.getElementById("left1");
var left2=document.getElementById("left2");
var right1=document.getElementById("right1");
var right2=document.getElementById("right2");
var images=new Array("./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");
function goal(le2,ri2){
left1.src=images[le1];
left2.src=images[le2];
right1.src=images[ri1];
right2.src=images[ri2];
}
for(m=0;m<100;m++){
document.getElementsByTagName("td")[m].innerHTML='<div class="block" id="the'+m+'"></div>';
}
//flag=1,不能放棋子
var flag=new Array(100);
for(var j=0;j<100;j++){
flag[j]=0;
}
//1-白子先行，2-黑子先行
var wflag=0,bflag=0,lflag=0;
var turn=Math.floor(Math.random()*2);//0,1,如果是turn=0表示白子先行，=1表示黑子先行
start.onclick=function(){
if(turn+1==1){
wflag=1;
bflag=0;
}
else{
wflag=0;
bflag=1;
}
down(wflag,bflag);
lflag=1;
}
//重新开始
document.getElementById("return").onclick=kaishi;
function kaishi(){
for(m=0;m<100;m++){
document.getElementsByTagName("td")[m].innerHTML='<div class="block" id="the'+m+'"></div>';
}
out.style.cursor="default";
for(var j=0;j<100;j++){
flag[j]=0;//flag重置为0
}
white.innerHTML="";
black.innerHTML="";
wflag=0,bflag=0,lflag=0;
var turn=Math.floor(Math.random()*2);//0,1
start.onclick=function(){
if(turn+1==1){
wflag=1;
bflag=0;
}
else{
wflag=0;
bflag=1;
}
down(wflag,bflag);
lflag=1;
}
win=0;
}
function down(wflag,bflag){
//下棋
if(wflag==0 && bflag==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);
}
function happen(wflag,bflag){
if(wflag==0 && bflag==1){
//白子
fox("wq",wflag,bflag);
}
//黑子
else{
fox("bq",wflag,bflag);
}
}
function fox(color,wflag,bflag){
for(var i=0;i<100;i++){
downup(i,color,wflag,bflag);
}
function downup(i,color,wflag,bflag){
document.getElementById('the'+i).onclick=function(){
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);
}
}
}
}
//胜利
var win=0;
//正5子
function zheng(){
if(win==0){
for(var p=0;p<100;p++){
if(flag[p]==1 && flag[p+1]==1 && flag[p+2]==1 && flag[p+3]==1 && flag[p+4]==1){
var h=p+4
if(h!=10 && h!==20 && h!==30 && h!==40 && h!=50 && h!==60 && h!==70 && h!==80 && h!==90 && h!==100){
alert("白方获胜！");
win=1;
le2++;
goal(le2,ri2);
}
else{return false;}
}
else if(flag[p]==2 && flag[p+1]==2 && flag[p+2]==2 && flag[p+3]==2 && flag[p+4]==2){
var h=p+4
if(h!=10 && h!==20 && h!==30 && h!==40 && h!=50 && h!==60 && h!==70 && h!==80 && h!==90 && h!==100){
alert("黑方获胜！");
win=1;
ri2++;
goal(le2,ri2);
}
else{return false;}
}
}
}
else{return true;}
}
//竖5子
function shu(){
if(win==0){
for(var p=0;p<100;p++){
if(flag[p]==1 && flag[p+10]==1 && flag[p+20]==1 && flag[p+30]==1 && flag[p+40]==1){
alert("白方获胜！");
win=1;
le2++;
goal(le2,ri2);
}
else if(flag[p]==2 && flag[p+10]==2 && flag[p+20]==2 && flag[p+30]==2 && flag[p+40]==2){
alert("黑方获胜！");
win=1;
ri2++;
goal(le2,ri2);
}
}
}
else{return true;}
}
//左斜5子
function left(){
if(win==0){
for(var p=0;p<100;p++){
if(flag[p]==1 && flag[p+11]==1 && flag[p+22]==1 && flag[p+33]==1 && flag[p+44]==1){
alert("白方获胜！");
win=1;
le2++;
goal(le2,ri2);
}
else if(flag[p]==2 && flag[p+11]==2 && flag[p+22]==2 && flag[p+33]==2 && flag[p+44]==2){
alert("黑方获胜！");
win=1;
ri2++;
goal(le2,ri2);
}
}
}
else{return true;}
}
//右斜5子
function right(){
if(win==0){
for(var p=0;p<100;p++){
if(flag[p]==1 && flag[p+9]==1 && flag[p+18]==1 && flag[p+27]==1 && flag[p+36]==1){
alert("白方获胜！");
win=1;
le2++;
goal(le2,ri2);
}
else if(flag[p]==2 && flag[p+9]==2 && flag[p+18]==2 && flag[p+27]==2 && flag[p+36]==2){
alert("黑方获胜！");
win=1;
ri2++;
goal(le2,ri2);
}
}
}
else{return true;}
}
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>
<div id="play">
<button id="start">START</button>
<span id="white" style="margin-left:10px;"></span><span id="black" style="margin-left:110px;"></span>
</div>
<div id="history"><button id="return">重新开始</button></div>
<div class="tab" style="margin-left:0px;">
<div class="head"><img src="./images/baif.png" /></div>
<div class="score">
<div class="feshu" style="margin-left:0px;"><img src="./images/s0.png" id="left1" ></div>
<div class="feshu" style="margin-left:50px;"><img src="./images/s0.png" id="left2" ></div>
</div>
</div>
<div id="bi" style="position:absolute;width:18px;height:100px;margin-left:100px;margin-top:170px;"><img src="./images/bi.png" /></div>
<div class="tab" style="margin-left:120px;">
<div class="head"><img src="./images/heif.png" /></div>
<div class="score">
<div class="feshu" style="margin-left:0px;"><img src="./images/s0.png" id="right1" ></div>
<div class="feshu" style="margin-left:50px;"><img src="./images/s0.png" id="right2" ></div>
</div>
</div>
<div id="out">
<table width="600px" height="600px" border="1px" style="position:absolute;margin-top:4px;margin-left:4px;">
<tr height="50px"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr height="50px"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr height="50px"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr height="50px"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr height="50px"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr height="50px"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr height="50px"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr height="50px"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr height="50px"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr height="50px"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
</div>
</body>
</html>网页运行效果如下图所示：
第一步，打开网页加载游戏界面。
第二步，点击开始按钮，系统随机选择白方或黑方作为先手。
第三步，进行对弈。任何一方达成胜利条件后，系统将弹出提示框显示结果，并更新分数。
第四步，胜利后可点击按钮重新开始新一局游戏。
以上就是本文的全部内容，希望对读者的学习有所帮助，也欢迎大家继续支持本站。