原生js实现五子棋游戏
本文实例为大家分享了js实现五子棋游戏的具体代码,供大家参考,具体内容如下
html:
五子棋游戏
本文实例为大家分享了js实现五子棋游戏的具体代码,供大家参考,具体内容如下
html:
五子棋游戏
css:
*{ margin:0; padding:0; } body{ /*overflow:hidden;*/ margin-top:10px; text-align:center; background-color:#C7C7C7; } #box{ position:relative; border:1pxsolid; margin:20pxauto; width:546px; height:546px; background-color:#C7C7C7; } #box.squre{ width:40px; height:40px; border:1pxsolid; float:left; } #box01.squre:hover{ background-color:pink; } #box01{ position:absolute; /*border:1pxsolid;*/ margin:0auto; width:588px; height:588px; /*background-color:pink;*/ /*opacity:0.5;*/ top:-20px; left:-20px; } #box01.qz{ width:30px; height:30px; border:1pxsolid#C7C7C7; float:left; border-radius:50%; margin:5px; } #box01.qz:hover{ background-color:pink; } #box02{ position:absolute; line-height:546px; font-size:50px; color:black; width:100%; background-color:pink; display:none; opacity:0.6; }
script:
window.onload=function(){ letbox=document.getElementById("box"); letbox01=document.getElementById("box01"); //画棋盘 letarr=newArray(); for(leti=0;i<13;i++){ arr[i]=newArray(); for(letj=0;j<13;j++){ arr[i][j]=document.createElement("div"); arr[i][j].className="squre"; box.appendChild(arr[i][j]); } } //画棋子 letarr01=newArray(); for(leti=0;i<14;i++){ arr01[i]=newArray(); for(letj=0;j<14;j++){ arr01[i][j]=document.createElement("div"); arr01[i][j].className="qz"; box01.appendChild(arr01[i][j]); } } for(letm=0;m<14;m++){ for(letn=0;n<14;n++){ arr01[m][n].onclick=function(){ //下棋之前统计一下黑白棋的个数,以便黑白交换下棋 letcount=0; for(letl=0;l<14;l++){ for(letk=0;k<14;k++){ if(arr01[l][k].style.backgroundColor!=""){ count++; } } } //console.log(count); if(this.className=="qz"&&count%2==0&&this.style.backgroundColor==""){ //下棋 this.style.backgroundColor="black"; //引入判断函数 //console.log(m,n); checkGame(m,n); }elseif(this.className=="qz"&&count%2!=0&&this.style.backgroundColor==""){ //下棋 this.style.backgroundColor="white"; //引入判断函数 checkGame(m,n); } } } } //判断哪方输赢,四个方向(横向、纵向、左斜、右斜) //m是y轴,n是x轴 leta,b; letflag=0; letbox02=document.getElementById("box02"); functioncheckGame(a,b){ //判断横向 letqzColor=arr01[a][b].style.backgroundColor; //console.log(qzColor); for(letk=(b-4);k<=(b+4);k++){ if(k>=0&&k<14){ if(qzColor==arr01[a][k].style.backgroundColor&&arr01[a][k].style.backgroundColor!=""){ flag++; if(flag==5){ //alert(qzColor+"win!!"); box02.innerHTML=qzColor+"win!!"; box02.style.display="block"; } }else{ flag=0; } }else{ flag=0; } } //判断纵向 for(letk=(a-4);k<=(a+4);k++){ if(k>=0&&k<14){ if(qzColor==arr01[k][b].style.backgroundColor&&arr01[k][b].style.backgroundColor!=""){ flag++; if(flag==5){ //alert(qzColor+"win!!"); box02.innerHTML=qzColor+"win!!"; box02.style.display="block"; } }else{ flag=0; } }else{ flag=0; } } //判断左斜 letax=(a-4);//ax用来记录横坐标的变化 for(letk=(b-4);k<=(b+4);k++){ if(k>=0&&k<14&&ax>=0&&ax<14){ if(qzColor==arr01[ax][k].style.backgroundColor&&arr01[ax][k].style.backgroundColor!=""){ flag++; if(flag==5){ //alert(qzColor+"win!!"); box02.innerHTML=qzColor+"win!!"; box02.style.display="block"; } }else{ flag=0; } }else{ flag=0; } ax++; } //判断右斜 bx=a-4; for(letk=(b+4);k>=(b-4);k--){ if(k>=0&&k<14&&bx>=0&&bx<14){ if(qzColor==arr01[bx][k].style.backgroundColor&&arr01[bx][k].style.backgroundColor!=""){ flag++; if(flag==5){ //alert(qzColor+"win!!"); box02.innerHTML=qzColor+"win!!"; box02.style.display="block"; } }else{ flag=0; } }else{ flag=0; } bx++; } } }
更多有趣的经典小游戏实现专题,分享给大家:
C++经典小游戏汇总
python经典小游戏汇总
python俄罗斯方块游戏集合
JavaScript经典游戏玩不停
javascript经典小游戏汇总
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。