原生JavaScript+canvas实现五子棋游戏_值得一看

简介: 本文介绍了如何使用原生JavaScript和HTML5的Canvas API实现五子棋游戏,包括棋盘的绘制、棋子的生成和落子、以及判断胜负的逻辑,提供了详细的代码和注释。

五子棋

最下面是详细代码加注释
在这里插入图片描述

首先需要一个画布 我们需要一个一个棋盘

  <canvas id="canvas"></canvas>

  let canvas = document.getElementById('canvas')
  let ctx = canvas.getContext('2d')
  let redP = document.getElementsByClassName('redP')[0]
  let blackP = document.getElementsByClassName('blackP')[0]
  let resultP = document.getElementsByClassName('resultP')[0]
  //画布宽高
  canvas.height = canvas.width = '450'
  //棋盘方格大小
   let flag = 50
   let getXLineArr = []
   let getYLineArr = []
   //偶数红色 基数 黑色
   let blackOrRedChessman = 0
   let hasChessmanArrList = []
    //坐标点数组
    let lineXAndlineYArr = []
    let lineXAndlineYArrRed = []
    let lineXAndlineYArrBlack = []
        for (let i = 0; i <= canvas.width; i += flag) {
   
            for (let j = 0; j <= canvas.width; j += flag) {
   
                lineXAndlineYArr.push([i, j])
            }
        }
     //画布距离浏览器上册的距离
     let MarginTopNum = 200;
     //画布距离浏览器左册的距离
     MarginLeftNum = 300;

写一个棋盘横线竖线的构造函数,方便划线,并在原型上定义方法,分别画横线、竖线

  function init() {
   
            function Line(color, x, y) {
   
                this.color = color;
                this.x = x
                this.y = y
            }
            Line.prototype.getXLine = function () {
   
                ctx.lineWidth = 1;
                ctx.beginPath();
                ctx.moveTo(0, this.y);
                ctx.lineTo(this.x, this.y);
                ctx.strokeStyle = this.color;
                ctx.closePath();
                ctx.fill();
                ctx.stroke();
            }
            Line.prototype.getYLine = function () {
   
                ctx.lineWidth = 1;
                ctx.beginPath();
                ctx.moveTo(this.x, 0);
                ctx.strokeStyle = this.color;
                ctx.lineTo(this.x, this.y);
                ctx.closePath();
                ctx.fill();
                ctx.stroke();
            }
            let num = 0
            //颜色数组 随机颜色的横竖线条
            let colorsList = ["#33B5E5", "#0099CC", "#AA66CC", "#9933CC", "#99CC00", "#669900", "#FFBB33", "#FF8800", "#FF4444", "#CC0000"]
            for (let i = 0; i <= canvas.width; i += flag) {
   
                let colorx = colorsList[Math.floor(Math.random() * 10)]
                let colory = colorsList[Math.floor(Math.random() * 10)]
                getXLineArr.push(new Line(colorx, canvas.width, num))
                getYLineArr.push(new Line(colory, num, canvas.width))
                num += flag
            }
          getXLineArr.map(item => {
   
                item.getXLine()
            })
            getYLineArr.map(item => {
   
                item.getYLine()
            })
        }

这个时候已经可以生成一个棋盘
在这里插入图片描述
棋子构造函数和原型上的生成棋子的方法,唯一区分就是颜色
//x 横坐标
//y 纵坐标
//color 棋子颜色坐标
//x 横坐标

        //棋子构造函数
        function Chessman(x, y, color) {
   
            this.x = x
            this.y = y
            this.color = color
        }
        Chessman.prototype.update = function () {
   
            ctx.save();
            ctx.beginPath()
            ctx.fillStyle = this.color// 背景颜色为红色
            ctx.arc(this.x, this.y, 20, 0, Math.PI * 2, false)
            ctx.fill()
            ctx.closePath()
        }

下面是鼠标点击生成棋子
首先是判断生成棋子的颜色 该是哪个

  //偶数红色 基数 黑色
   let blackOrRedChessman = 0

