html+js+node实现五子棋线上对战,五子棋最简易算法
首先附上我的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个情况的一个即为该棋子赢了

2.后端在server文件夹,使用socket.io长连接持续推送给前端,要点是使用发布订阅模式,订阅一个房间的用户,给该房间的用户信息同步。
3.client/checkerboard.js 该文件是使用canvas绘制棋盘
4.client/resolve.js 该文件是页面操作处理,包括进入房间,棋盘点击,棋子渲染
5.server/index.js 该文件是后端处理,包括房间的订阅,房间信息的同步
6.server/subscrible.js 该文件是发布订阅模式代码
html+js+node实现五子棋线上对战,五子棋最简易算法的更多相关文章
- 如何将你的node服务放到线上服务器
最近在用node写后端数据处理,以前虽然也用node写数据来进行测试,但是一直都是处于本地使用, 今天想将node作为后端服务来处理数据, 特此,以此博客记录. 第一步,写node 接口, 在本地我们 ...
- Vue.js项目实战-打造线上商城
首先上一下完成后的效果: 首页: 商品详情页: 购物车页(其实还有个订单页,只是和购物车页基本类似,所以就不截图啦): 开始项目: 由于涉及的是前后端分离,所以我们的后台数据就模拟存储于浏览器端(co ...
- node开启 https线上服务你不会吗?
var https=require("https");//https服务var fs = require("fs")var express = require( ...
- Vue 2.x 3.x 配置项目开发环境跟线上环境
先找到package.json (这是nuxt版的vue 可能会跟一般vue不一样 当然总体上差不多的) "scripts": { "dev": " ...
- 轻松排查线上Node内存泄漏问题
I. 三种比较典型的内存泄漏 一. 闭包引用导致的泄漏 这段代码已经在很多讲解内存泄漏的地方引用了,非常经典,所以拿出来作为第一个例子,以下是泄漏代码: 'use strict'; const exp ...
- Node线上部署管理器PM2
PM2是一个带有负载均衡功能的Node应用的进程管理器.PM2可以利用服务器上的所有CPU,并保证进程永远都活着,0秒的重载,部署管理多个Node项目.PM2是Node线上部署完美的管理工具. PM2 ...
- Docker + node(koa) + nginx + mysql 线上环境部署
在上一篇 Docker + node(koa) + nginx + mysql 开发环境搭建,我们进行了本地开发环境搭建 现在我们就来开始线上环境部署 如果本地环境搭建没有什么问题,那么线上部署的配置 ...
- 前端开发流程之(线上)绝对地址(图片+css+js)
重要提醒:前端写完-----发邮件通知项目组 1:写好的前段资源包上传到SVN上之后,相关的图片.CSS.js文件要换成线上地址给后台开发. 2:图片-----压缩(https://tinypng.c ...
- 如何使用Fiddler调试线上JS代码
大家平时肯定都用过火狐的Firebug或者谷歌的调试工具来调试JS,但遗憾的是我们不能像编辑html,css那样来直接新增或者删除JS代码. 虽然可以通过调试工具的控制台来动态执行JS代码,但有时候却 ...
随机推荐
- JTS空间分析工具包(GIS开源)学习 JAVA
JST空间分析工具包是一套JAVA API,提供一系列的空间数据分析操作.最近开发项目刚好需要用到,上网搜资料也少,就自己写下来记录一下.C++版本的拓扑分析开源工具叫:geos:.NET版本的拓扑分 ...
- VMbox复制虚拟机后网卡问题-bring up interface eth0:Device eth0 does not seem to be present
1.使用 ifconfig -a 查看mac地址 eg:HWaddr:08:00:29:B2:2B 2.vi /etc/sysconfig/network-scripts/ifcfg-eth0 将 ...
- [计算机网络] TCP的拥塞控制
引言 计算机网络中的带宽.交换结点中的缓存和处理机等,都是网络的资源.在某段时间,若对网络中某一资源的需求超过了该资源所能提供的可用部分,网络的性能就会变坏.这种情况就叫做拥塞. 拥塞控制就是防止过多 ...
- js 复制到剪贴板 兼容还得自己想办法
clipboard.js https://github.com/zenorocha/clipboard.js/ 主要问题还是ie8, 可以使用ie 特有的方法 if (window.clipboard ...
- 【bzoj4326】[NOIP2015]运输计划 二分答案+LCA
题目描述 公元 2044 年,人类进入了宇宙纪元.L 国有 n 个星球,还有 n−1 条双向航道,每条航道建立在两个星球之间,这 n−1 条航道连通了 L 国的所有星球.小 P 掌管一家物流公司, 该 ...
- jQuery全选反选实例
1. $('#tb:checkbox').each(function(){ 每次都会执行 全选-取消操作,注意$('#tb :checkbox').prop('checked',true); tb后面 ...
- NetScaler ‘Counters’ Grab-Bag!
NetScaler ‘Counters’ Grab-Bag! https://www.citrix.com/blogs/author/andrewre/ https://www.citrix.com/ ...
- 具体数学数论章-----致敬Kunth
整除性(divisible): 引入了代表整除性. m\n (m|n) 表示m整除n.注意这里的整除.表示的是n = km(k为整数). 在整除性这里.m必须是个正数.也许你可以描述n 是 m 的k倍 ...
- [SCOI2013]摩托车交易 kruskal重构树(最大生成树) 倍增
---题面--- 题解: 这题想法简单,,,写起来真的是失智,找了几个小时的错误结果是inf没开到LL范围.... 首先我们需要找到任意两点之间能够携带黄金的上限值,因为是在经过的道路权值中取min, ...
- React的setState执行机制
1. setState基本特点 1. setState是同步执行的 setState是同步执行的,但是state并不一定会同步更新 2. setState在React生命周期和合成事件中批量覆盖执行 ...