五子棋游戏在线玩 - 趣味棋盘对战 - 常规

<!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>
        * {
            margin: 0;
            padding: 0;
        }
<pre><code>    body {
        position: relative;
    }

    #title {
        display: block;
        text-align: center;
    }

    #zhedang {
        height: 800px;
        width: 100%;
        display: none;
        position: absolute;
    }

    canvas {
        background-color: #0a0;
        display: block;
        margin: auto;
    }
&lt;/style&gt;
</code></pre>
</head>
<body>
    <span id="title">黑棋回合</span>
    <div id="zhedang"></div>
    <span>请重新开始</span>
    <button></button>
    <script>
        // 获取提示元素
        const title = document.querySelector("#title")
        // 获取遮挡元素
        const zd = document.querySelector('#zhedang')
        // 创建一个canvas画布
        const canvas = document.createElement('canvas')
        // 设置画布宽高
        canvas.width = 800
        canvas.height = 800
        // 将画布添加到body元素里边
        document.body.appendChild(canvas)
        // 创建画笔对象
        const context = canvas.getContext('2d')
        // 绘制棋盘布局      
        const line = function (n = 14) {
            for (let i = 1; i < 16; i++) {
                context.beginPath()
                context.moveTo(50, 50 * i)
                context.lineTo(750, 50 * i)
                context.stroke()
                context.beginPath()
                context.moveTo(50 * i, 50)
                context.lineTo(50 * i, 750)
                context.stroke()
            }
        }
        line()
        let isblack = true
        let list = []
        // 绘制棋子
        const qizi = function (x, y) {
            context.beginPath()
            context.arc(x, y, 20, 0, 2 * Math.PI)
            context.stroke()
        }
<pre><code>    canvas.onclick = function ({ offsetX, offsetY }) {
        // 修改提示语
        title.innerHTML = isblack ? '黑棋回合' : '白棋回合'
        // 判断游戏边界
        if (offsetX &lt; 25 || offsetX &gt; 775 || offsetY &gt; 775 || offsetY &lt; 25) {
            return
        }
        // 增加容错率
        this.x = Math.floor((offsetX + 25) / 50) * 50
        this.y = Math.floor((offsetY + 25) / 50) * 50
        // 判断棋子位置
        if (list.find(item =&gt; item[0] == this.x &amp;&amp; item[1] == this.y)) {
            title.innerHTML = `现在是${isblack ? '黑' : '白'}棋的回合`
            return
        }
        else list.push([this.x, this.y, isblack])
        // 绘制棋子
        qizi(this.x, this.y)
        // 设置填充样式
        // 创建渐变色
        let g = isblack ? context.createRadialGradient(this.x - 10, this.y - 10, 0, this.x - 10, this.y - 10, 20) : context.createRadialGradient(this.x + 10, this.y + 10, 0, this.x + 10, this.y + 10, 20)
        g.addColorStop(0, isblack ? '#ccc' : '#666')
        g.addColorStop(1, isblack ? '#000' : '#fff')
        context.fillStyle = g
        // 设置棋子阴影
        context.shadowColor = '#000'
        context.shadowOffsetX = 3
        context.shadowOffsetY = 3
        context.shadowBlur = 10
        // 填充棋子
        context.fill()
        s(isblack)
        isblack = !isblack
    }

    // 判断棋子胜负
    let heix
    let baix
    let heiy
    let baiy
    let heizl
    let baizl
    let heizr
    let baizr
    const s = function (isblack) {
        heix = 1
        baix = 1

        for (let [x1, y1, bool1] of list) {
            for (let [x2, y2, bool2] of list) {
                let arr = []
                let b = []
                let setx = new Set()
                let sety = new Set()
                list.filter(([x, y, b]) =&gt;{ return b == true &amp;&amp; x2&lt;=x &amp;&amp; x&lt;=x1 &amp;&amp; y1&lt;=y &amp;&amp; y&lt;=y2 }).forEach(([x,y])=&gt;{
                    arr.forEach(item=&gt;{
                        for(let i of arr){
                            if(item[0]==i[0]){
                                if(!b.includes(item)){
                                    b.push(item)
                                }
                                
                            }
                        }
                    })
                    arr.push([x,y])
                })
                if ((x1 - x2) == 200 &amp;&amp; (y2 - y1) == 200 &amp;&amp; bool1 == bool2 &amp;&amp; bool1 == true &amp;&amp; list.filter(([x, y, b]) =&gt;{ return b == true &amp;&amp; x2&lt;=x &amp;&amp; x&lt;=x1 &amp;&amp; y1&lt;=y &amp;&amp; y&lt;=y2 })) { 
                    console.log(arr)
                    console.log(b)
                    title.innerHTML = '黑棋获胜了!!!请从新开始'
                    zd.style.display = 'block'
                }
            }
        }
    }

&lt;/script&gt;
</code></pre>
</body>
</html>