我们可以用blackOrRedChessman 这个变量做判断
是不是2的倍数左判断

   canvas.addEventListener('click', function (e) {
   
        //当前点击的坐标
        let arr = [e.clientX - MarginLeftNum, e.clientY - MarginTopNum]
        let newArrLong = Math.sqrt((0 - arr[0]) * (0 - arr[0]) + (0 - arr[1]) * (0 - arr[1]))
        let newARR = []
        lineXAndlineYArr.map((item, index) => {
   
        let newArrLongA = Math.sqrt((item[0] - arr[0]) * (item[0] - arr[0]) + (item[1] - arr[1]) * (item[1] - arr[1]))
             if (newArrLongA <= newArrLong) {
   
                    newARR = item; newArrLong = newArrLongA
                }
            })
        let hasYesOrNo = JSON.stringify(hasChessmanArrList).includes(JSON.stringify(newARR))
            if (!hasYesOrNo) {
   
                hasChessmanArrList.push(newARR)
            }
            else {
   
                alert('已经有棋子')
                return
            }
        let color = blackOrRedChessman % 2 == 0 ? 'red' : 'black'
        new Chessman(newARR[0], newARR[1], color).update()
        blackOrRedChessman % 2 == 0 ? lineXAndlineYArrRed.push(newARR) : lineXAndlineYArrBlack.push(newARR)
        //红色棋子已经大于5
        let newlineXAndlineYArr
        blackOrRedChessman % 2 == 0 ? newlineXAndlineYArr = JSON.parse(JSON.stringify(lineXAndlineYArrRed)) : newlineXAndlineYArr = JSON.parse(JSON.stringify(lineXAndlineYArrBlack))
        blackOrRedChessman++
        redP.innerHTML = '红旗已下' + lineXAndlineYArrRed.length
        blackP.innerHTML = '黑旗已下' + lineXAndlineYArrBlack.length
        if (newlineXAndlineYArr.length >= 5) {
   
        //横向
        xFangXiang()
        //纵向
         yFangXiang()
         //向右向右倾斜
         rightRightFangXiang()
         // //向左倾斜
         // leftFangXiang()
         function xFangXiang() {
   
              //横向
              let obj = {
   }
              let xArr = []
              let newlineXAndlineYArrx = JSON.parse(JSON.stringify(newlineXAndlineYArr))
              newlineXAndlineYArrx.filter(item => {
   
                  if (Object.prototype.hasOwnProperty.call(obj, item[1])) {
   
                      obj[item[1]] += 1
                  } else {
   
                      obj[item[1]] = 1
                  }
              })
              for (let key in obj) {
   
                  if (obj[key] >= 5) {
   
                      //y 有五个相等 
                      for (let j = 0; j < newlineXAndlineYArrx.length; j++) {
   
                          if (newlineXAndlineYArrx[j][1] == key)
                              xArr.push(newlineXAndlineYArrx[j][0])
                      }
                      let xArrX = xArr.sort((a, b) => a - b)
                      let num = obj[key] - 5 + 1
                      let numm = 0
                      for (let j = 0; j < num; j++) {
   
                          if (numm == num) return
                          for (let i = numm; i < xArrX.length; i++) {
   
                              if (xArrX[i] + flag == xArrX[i + 1] && xArrX[i + 1] + flag == xArrX[i + 2] && xArrX[i + 2] + flag == xArrX[i + 3] && xArrX[i + 3] + 50 == xArrX[i + 4]) {
   
                                  youWinFun()
                              }
                          }
                          numm++
                      }
                  }
              }
          }
      }  
          function yFangXiang() {
   
                //纵向
                let obj = {
   }
                let xArr = []
                let newlineXAndlineYArry = JSON.parse(JSON.stringify(newlineXAndlineYArr))
                newlineXAndlineYArry.filter(item => {
   
                    if (Object.prototype.hasOwnProperty.call(obj, item[0])) {
   
                        obj[item[0]] += 1
                    } else {
   
                        obj[item[0]] = 1
                    }
                })
                for (let key in obj) {
   
                    if (obj[key] >= 5) {
   
                        //y 有五个相等 
                        for (let j = 0; j < newlineXAndlineYArry.length; j++) {
   
                            if (newlineXAndlineYArry[j][0] == key)
                                xArr.push(newlineXAndlineYArry[j][1])
                        }
                        let xArrX = xArr.sort((a, b) => a - b)
                        let num = obj[key] - 5 + 1
                        let numm = 0
                        for (let j = 0; j < num; j++) {
   
                            if (numm == num) return
                            for (let i = numm; i < xArrX.length; i++) {
   
                                if (xArrX[i] + flag == xArrX[i + 1] && xArrX[i + 1] + flag == xArrX[i + 2] && xArrX[i + 2] + flag == xArrX[i + 3] && xArrX[i + 3] + flag == xArrX[i + 4]) {
   
                                    youWinFun()
                                }
                            }
                            numm++
                        }
                    }
                }
            }
            // //向右倾斜
            function rightRightFangXiang() {
   
                // x 从小到大
                let newlineXAndlineYArrR = JSON.parse(JSON.stringify(newlineXAndlineYArr))
                newARR[0], newARR[1]
                //右下
                //当它是第0棵棋子的时候 其他四颗
                // 0   [[ newARR[0]+flag, newARR[1]+50],[ newARR[0]+100, newARR[1]+100],[ newARR[0]+150, newARR[1]+150],[ newARR[0]+200, newARR[1]+200]]

                //1    [[ newARR[0]-50, newARR[1]-50],[ newARR[0]+50, newARR[1]+50],[ newARR[0]+100, newARR[1]+100],[ newARR[0]+150, newARR[1]+150]]

                //2    [[ newARR[0]-50, newARR[1]-50],[ newARR[0]-100, newARR[1]-100],[ newARR[0]+50, newARR[1]+50],[ newARR[0]+100, newARR[1]+100]]

                //3    [[ newARR[0]-50, newARR[1]-50],[ newARR[0]-100, newARR[1]-100],[ newARR[0]-150, newARR[1]-150],[ newARR[0]+50, newARR[1]+50]]

                //4    [[ newARR[0]-50, newARR[1]-50],[ newARR[0]-100, newARR[1]-100],[ newARR[0]-150, newARR[1]-150],[ newARR[0]+200, newARR[1]+200]]

                //左下
                //当它是第0棵棋子的时候 其他四颗
                // 0   [[ newARR[0]-50, newARR[1]+50],[ newARR[0]-100, newARR[1]+100],[ newARR[0]-150, newARR[1]+150],[ newARR[0]-200, newARR[1]+200]]

                //1    [[ newARR[0]+50, newARR[1]-50],[ newARR[0]-50, newARR[1]+50],[ newARR[0]-100, newARR[1]+100],[ newARR[0]-150, newARR[1]+150]]

                //2    [[ newARR[0]+50, newARR[1]-50],[ newARR[0]+100, newARR[1]-100],[ newARR[0]-50, newARR[1]+50],[ newARR[0]-100, newARR[1]+100]]

                //3    [[ newARR[0]+50, newARR[1]-50],[ newARR[0]+100, newARR[1]-100],[ newARR[0]+150, newARR[1]-150],[ newARR[0]-50, newARR[1]+50]]

                //4    [[ newARR[0]+50, newARR[1]-50],[ newARR[0]+100, newARR[1]-100],[ newARR[0]+150, newARR[1]-150],[ newARR[0]+200, newARR[1]-200]]

                let newRightArrList = []
                for (let i = 0; i < 5; i++) {
   
                    newRightArrList = []
                    if (i == 0) {
   
                        if (true) {
   
                            newRightArrList = [[newARR[0] - flag, newARR[1] + flag], [newARR[0] - flag * 2, newARR[1] + flag * 2], [newARR[0] - flag * 3, newARR[1] + flag * 3], [newARR[0] - flag * 4, newARR[1] + flag * 4]]
                            rightOrRight(newRightArrList, newlineXAndlineYArrR)

                        }
                        if (true) {
   
                            newRightArrList = [[newARR[0] + flag, newARR[1] + flag], [newARR[0] + flag * 2, newARR[1] + flag * 2], [newARR[0] + flag * 3, newARR[1] + flag * 3], [newARR[0] + flag * 4, newARR[1] + flag * 4]]
                            rightOrRight(newRightArrList, newlineXAndlineYArrR)
                        }
                    }
                    if (i == 1) {
   
                        if (true) {
   
                            newRightArrList = [[newARR[0] + flag, newARR[1] - flag], [newARR[0] - flag, newARR[1] + flag], [newARR[0] - flag * 2, newARR[1] + flag * 2], [newARR[0] - flag * 3, newARR[1] + flag * 3]]
                            rightOrRight(newRightArrList, newlineXAndlineYArrR)
                        }

                        if (true) {
   
                            newRightArrList = [[newARR[0] - flag, newARR[1] - flag], [newARR[0] + flag, newARR[1] + flag], [newARR[0] + flag * 2, newARR[1] + flag * 2], [newARR[0] + flag * 3, newARR[1] + flag * 3]]
                            rightOrRight(newRightArrList, newlineXAndlineYArrR)
                        }
                    }
                    if (i == 2) {
   
                        if (true) {
   
                            newRightArrList = [[newARR[0] + flag, newARR[1] - flag], [newARR[0] + flag * 2, newARR[1] - flag * 2], [newARR[0] - flag, newARR[1] + flag], [newARR[0] - flag * 2, newARR[1] + flag * 2]]
                            rightOrRight(newRightArrList, newlineXAndlineYArrR)
                        }

                        if (true) {
   
                            newRightArrList = [[newARR[0] - flag * 2, newARR[1] - flag * 2], [newARR[0] - flag, newARR[1] - flag], [newARR[0] + flag, newARR[1] + flag], [newARR[0] + flag * 2, newARR[1] + flag * 2]]
                            rightOrRight(newRightArrList, newlineXAndlineYArrR)
                        }
                    }
                    if (i == 3) {
   
                        if (true) {
   
                            newRightArrList = [[newARR[0] + flag, newARR[1] - flag], [newARR[0] + flag * 2, newARR[1] - flag * 2], [newARR[0] + flag * 3, newARR[1] - flag * 3], [newARR[0] - flag, newARR[1] + flag]]
                            rightOrRight(newRightArrList, newlineXAndlineYArrR)
                        }

                        if (true) {
   
                            newRightArrList = [[newARR[0] - flag * 3, newARR[1] - flag * 3], [newARR[0] - flag * 2, newARR[1] - flag * 2], [newARR[0] - flag, newARR[1] - flag], [newARR[0] + flag, newARR[1] + flag]]
                            rightOrRight(newRightArrList, newlineXAndlineYArrR)
                        }
                    }
                    if (i == 4) {
   
                        if (true) {
   
                            newRightArrList = [[newARR[0] + flag, newARR[1] - flag], [newARR[0] + flag * 2, newARR[1] - flag * 2], [newARR[0] + flag * 3, newARR[1] - flag * 3], [newARR[0] + flag * 4, newARR[1] - flag * 4]]
                            rightOrRight(newRightArrList, newlineXAndlineYArrR)
                        }

                        if (true) {
   
                            newRightArrList = [[newARR[0] - flag * 4, newARR[1] - flag * 4], [newARR[0] - flag, newARR[1] - flag], [newARR[0] - flag * 2, newARR[1] - flag * 2], [newARR[0] - flag * 3, newARR[1] - flag * 3]]
                            rightOrRight(newRightArrList, newlineXAndlineYArrR)
                        }
                    }
                }


            }
        })

