前端開發趣味之五子棋小游戲（JS+Node+Websocket）可分房間對戰-有解無憂

主要通過js、canvas、node、websocket來實作五子棋游戲，

tip:如果你想清除的了解怎么實作，請一步步看思路流程，

首先搭建一個express服務：

const express = require('express')
const path = require('path')
const app = express()
//靜態資源目錄
app.use(express.static(path.join(__dirname, 'public')));
let port = 3003
app.get('/home', (req, res, next) => {
    res.writeHead(200, { 'Content-type': 'text/html;charset=utf-8' })
    res.end('歡迎來到express')
    next()
})

const server = app.listen(port, () => { console.log('成功啟動express服務,埠號是' + port) })

這個時候我們可以訪問靜態檔案里面的檔案了，如：
在這里插入圖片描述
public下面的index.html在訪問3003/的時候在瀏覽器渲染，

這也說明了我們的node服務啟動成功，介面在3003埠上，

前端頁面，里面包括css\html但是不包括js，只是引入js檔案：

<!-- 2021/5/15 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="icon" type="image/jpg" href="./ipc.jpg">
    <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: rgb(213, 176, 146);
            display: inline-block;
            border-radius: 8px;
            border: 1px solid black;
        }

        .resultBox {
            position: absolute;
            text-align: center;
            top: 200px;
            left: 760px;
            width: 200px;
            height: 450px;
            /* background-color: #ccc; */
            background-color: rgb(213, 176, 146);
            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的方式引入 soctke.io -->
    <script  defer crossorigin="anonymous"
        integrity="sha512-PU5S6BA03fRv1Q5fpwXjg5nlRrgdoguZ74urFInkbABMCENyx5oP3hrDzYMMPh3qdLdknIvrGj3yqZ4JuU7Nag=="
        src="https://lib.baomitu.com/socket.io/4.1.3/socket.io.js"></script>
        //低版本  不再使用
    <!-- <script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"></script> -->
    <script defer src="./wuziqi.js"></script>
</body>

</html>

1：生成棋盤

2：生成棋子

3：棋子落點

4：五子成線？贏：輸

流程：

1.頁面：渲染完成，輸入房間號
2.選擇白棋、黑棋
3.選擇白棋后先下黑棋有了白棋才能下
4.一方勝利，游戲結束，

頁面加載后開始連接服務器，控制臺列印連接成功，輸入房間號，

房間號里面只能容納兩個人，多余的人為觀眾，不可控制器盤的棋子

棋盤建構式

  //線條建構式
    //線條顏色 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)]
        let colorx, colory
        colorx = colory = 'black'
        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()
    })

棋子建構式

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的坐標
    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]))
    //25
    let newArrLong = flag / 2
    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
        }
    })

//看能不能落子

     //白
    if (redOrBlackFlag === 1) {
        if (blackOrRedChessman % 2 !== 0) {
            return false
        }
        console.log("%c當前點擊棋子坐標：", "color:red;font-size:20px;", newARR)
    } else {
        //黑
        if (blackOrRedChessman % 2 == 0) {
            return false
        }
        console.log("%c當前點擊棋子坐標：", "color:red;font-size:20px;", newARR)
    }

隨后查看該點是否已經有了棋子

    //判斷該點是否已經有棋子
    let hasYesOrNo = JSON.stringify(hasChessmanArrList).includes(JSONstringify(newARR))
    if (!hasYesOrNo) {
        //沒有的話加入棋子陣列
        hasChessmanArrList.push(newARR)
    }
    else {
        alert('已經有棋子')
        return
    }

棋子落子后觸發服務器棋子位子更新

//lineXAndlineYArrRed 白棋
//lineXAndlineYArrBlack 黑棋
//lineXAndlineYArrBlack 黑棋
//blackOrRedChessman 棋子數量

 const sendItemsArr = JSON.stringify({ lineXAndlineYArrRed, lineXAndlineYArrBlack, hasChessmanArrList, blackOrRedChessman })
    mySocket.emit('sendItemsArr', sendItemsArr)

服務器派發另一個人更新棋子位置

    websocketObj.on('sendItemsArr', (sendItemsArr) => {
        itemsArr = sendItemsArr
        //觸發所以的 sendFunEventCallBack 事件  讓前端監聽
        io.sockets.emit("getItemsArr", itemsArr);
    })

前端接受最新的棋子位置：

//websocket
mySocket.on('getItemsArr', (getItemsArr) => {
    const ItemsArr = JSON.parse(getItemsArr)
    lineXAndlineYArrRed = ItemsArr.lineXAndlineYArrRed
    lineXAndlineYArrBlack = ItemsArr.lineXAndlineYArrBlack
    hasChessmanArrList = ItemsArr.hasChessmanArrList
    blackOrRedChessman = ++ItemsArr.blackOrRedChessman
    // 判斷這次點擊棋子顏色
    //生成棋子 放置棋盤中
    lineXAndlineYArrRed.map(i => {
        new Chessman(i[0], i[1], color1).update()
    })
    lineXAndlineYArrBlack.map(i => {
        new Chessman(i[0], i[1], color2).update()
    })
    //改變頁面上的資訊
    redP.innerHTML = '白旗已下' + lineXAndlineYArrRed.length
    blackP.innerHTML = '黑旗已下' + lineXAndlineYArrBlack.length
})

