五子棋js

最新推荐文章于 2024-04-24 13:58:19 发布

原创最新推荐文章于 2024-04-24 13:58:19 发布 · 135 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #html5 #javascript

本文详细介绍了如何通过JavaScript实现四种棋局胜利条件的检测，包括水平线、垂直线、右斜线和左斜线。通过levelLineWin、verticalLineWin、rightDiagonalLineWin和leftDiagonalLineWin函数，展示了在围棋游戏中判断玩家是否赢得比赛的技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

        }
    }
}

}
// 检查获胜的函数 ---- 垂直直线判断
function verticalLineWin(arr){
if(arr.length>=5) {
let winArr=[];
for(let i=0; i<arr.length; i++) {
winArr=[];
winArr.push(arr[i])
for(let j=0; j<arr.length;j++) {
if(arr[i]+15arr[j] || arr[i]+30arr[j] || arr[i]+45arr[j] || arr[i]+60arr[j]) {
winArr.push(arr[j])
}
}
// 有5个棋子连续的时候说明获胜
if(winArr.length==5){
return true;

        }
    }
}

}
// 检查获胜的函数 ---- 右斜判断
function rightDiagonalLineWin(arr){
if(arr.length>=5) {
let winArr=[];
for(let i=0; i<arr.length; i++) {
winArr=[];
winArr.push(arr[i])
for(let j=0; j<arr.length;j++) {
if(arr[i]+16arr[j] || arr[i]+32arr[j] || arr[i]+48arr[j] || arr[i]+64arr[j]) {
winArr.push(arr[j])
}
}
// 有5个棋子连续的时候说明获胜
if(winArr.length==5){
return true;

        }
    }
}

}
// 检查获胜的函数 ---- 左斜判断
function leftDiagonalLineWin(arr){
if(arr.length>=5) {
let winArr=[];
for(let i=0; i<arr.length; i++) {
winArr=[];
winArr.push(arr[i])
for(let j=0; j<arr.length;j++) {
if(arr[i]+14arr[j] || arr[i]+28arr[j] || arr[i]+42arr[j] || arr[i]+56arr[j]) {
winArr.push(arr[j])
}
}
// 保证所有棋子是不同一行
let heightArr = winArr.map((index)=>{
return item[index].offsetTop
})
for(let a=0;a<heightArr.length;a++){
for(let b=a+1; b<heightArr.length;b++){
if(heightArr[a]heightArr[b]){
heightArr.splice(b,1);
b–;
}
}
}
// 有5个棋子连续且它们是不同行的时候说明获胜
if(winArr.length5 && heightArr.length==5){
return true;

        }
    }
}

}
let object= {
run:true, // true表示白子执行，flase表示黑子执行
white:{
arr:[],
},
black:{
arr:[]
}
}
for(let i=0;i<item.length; i++) {
// 鼠标移入
item[i].onmouseover = function(){
// 白子执行中
if(object.run){
// 检查已经落子的位置，不能取消背景颜色
let flagWhite = object.white.arr.some((item)=>{
return item == i;
})
let flagBlack = object.black.arr.some((item)=>{
return item == i;
})
if(!flagWhite && !flagBlack){
item[i].style.background=‘white’;
}
// 点击落白子
item[i].onclick = function(){
object.white.arr.push(i);
object.run = !object.run;
if(levelLineWin(object.white.arr) || verticalLineWin(object.white.arr) || rightDiagonalLineWin(object.white.arr) || leftDiagonalLineWin(object.white.arr)) {

          wall.style.display='block'
          wintitle.innerHTML='白子获胜'
      }
    }
  }else{
    // 黑子执行中
     // 检查已经落子的位置，不能取消背景颜色
     let flagWhite = object.white.arr.some((item)=>{
        return item == i;
     })
     let flagBlack =  object.black.arr.some((item)=>{
        return item == i;
     })
     if(!flagWhite && !flagBlack){
        item[i].style.background='black';
     } 
    // 点击落黑子
    item[i].onclick = function(){
      object.black.arr.push(i);
      object.run = !object.run;
      if(levelLineWin(object.black.arr) || verticalLineWin(object.black.arr) || rightDiagonalLineWin(object.black.arr) || leftDiagonalLineWin(object.black.arr)) {
     
        wall.style.display='block'
        wintitle.innerHTML='黑子获胜'
    }
    }  
  }

    
}
// 鼠标移出
item[i].onmouseout = function(){
  // 检查已经落子的位置，不能取消背景颜色
  let flagWhite = object.white.arr.some((item)=>{
      return item == i;
  })
  let flagBlack =  object.black.arr.some((item)=>{
    return item == i;
  }) 
  if(!flagWhite && !flagBlack){
    item[i].style.background= '';
  } 

    
}

}