游戏结束函数

        //您赢了
        function youWinFun() {
   
            resultP.innerHTML = blackOrRedChessman % 2 == 0 ? '黑棋子方胜利' : '红棋子方胜利'
            redP.innerHTML = '红旗已下0'
            blackP.innerHTML = '黑旗已下0'
            var r = window.confirm(resultP.innerHTML + ",是否重新开始!");
            if (r == true) {
   
                againInit()
                return
            }
        }

全部代码 加详细注释

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>五子棋</title>
<style>
* {
   
    padding: 0;
    margin: 0;
}

html,
body {
   
    width: 100%;
    height: 100%;
    overflow: hidden;
}

canvas {
   
    margin-top: 200px;
    margin-left: 300px;
    background-color: #ccc;
    display: inline-block;
}

.resultBox {
   
    position: absolute;
    text-align: center;
    top: 200px;
    left: 760px;
    width: 200px;
    height: 450px;
    background-color: #ccc;
    color: 38px;
    line-height: 60px;
    font-weight: bold;
}
</style>
</head>

<body>
<div class="box">
<canvas id="canvas"></canvas>
<div class="resultBox">
    <p class="redP">红旗已下0</p>
    <p class="blackP">黑旗已下0</p>
    <p class="resultP"></p>
</div>
</div>
<script>
//生成画布
let canvas = document.getElementById('canvas')
//红方p
let redP = document.getElementsByClassName('redP')[0]
//黑方p
let blackP = document.getElementsByClassName('blackP')[0]
//结果p
let resultP = document.getElementsByClassName('resultP')[0]
//画笔
let ctx = canvas.getContext('2d')
//canvas宽高
canvas.height = canvas.width = '450'
//棋子方格大小
let flag = 50
//横线对象数组
let getXLineArr = []
//竖线对象数组
let getYLineArr = []
//偶数红色 基数 黑色
let blackOrRedChessman = 0
//所有棋子数组
let hasChessmanArrList = []
//坐标点数组
//所有坐标数组
let lineXAndlineYArr = []
//红旗坐标数组
let lineXAndlineYArrRed = []
//黑棋坐标数组
let lineXAndlineYArrBlack = []
//初始化函数
init()
for (let i = 0; i <= canvas.width; i += flag) {
   
    for (let j = 0; j <= canvas.width; j += flag) {
   
        lineXAndlineYArr.push([i, j])
    }
}
//画布距离浏览器上册的距离
let MarginTopNum = 200;
//画布距离浏览器左册的距离
let MarginLeftNum = 300;
//棋子构造函数
//x 横坐标 
//y 纵坐标 
//color 棋子颜色坐标 
//x 横坐标 
function Chessman(x, y, color) {
   
    this.x = x
    this.y = y
    this.color = color
}
Chessman.prototype.update = function () {
   
    ctx.save();
    ctx.beginPath()
    ctx.fillStyle = this.color// 背景颜色为红色
    ctx.arc(this.x, this.y, 20, 0, Math.PI * 2, false)
    ctx.fill()
    ctx.closePath()
}
canvas.addEventListener('click', function (e) {
   
    //当前点击的坐标
    let arr = [e.clientX - MarginLeftNum, e.clientY - MarginTopNum]
    //当前点击坐标到 棋盘 0,0 的距离
    let newArrLong = Math.sqrt((0 - arr[0]) * (0 - arr[0]) + (0 - arr[1]) * (0 - arr[1]))
    let newARR = []
    //循环判断当前点击坐标到哪个棋盘坐标的距离最短,棋子放置到该坐标点
    lineXAndlineYArr.map((item, index) => {
   
        let newArrLongA = Math.sqrt((item[0] - arr[0]) * (item[0] - arr[0]) + (item[1] - arr[1]) * (item[1] - arr[1]))
        if (newArrLongA <= newArrLong) {
   
            newARR = item; newArrLong = newArrLongA
        }
    })
    //判断该点是否已经有棋子
    let hasYesOrNo = JSON.stringify(hasChessmanArrList).includes(JSON.stringify(newARR))
    if (!hasYesOrNo) {
   
        //没有的话加入棋子数组
        hasChessmanArrList.push(newARR)
    }
    else {
   
        alert('已经有棋子')
        return
    }
    // 判断这次点击棋子颜色
    let color = blackOrRedChessman % 2 == 0 ? 'red' : 'black'
    //生成棋子 放置棋盘中
    new Chessman(newARR[0], newARR[1], color).update()
    //相应颜色的棋子放入对应颜色棋子数组
    blackOrRedChessman % 2 == 0 ? lineXAndlineYArrRed.push(newARR) : lineXAndlineYArrBlack.push(newARR)
    //判断棋子数量是否已经大于5
    let newlineXAndlineYArr
    blackOrRedChessman % 2 == 0 ? newlineXAndlineYArr = JSON.parse(JSON.stringify(lineXAndlineYArrRed)) : newlineXAndlineYArr = JSON.parse(JSON.stringify(lineXAndlineYArrBlack))
    //改变下一次棋子颜色使用
    blackOrRedChessman++
    //改变页面上的信息
    redP.innerHTML = '红旗已下' + lineXAndlineYArrRed.length
    blackP.innerHTML = '黑旗已下' + lineXAndlineYArrBlack.length
    //判断棋子数量是否已经大于5  没到5 决对赢不了的 ~
    if (newlineXAndlineYArr.length >= 5) {
   
        //判断横向
        xFangXiang()
        //判断纵向
        yFangXiang()
        //向右向右倾斜
        rightRightFangXiang()

        function xFangXiang() {
   
            //横向
            let obj = {
   }
            let xArr = []
            //深拷贝一份数组
            let newlineXAndlineYArrx = JSON.parse(JSON.stringify(newlineXAndlineYArr))
            // 判断属性 是否有大于等于5个的  默认数量为1 有++  无 1
            newlineXAndlineYArrx.filter(item => {
   
                if (Object.prototype.hasOwnProperty.call(obj, item[1])) {
   
                    obj[item[1]] += 1
                } else {
   
                    obj[item[1]] = 1
                }
            })
            for (let key in obj) {
   
                //数量大于5时
                if (obj[key] >= 5) {
   
                    //y 有五个相等 
                    for (let j = 0; j < newlineXAndlineYArrx.length; j++) {
   
                        //再次将 y相等的 坐标点 推向数组
                        if (newlineXAndlineYArrx[j][1] == key)
                            xArr.push(newlineXAndlineYArrx[j][0])
                    }
                    let xArrX = xArr.sort((a, b) => a - b)
                    let num = obj[key] - 5 + 1
                    let numm = 0
                    for (let j = 0; j < num; j++) {
   
                        if (numm == num) return
                        for (let i = numm; i < xArrX.length; i++) {
   
                            //数组坐标点满足关系  游戏结束
                            if (xArrX[i] + flag == xArrX[i + 1] && xArrX[i + 1] + flag == xArrX[i + 2] && xArrX[i + 2] + flag == xArrX[i + 3] && xArrX[i + 3] + 50 == xArrX[i + 4]) {
   
                                youWinFun()
                            }
                        }
                        numm++
                    }
                }
            }
        }
    }
    function yFangXiang() {
   
        //纵向
        let obj = {
   }
        let xArr = []
        let newlineXAndlineYArry = JSON.parse(JSON.stringify(newlineXAndlineYArr))
        newlineXAndlineYArry.filter(item => {
   
            if (Object.prototype.hasOwnProperty.call(obj, item[0])) {
   
                obj[item[0]] += 1
            } else {
   
                obj[item[0]] = 1
            }
        })
        for (let key in obj) {
   
            if (obj[key] >= 5) {
   
                //y 有五个相等 
                for (let j = 0; j < newlineXAndlineYArry.length; j++) {
   
                    if (newlineXAndlineYArry[j][0] == key)
                        xArr.push(newlineXAndlineYArry[j][1])
                }
                let xArrX = xArr.sort((a, b) => a - b)
                let num = obj[key] - 5 + 1
                let numm = 0
                for (let j = 0; j < num; j++) {
   
                    if (numm == num) return
                    for (let i = numm; i < xArrX.length; i++) {
   
                        if (xArrX[i] + flag == xArrX[i + 1] && xArrX[i + 1] + flag == xArrX[i + 2] && xArrX[i + 2] + flag == xArrX[i + 3] && xArrX[i + 3] + flag == xArrX[i + 4]) {
   
                            youWinFun()
                        }
                    }
                    numm++
                }
            }
        }
    }
    // //向右倾斜
    function rightRightFangXiang() {
   
        // 深拷贝一份数据
        let newlineXAndlineYArrR = JSON.parse(JSON.stringify(newlineXAndlineYArr))
        let newRightArrList = []
        for (let i = 0; i < 5; i++) {
   
            newRightArrList = []
            //当它是第0棵棋子的时候 其他四颗棋子坐标满足的关系  下面一次类推
            if (i == 0) {
   
                //右下方向
                if (true) {
   
                    newRightArrList = [[newARR[0] - flag, newARR[1] + flag], [newARR[0] - flag * 2, newARR[1] + flag * 2], [newARR[0] - flag * 3, newARR[1] + flag * 3], [newARR[0] - flag * 4, newARR[1] + flag * 4]]
                    rightOrRight(newRightArrList, newlineXAndlineYArrR)

                }
                //左下方向
                if (true) {
   
                    newRightArrList = [[newARR[0] + flag, newARR[1] + flag], [newARR[0] + flag * 2, newARR[1] + flag * 2], [newARR[0] + flag * 3, newARR[1] + flag * 3], [newARR[0] + flag * 4, newARR[1] + flag * 4]]
                    rightOrRight(newRightArrList, newlineXAndlineYArrR)
                }
            }
            if (i == 1) {
   
                //右下方向
                if (true) {
   
                    newRightArrList = [[newARR[0] + flag, newARR[1] - flag], [newARR[0] - flag, newARR[1] + flag], [newARR[0] - flag * 2, newARR[1] + flag * 2], [newARR[0] - flag * 3, newARR[1] + flag * 3]]
                    rightOrRight(newRightArrList, newlineXAndlineYArrR)
                }
                //左下方向
                if (true) {
   
                    newRightArrList = [[newARR[0] - flag, newARR[1] - flag], [newARR[0] + flag, newARR[1] + flag], [newARR[0] + flag * 2, newARR[1] + flag * 2], [newARR[0] + flag * 3, newARR[1] + flag * 3]]
                    rightOrRight(newRightArrList, newlineXAndlineYArrR)
                }
            }
            if (i == 2) {
   
                //右下方向
                if (true) {
   
                    newRightArrList = [[newARR[0] + flag, newARR[1] - flag], [newARR[0] + flag * 2, newARR[1] - flag * 2], [newARR[0] - flag, newARR[1] + flag], [newARR[0] - flag * 2, newARR[1] + flag * 2]]
                    rightOrRight(newRightArrList, newlineXAndlineYArrR)
                }
                //左下方向
                if (true) {
   
                    newRightArrList = [[newARR[0] - flag * 2, newARR[1] - flag * 2], [newARR[0] - flag, newARR[1] - flag], [newARR[0] + flag, newARR[1] + flag], [newARR[0] + flag * 2, newARR[1] + flag * 2]]
                    rightOrRight(newRightArrList, newlineXAndlineYArrR)
                }
            }
            if (i == 3) {
   
                //右下方向
                if (true) {
   
                    newRightArrList = [[newARR[0] + flag, newARR[1] - flag], [newARR[0] + flag * 2, newARR[1] - flag * 2], [newARR[0] + flag * 3, newARR[1] - flag * 3], [newARR[0] - flag, newARR[1] + flag]]
                    rightOrRight(newRightArrList, newlineXAndlineYArrR)
                }
                //左下方向
                if (true) {
   
                    newRightArrList = [[newARR[0] - flag * 3, newARR[1] - flag * 3], [newARR[0] - flag * 2, newARR[1] - flag * 2], [newARR[0] - flag, newARR[1] - flag], [newARR[0] + flag, newARR[1] + flag]]
                    rightOrRight(newRightArrList, newlineXAndlineYArrR)
                }
            }
            if (i == 4) {
   
                //右下方向
                if (true) {
   
                    newRightArrList = [[newARR[0] + flag, newARR[1] - flag], [newARR[0] + flag * 2, newARR[1] - flag * 2], [newARR[0] + flag * 3, newARR[1] - flag * 3], [newARR[0] + flag * 4, newARR[1] - flag * 4]]
                    rightOrRight(newRightArrList, newlineXAndlineYArrR)
                }
                //左下方向
                if (true) {
   
                    newRightArrList = [[newARR[0] - flag * 4, newARR[1] - flag * 4], [newARR[0] - flag, newARR[1] - flag], [newARR[0] - flag * 2, newARR[1] - flag * 2], [newARR[0] - flag * 3, newARR[1] - flag * 3]]
                    rightOrRight(newRightArrList, newlineXAndlineYArrR)
                }
            }
        }


    }
})
function rightOrRight(newRightArrList, newlineXAndlineYArrR) {
   
    newRightArrList = newRightArrList.map(item => JSON.stringify(item))
    newlineXAndlineYArrR = newlineXAndlineYArrR.map(item => JSON.stringify(item))
    let filterLIst = []
    newlineXAndlineYArrR.map(item => {
   
        newRightArrList.map(itemN => {
   
            if (itemN == item) {
   
                filterLIst.push(item)
            }
        })
    })
    if (filterLIst.length == 4) youWinFun()
}
//您赢了
function youWinFun() {
   
    resultP.innerHTML = blackOrRedChessman % 2 == 0 ? '黑棋子方胜利' : '红棋子方胜利'
    redP.innerHTML = '红旗已下0'
    blackP.innerHTML = '黑旗已下0'
    var r = window.confirm(resultP.innerHTML + ",是否重新开始!");
    if (r == true) {
   
        againInit()
        return
    }
}
function againInit() {
   
    getXLineArr = []
    getYLineArr = []
    //偶数红色 基数 黑色
    blackOrRedChessman = 0
    hasChessmanArrList = []
    //坐标点数组
    // lineXAndlineYArr = []
    lineXAndlineYArrRed = []
    lineXAndlineYArrBlack = []
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    init()
}
//网格构造函数
//color线条颜色
//线条间隔
function init() {
   
    //线条构造函数
    //线条颜色 x y
    function Line(color, x, y) {
   
        this.color = color;
        this.x = x
        this.y = y
    }
    //画横线
    Line.prototype.getXLine = function () {
   
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(0, this.y);
        ctx.lineTo(this.x, this.y);
        ctx.strokeStyle = this.color;
        ctx.closePath();
        ctx.fill();
        ctx.stroke();
    }
    //画竖线
    Line.prototype.getYLine = function () {
   
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(this.x, 0);
        ctx.strokeStyle = this.color;
        ctx.lineTo(this.x, this.y);
        ctx.closePath();
        ctx.fill();
        ctx.stroke();
    }
    //线条相隔大小 后面 num += flag
    let num = 0
    //线条随机颜色数组
    let colorsList = ["#33B5E5", "#0099CC", "#AA66CC", "#9933CC", "#99CC00", "#669900", "#FFBB33", "#FF8800", "#FF4444", "#CC0000"]
    //循环画线
    for (let i = 0; i <= canvas.width; i += flag) {
   
        let colorx = colorsList[Math.floor(Math.random() * 10)]
        let colory = colorsList[Math.floor(Math.random() * 10)]
        getXLineArr.push(new Line(colorx, canvas.width, num))
        getYLineArr.push(new Line(colory, num, canvas.width))
        num += flag
    }
    //画横线
    getXLineArr.map(item => {
   
        item.getXLine()
    })
    //画竖线
    getYLineArr.map(item => {
   
        item.getYLine()
    })
}
</script>
</body>

