五子棋js

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

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

let item = document.getElementsByClassName(‘item’);
let wintitle = document.getElementsByClassName(‘wintitle’)[0];
let wall = document.getElementsByClassName(‘wall’)[0];
// 检查获胜的函数 ---- 水平直线判断
function levelLineWin(arr){
if(arr.length>=5) {
let winArr=[];
for(let i=0; i<arr.length; i++) {
winArr=[];
winArr.push(arr[i])
// 获取棋子高度
let height = item[arr[i]].offsetTop
for(let j=0; j<arr.length;j++) {
if(arr[i]+1arr[j] || arr[i]+2arr[j] || arr[i]+3arr[j] || arr[i]+4arr[j]) {
winArr.push(arr[j])
}
}
// 保证所有棋子是同一行
let heightFlag = winArr.every((index)=>{
return item[index].offsetTop == height
})
// 有5个棋子连续且它们处于同一行的时候说明获胜
if(winArr.length==5 && heightFlag){
return true;

        }
    }
}

}
// 检查获胜的函数 ---- 垂直直线判断
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.length
5 && 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= '';
  } 

    
}

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值