正文 

当前位置： 首页 > java > java教程

前端开发趣味之五子棋小游戏（js+node+websocket）可分房间对战(代码片段)

六卿 六卿     2022-12-23     476

关键词：

主要通过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'node.js开发实战详解

...介绍。清华大学出版社计算机分社新书预告：腾讯Web前端工程师全面揭秘原生Node.js的开发实践，不借助任何第三方框架，通过编写原生代码，讲解Node.js应用开发。“Web开发典藏大系”之《Node.js开发实战详解》3月...  查看详情  

                

node.js实战一文带你开发博客项目之登录（前置知识）(代码片段)


个人简介👀个人主页：前端杂货铺🙋‍♂️学习方向：主攻前端方向，也会涉及到服务端📃个人状态：在校大学生一枚，已拿多个前端offer（秋招）🚀未来打算：为中国的工业软件...  查看详情  

                

2023年web前端开发学习路线图


目录前言第一阶段：新手入门1.Web前端零基础入门HTML5+CSS3+前端项目2.移动web开发实战第二阶段：技术进阶1.JavaScript深入浅出-0基础入门神器2.JavaScript核心之WebAPIs3.数据交互&异步编程-前端进阶Ajax零基础入门第三阶...  查看详情  

                

node.js实战一文带你开发博客项目之联调（导入htmlnginx反向代理cors解决跨域与前端联调）(代码片段)


个人简介👀个人主页：前端杂货铺🙋‍♂️学习方向：主攻前端方向，也会涉及到服务端📃个人状态：在校大学生一枚，已拿多个前端offer（秋招）🚀未来打算：为中国的工业软件...  查看详情  

                

青训营node.js基础-web应用开发-开发调试-线上部署(代码片段)


...录Web应用开发HTTP模块Koa介绍中间件常用中间件基于Koa的前端框架调试断点调试日志调试线上部署利用多核CPU进程守护复杂计算前端开发与后端开发对比前几天学了一些Node.js的基础，今天来学习Web应用开发，在开发过程中...  查看详情  

                

高阶前端开发人员必备工具-node.js知识讲解


想要成为一个“值钱”的高阶Web前端开发人才，Node.JS是必须要掌握的技术之一。今天小千就为大家详细讲解Node.JS的知识，让你完全了解Node.JS的前世今生。1、说起Node.js你了解多少呢？Node.js是一个基于ChromeV8引擎的Java...  查看详情  

                

web前端之移动端课程开发之06.bootstrap(代码片段)


Bootstarp介绍bootstarp是Twitter公司开发基于html,css,js的前端框架为实现web应用程序快速实现开发提供了一套前端工具包UI（userInterface用户界面）框架Bootstrap的特性响应式设计(css媒体查询一套样式实现各个终端尺寸适配)pc平板...  查看详情  

                

web前端之移动端课程开发之06.bootstrap(代码片段)


Bootstarp介绍bootstarp是Twitter公司开发基于html,css,js的前端框架为实现web应用程序快速实现开发提供了一套前端工具包UI（userInterface用户界面）框架Bootstrap的特性响应式设计(css媒体查询一套样式实现各个终端尺寸适配)pc平板...  查看详情  

                

五个最佳案例带你解读node.js的前后之道


...Node不是JS应用、而是一个Javascript的运行环境。Node保留了前端浏览器js的接口，没有改写语言本身的任何特性，依旧基于作用域和原型链。Node.js是一个为实时Web（Real-timeWeb）应用开发而诞生的平台，它从诞生之初就充分考虑了在...  查看详情  

                

node.js实战一文带你开发博客项目之koa2重构（实现session开发路由联调日志）(代码片段)


个人简介👀个人主页：前端杂货铺🙋‍♂️学习方向：主攻前端方向，也会涉及到服务端📃个人状态：在校大学生一枚，已拿多个前端offer（秋招）🚀未来打算：为中国的工业软件...  查看详情  

                

web前端开发应该具备哪些知识


1.HTML5+CSS32.JavaScript3.JavaWeb4.前端框架开发boostrap.js、node.js、Angular.js、react.js、jQuery.js、vue.js5.小程序开发6.可视化大数据Echart.js7.webpack8.ES6语法9.TypeScript10.gulp工具11.stylus/less/Sass12.git和svn工具13.gith  查看详情  

                

web前端课程技术总结node.js使用方法及相关方法分析


Node.js使用方法及相关方法分析 首先我们要了解什么是node.js？官方解释是：node.js是一个基于Chromev8引擎的javascript运行环境。Node.js使用了一个事件驱动、非阻塞式I/O的模型，使其轻量又高效。他是由c++编写的所以速度很快简...  查看详情  

                

web前端课程技术总结node.js使用方法及相关方法分析


Node.js使用方法及相关方法分析首先我们要了解什么是node.js？官方解释是：node.js是一个基于Chromev8引擎的javascript运行环境。Node.js使用了一个事件驱动、非阻塞式I/O的模型，使其轻量又高效。他是由c++编写的所以速度很快简单来...  查看详情  

                

node.js+vue+mysql项目实战入门之环境搭建，项目创建-附github地址(代码片段)


Node进行后端开发，Vue进行前端页面的开发，实现了前后端的分离。在开发中使用Express框架可以快速地开发web应用程序。1.安装node.js下载对应版本的，网址：Download|Node.js；进行傻瓜式安装：最后点击install...  查看详情  

                

结对-五子棋游戏-开发过程


项目所在地址：https://gitee.com/zixiao520/h5WuZiQi/tree/mastercss与js都采用内联式1.创建canvas:html代码部分1<!DOCTYPEhtml>2<html>3<head>4<metacontent="text/html;charset=utf-8"/>5<title></t  查看详情  

                

web前端技术内容详解之vue.js框架(代码片段)


Vue.js是一个渐进式框架，只需要具备基本的HTML/CSS/JavaScript基础就可以快速上手。在用Vue.js构建大型应用时推荐使用NPM安装，但是需要注意npm的版本需要大于3.0。在通过npm安装项目后，我们需要对其目录进行解析：（1）Build：项...  查看详情  

                

node.js+vue+mysql项目实战入门之环境搭建，项目创建-附github地址(代码片段)


Node进行后端开发，Vue进行前端页面的开发，实现了前后端的分离。在开发中使用Express框架可以快速地开发web应用程序。 1.安装node.js下载对应版本的，网址：https://nodejs.org/en/download/；进行傻瓜式安装：最...  查看详情  

                

结对编程-五子棋游戏-开发过程


 1.项目所在地址：https://gitee.com/g961231/WuZiQi/commits/master2.CSS和JS都采用内联式3.创建canvas:html代码部分1<!DOCTYPEhtml>2<html>3<head>4<metacontent="text/html;charset=utf-8"/>5<title&  查看详情