这篇文章主要讲解了原生js实现五子棋游戏的代码详解，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。
html:
<body> <h3>五子棋游戏</h3> <div id="box"> <div id="box01"></div> <div id="box02">haha</div> </div> </body>
css:
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
/*overflow: hidden;*/
margin-top: 10px;
text-align: center;
background-color: #C7C7C7;
}
#box{
position: relative;
border: 1px solid;
margin: 20px auto;
width: 546px;
height: 546px;
background-color: #C7C7C7;
}
#box .squre{
width: 40px;
height: 40px;
border: 1px solid;
float: left;
}
#box01 .squre:hover{
background-color: pink;
}
#box01{
position: absolute;
/*border: 1px solid;*/
margin: 0 auto;
width: 588px;
height: 588px;
/*background-color: pink;*/
/*opacity: 0.5;*/
top: -20px;
left: -20px;
}
#box01 .qz{
width: 30px;
height: 30px;
border: 1px solid #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;
}
</style>script:
<script type="text/javascript">
window.onload = function () {
let box = document.getElementById("box");
let box01 = document.getElementById("box01");
//画棋盘
let arr = new Array();
for (let i=0;i<13;i++){
arr[i] = new Array();
for (let j=0;j<13;j++){
arr[i][j] = document.createElement("div");
arr[i][j].className = "squre";
box.appendChild(arr[i][j]);
}
}
//画棋子
let arr01 = new Array();
for (let i=0;i<14;i++){
arr01[i] = new Array();
for (let j=0;j<14;j++){
arr01[i][j] = document.createElement("div");
arr01[i][j].className = "qz";
box01.appendChild(arr01[i][j]);
}
}
for (let m=0;m<14;m++){
for (let n=0;n<14;n++){
arr01[m][n].onclick = function () {
//下棋之前统计一下黑白棋的个数，以便黑白交换下棋
let count = 0;
for (let l = 0; l < 14; l++) {
for (let k = 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);
} else if (this.className == "qz" && count % 2 != 0 && this.style.backgroundColor == "") {
//下棋
this.style.backgroundColor = "white";
//引入判断函数
checkGame(m, n);
}
}
}
}
//判断哪方输赢,四个方向（横向、纵向、左斜、右斜）
//m是y轴，n是x轴
let a,b;
let flag = 0;
let box02 = document.getElementById("box02");
function checkGame(a,b) {
//判断横向
let qzColor = arr01[a][b].style.backgroundColor;
// console.log(qzColor);
for (let k=(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 (let k=(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;
}
}
//判断左斜
let ax = (a-4);//ax用来记录横坐标的变化
for (let k=(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 (let k=(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++;
}
}
}
</script>看完上述内容，是不是对原生js实现五子棋游戏的代码详解有进一步的了解，如果还想学习更多内容，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