</html>
目录
相关文章
|
24天前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
30 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
3月前
|
移动开发 前端开发 JavaScript
JS配合canvas实现贪吃蛇小游戏_升级_丝滑版本_支持PC端和移动端
本文介绍了一个使用JavaScript和HTML5 Canvas API实现的贪吃蛇游戏的升级版本,该版本支持PC端和移动端,提供了丝滑的转向效果,并允许玩家通过键盘或触摸屏控制蛇的移动。代码中包含了详细的注释,解释了游戏逻辑、食物生成、得分机制以及如何响应不同的输入设备。
69 1
JS配合canvas实现贪吃蛇小游戏_升级_丝滑版本_支持PC端和移动端
|
3月前
|
移动开发 前端开发 JavaScript
js之Canvas|2-1
js之Canvas|2-1
|
3月前
|
移动开发 前端开发 JavaScript
JS配合canvas实现贪吃蛇小游戏
本文通过详细的代码示例介绍了如何使用JavaScript和HTML5的Canvas API实现一个贪吃蛇游戏,包括蛇的移动、食物的生成、游戏的开始与结束逻辑,以及如何响应键盘事件来控制蛇的方向。
47 1
|
4月前
|
Devops 持续交付 测试技术
JSF遇上DevOps:开发流程将迎巨变?一篇文章带你领略高效协同的魅力!
【8月更文挑战第31天】本文探讨了如何在JavaServer Faces(JSF)开发中融入DevOps文化,通过持续集成与部署、自动化测试、监控与日志记录及反馈机制,提升软件交付速度与质量。文中详细介绍了使用Jenkins进行自动化部署、JUnit与Selenium进行自动化测试、ELK Stack进行日志监控的具体方法,并强调了持续改进的重要性。
41 0
|
4月前
|
JavaScript 前端开发 API
从零开始学表单操作,jQuery 与原生 JavaScript 完全指南,带你轻松掌握网页交互关键!
【8月更文挑战第31天】在网页开发中,表单是实现用户互动的关键元素。无论是收集信息、提交数据还是验证输入,都需要对表单进行有效操作。本文档介绍了如何使用原生 JavaScript 和 jQuery 操作表单,包括获取表单元素、读写表单值、处理表单提交及验证等核心功能。jQuery 提供了更简洁的语法和更好的兼容性,但原生 JavaScript 在性能上有优势。选择合适的方法取决于项目需求和个人偏好。下面通过具体示例展示了两种方式的操作方法。
40 0
|
4月前
|
JavaScript
JS九行代码实现1~10猜数字游戏
JS九行代码实现1~10猜数字游戏
52 0
|
4月前
|
移动开发 前端开发 JavaScript
2D物理引擎 Box2D for javascript Games -- 番外篇-- (为游戏添加皮肤)
2D物理引擎 Box2D for javascript Games -- 番外篇-- (为游戏添加皮肤)
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的使命召唤游戏助手附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的使命召唤游戏助手附带文章源码部署视频讲解等
38 0