html+js+node实现五子棋线上对战,五子棋最简易算法

时间:2022-10-29 23:50:15

首先附上我的github地址,https://github.com/jiangzhenfei/five,线上实例:http://47.93.103.19:5900/client/

线上实例,你可以随意起用户名,房间号,然后让你同事或者自己再打开一个网页,输入任意用户名,但是房间号一样才可以进入同一个房间对战

本地运行,拷贝代码,npm install依赖,进入server文件夹,执行 node index.js,然后直接在页面打开client里面的index.html文件夹即可

详细的源码和解释都是在那里,本次实现的是五子棋线上对战,

技术点:

1.client/chess.js 该文件是五子棋算法,算法也很简单,棋盘的每一行个数一样,那么当你落子那一刻(左边为 x ),该左边边上的坐标都是知道的,比如我一行11个子,那么该落子右边为x+1,左边x-1,正头顶x-11,正下方x+11,左上x-10 ...,于是我们只要计算包括该落子在内的米子线上是否满足5个,下面我举一条线上算法,一条线上只要满足图中5个情况的一个即为该棋子赢了

html+js+node实现五子棋线上对战,五子棋最简易算法

2.后端在server文件夹,使用socket.io长连接持续推送给前端,要点是使用发布订阅模式,订阅一个房间的用户,给该房间的用户信息同步。

3.client/checkerboard.js 该文件是使用canvas绘制棋盘

4.client/resolve.js 该文件是页面操作处理,包括进入房间,棋盘点击,棋子渲染

5.server/index.js 该文件是后端处理,包括房间的订阅,房间信息的同步

6.server/subscrible.js 该文件是发布订阅模式代码

html+js+node实现五子棋线上对战,五子棋最简易算法的更多相关文章

  1. 如何将你的node服务放到线上服务器

    最近在用node写后端数据处理,以前虽然也用node写数据来进行测试,但是一直都是处于本地使用, 今天想将node作为后端服务来处理数据, 特此,以此博客记录. 第一步,写node 接口, 在本地我们 ...

  2. Vue.js项目实战-打造线上商城

    首先上一下完成后的效果: 首页: 商品详情页: 购物车页(其实还有个订单页,只是和购物车页基本类似,所以就不截图啦): 开始项目: 由于涉及的是前后端分离,所以我们的后台数据就模拟存储于浏览器端(co ...

  3. Vue 2.x 3.x 配置项目开发环境跟线上环境

    先找到package.json  (这是nuxt版的vue 可能会跟一般vue不一样  当然总体上差不多的) "scripts": { "dev": &quot ...

  4. 轻松排查线上Node内存泄漏问题

    I. 三种比较典型的内存泄漏 一. 闭包引用导致的泄漏 这段代码已经在很多讲解内存泄漏的地方引用了,非常经典,所以拿出来作为第一个例子,以下是泄漏代码: 'use strict'; const exp ...

  5. Node线上部署管理器PM2

    PM2是一个带有负载均衡功能的Node应用的进程管理器.PM2可以利用服务器上的所有CPU,并保证进程永远都活着,0秒的重载,部署管理多个Node项目.PM2是Node线上部署完美的管理工具. PM2 ...

  6. Docker + node(koa) + nginx + mysql 线上环境部署

    在上一篇 Docker + node(koa) + nginx + mysql 开发环境搭建,我们进行了本地开发环境搭建 现在我们就来开始线上环境部署 如果本地环境搭建没有什么问题,那么线上部署的配置 ...

  7. 前端开发流程之(线上)绝对地址(图片+css+js)

    重要提醒:前端写完-----发邮件通知项目组 1:写好的前段资源包上传到SVN上之后,相关的图片.CSS.js文件要换成线上地址给后台开发. 2:图片-----压缩(https://tinypng.c ...

  8. 如何使用Fiddler调试线上JS代码

    大家平时肯定都用过火狐的Firebug或者谷歌的调试工具来调试JS,但遗憾的是我们不能像编辑html,css那样来直接新增或者删除JS代码. 虽然可以通过调试工具的控制台来动态执行JS代码,但有时候却 ...

  9. Node+mongodb线上部署到阿里云

    Node+mongodb线上部署到阿里云 部署使用的主要工具是pm2+nginx,使用码云的私有仓库,自动部署到服务器,私有仓库和服务器要事先设置好免密码登录.使用DNSPOD进行域名解析.事先准备好 ...

随机推荐

  1. C#委托Action、Action<T>、Func<T>、Predicate<T>

    CLR环境中给我们内置了几个常用委托Action. Action<T>.Func<T>.Predicate<T>,一般我们要用到委托的时候,尽量不要自己再定义一 个 ...

  2. js-分享107个js中的非常实用的小技巧(借鉴保存)

    转载原文:http://***/Show.aspx?id=285 1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:doc ...

  3. data-icon&equals;&quot&semi;&quot&semi;图片还可以是自定义的?

    自定义的图片怎么写啊? data-icon = "地址" 不对啊????? 不是写地址,而是设置css 比如 data-icon="mm" 那么在css中肯定有 ...

  4. 怎样安装WIN7系统

    如何避免win7自动创建200M隐藏分区 1 安装win7到选择安装到哪个分区的时候,不能选择 unallocated diskspace ,也不能选 delete 已有的分区(例如C盘)安全的做法是 ...

  5. Vulkan Tutorial 17 Rendering and presentation

    操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Visual Studio 2017 Setup 这一章节会把之前的所有内容进行整合.我们将会编写drawFrame函数, ...

  6. PornHub 正式发布 AI自动标注色情演员引擎

    http://igeekbar.com/igeekbar/post/501.htm Pornhub已经宣布推出一款全新的成人片识别引擎,这款引擎由AI驱动,使用计算机视觉技术自主检测和识别成人片内容以 ...

  7. Forth 内存布局

    body, table{font-family: 微软雅黑} table{border-collapse: collapse; border: solid gray; border-width: 2p ...

  8. C&num;比较时分秒大小,终止分钟默认加十分钟,解决跨天、跨月、跨年的情况

    private void cmbInHostimes_SelectedIndexChanged(object sender, EventArgs e) { DataRow[] dr; if (chkM ...

  9. 移动端打印输出内容以及网络请求-vconsole&period;js

    今天,无意间从别人那里得知一个很好的js插件--vconsole.min.js,可以实现在移动端打印输出内容以及查看网络请求.下面记录使用方式. 1.下载vconsole.min.js插件 以下复制了 ...

  10. SSH整合不错的博客

    https://blog.csdn.net/struggling_rong/article/details/63153833?locationNum=9&fps=1  好好看看看哦