再而判斷下的這枚棋子，白棋或者黑棋棋子是否已經有了五個：

  //判斷棋子數量是否已經大于5  沒到5 決對贏不了的 ~
    if (newlineXAndlineYArr.length >= 5) {
        //向右向左傾斜判斷、橫向縱向判斷
        leftRightFangXiang()
        // //向右傾斜
        function leftRightFangXiang() {
            // 深拷貝一份資料
            let newlineXAndlineYArrR = JSON.parse(JSON.stringify(newlineXAndlineYArr))
            let newRightArrList = []
            for (let i = 0; i < 5; i++) {
                //x
                if (1) {
                    newRightArrList = []
                    for (let j = 0; j < i; j++) {
                        newRightArrList.push([newARR[0] - flag * (j + 1), newARR[1]])
                    }
                    for (let k = i; k < 4; k++) {
                        newRightArrList.push([newARR[0] + flag * (k - i + 1), newARR[1]])
                    }
                    if (rightOrRight(newRightArrList, newlineXAndlineYArrR, newARR) == 'win') {
                        console.log("%c橫向贏了哦~", "color:red;font-size:30px;");
                        break
                    }
                }
                //y
                if (1) {
                    newRightArrList = []
                    for (let j = 0; j < i; j++) {
                        newRightArrList.push([newARR[0], newARR[1] - flag * (j + 1)])
                    }
                    for (let k = i; k < 4; k++) {
                        newRightArrList.push([newARR[0], newARR[1] + flag * (k - i + 1)])
                    }
                    if (rightOrRight(newRightArrList, newlineXAndlineYArrR, newARR) == 'win') {
                        console.log("%c縱向贏了哦~", "color:red;font-size:30px;");
                        break
                    }
                }
                // //左下   // 前 + -     張俊卿    - +
                if (1) {
                    newRightArrList = []
                    for (let j = 0; j < i; j++) {
                        newRightArrList.push([newARR[0] + flag * (j + 1), newARR[1] - flag * (j + 1)])
                    }
                    for (let k = i; k < 4; k++) {
                        newRightArrList.push([newARR[0] - flag * (k - i + 1), newARR[1] + flag * (k - i + 1)])
                    }
                    if (rightOrRight(newRightArrList, newlineXAndlineYArrR, newARR) == 'win') {
                        console.log("%c左下贏了哦~", "color:red;font-size:30px;");
                        break
                    }
                }
                //右下   // 前 - -     張俊卿    + +  后
                if (1) {
                    newRightArrList = []
                    for (let j = 0; j < i; j++) {
                        newRightArrList.push([newARR[0] - flag * (j + 1), newARR[1] - flag * (j + 1)])
                    }
                    for (let k = i; k < 4; k++) {
                        newRightArrList.push([newARR[0] + flag * (k - i + 1), newARR[1] + flag * (k - i + 1)])
                    }
                    if (rightOrRight(newRightArrList, newlineXAndlineYArrR, newARR) == 'win') {
                        console.log("%c右下贏了哦~", "color:red;font-size:30px;");
                        break
                    }
                }
            }
        }
    }

勝利

**有5個連成了一條線,服務器更新棋子位置 **

  //初始化函式
    mySocket.emit('clearItemsArr')

node

    websocketObj.on('clearItemsArr', () => {
        let clearItemsArr = JSON.parse(itemsArr)
        clearItemsArr.lineXAndlineYArrRed = []
        clearItemsArr.lineXAndlineYArrBlack = []
        clearItemsArr.hasChessmanArrList = []
        clearItemsArr.blackOrRedChessman = 0
        // websocketObj.emit('getItemsArr',itemsArr )
        //觸發所以的 sendFunEventCallBack 事件  讓前端監聽
        io.sockets.emit("clearItemsArrAll", JSON.stringify(clearItemsArr));
    })

前端接受重置位置，頁面重置：

//websocket
mySocket.on('clearItemsArrAll', (getItemsArr) => {
    const ItemsArr = JSON.parse(getItemsArr)
    lineXAndlineYArrRed = ItemsArr.lineXAndlineYArrRed
    lineXAndlineYArrBlack = ItemsArr.lineXAndlineYArrBlack
    hasChessmanArrList = ItemsArr.hasChessmanArrList
    blackOrRedChessman = ++ItemsArr.blackOrRedChessman
    //贏了
    resultP.innerHTML = blackOrRedChessman % 2 == 0 ? '黑棋子方勝利' : '白棋子方勝利'
    var r = window.confirm(resultP.innerHTML + "，是否重新開始!");
    if (r == true) {
        redP.innerHTML = '白旗已下0'
        blackP.innerHTML = '黑旗已下0'
        againInit()
    }
})

重置畫布：

//重新開始
function againInit() {
    // window.history.go(0)
    //橫線物件陣列
    getXLineArr = []
    //豎線物件陣列
    getYLineArr = []
    //偶數白色 基數 黑色
    blackOrRedChessman = 0
    //所有棋子陣列
    hasChessmanArrList = []
    //坐標點陣列
    //白旗坐標陣列
    lineXAndlineYArrRed = []
    //黑棋坐標陣列
    lineXAndlineYArrBlack = []
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    init()
}

主要是使用html、js、node、websocket完成了一個可以分多個房間的雙人五子棋游戲，其他人可以觀戰，

git地址：

五子棋分房間雙人戰斗

git clone https://gitee.com/zhang745929987/gobang-room-two-fight.git
cd 進去 npm i
node或者nodemon test.js

完整代碼在git上，有興趣可以玩一玩，提出一些改進意見，

演示：

在這里插入圖片描述

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/294912.html

標籤：其他

上一篇：Nginx Https訪問配置

下一篇：專案實戰1——基于iptables的SNAT+DNAT與Docker容器發布的專案

前端開發趣味之五子棋小游戲（JS+Node+Websocket）可分房間對戰