这是博主做的一个移动端五子棋小游戏，请使用手机体验。由于希望能有迭代开发的感觉，所以暂时只支持双人对战且无其他提示及对战界面，只有胜利提示，悔棋、对战双方显示、人机对战、集成TS(用于学习)、和局等功能，将在后续持续更新, 此外React组件版本也将在后续更新, 敬请期待!该项目已发布npm包，由于需要绑定DOM，所以使用方法如下：

使用方法

先使用以下命令下载npm包

npm install jobsofferings-backgammon --save-dev

在node_modules会出现这个文件夹jobsofferings-backgammon,里面有对应JS文件，导入即可

假设

目录

node_modules/

    jobsofferings-backgammon/

        // some files

index.html

package.json

...

html文件导入JS

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <title>backgammon</title>

</head>

<body>

    <div id="chess"></div>

    <script src="./node_modules/jobsofferings-backgammon/index.js"></script>

    <script>

        const chess = document.getElementById('chess');

        const fiveChess = FiveChess.getInstance(chess, 420)

        fiveChess.init();

    </script>

</body>

</html>

这个是具体效果

  讲到这里，我给大家分享一下如何制作一个自己的npm包发布到npm社区

  1. 首先你需要去npm的官方网站注册一个账号，链接为https://www.npmjs.com/

  2. 创建一个文件夹，npm init初始化一个package.json文件，必须有这个文件才可以上传，我的package.json如下，注意上传的时候不可重名

{

  "name": "jobsofferings-backgammon",

  "version": "1.0.1",

  "description": "this is my backgammon game",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "author": "jobsofferings",

  "license": "ISC"

}

  1. 使用npm login登录，分别输入你的用户名、密码、邮箱，最好使用QQ邮箱

  2. npm config set registry https://registry.npmjs.org/ 使用此命令将替换为原的镜像，不可是淘宝镜像

  3. npm publish 上传, 注意如果需要更新版本，version需要进行修改

  4. npm unpublish --force 删除已经上传了的固定版本npm包

  具体设计过程将在人机智能对战功能更新后完善。

  使用过程中有什么BUG或是建议欢迎大家滴滴我，谢谢！

JavaScript五子棋第二版的更多相关文章

  1. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  2. JavaScript 多级联动浮动(下拉)菜单 (第二版)

    JavaScript 多级联动浮动(下拉)菜单 (第二版)   上一个版本(第一版请看这里)基本实现了多级联动和浮动菜单的功能,但效果不是太好,使用麻烦还有些bug,实用性不高.这次除了修改已发现的问 ...

  3. Javascript DOM 编程艺术（第二版）读书笔记——基本语法

    Javascript DOM 编程艺术(第二版),英Jeremy Keith.加Jeffrey Sambells著,杨涛.王建桥等译,人民邮电出版社. 学到这的时候,我发现一个问题:学习过程中,相当一 ...

  4. 《JavaScript高级程序设计》(第二版)

    这本书的作者是 Nicholas C.Zakas ,博客地址是 http://www.nczonline.net/ ,大家可以去多关注,雅虎的前端工程师,是YUI的代码贡献者,可想而知这本书得含金量, ...

  5. Lucene.net站内搜索—6、站内搜索第二版

    目录 Lucene.net站内搜索—1.SEO优化 Lucene.net站内搜索—2.Lucene.Net简介和分词Lucene.net站内搜索—3.最简单搜索引擎代码Lucene.net站内搜索—4 ...

  6. 基于Html5的爱情主题网站–表白神器(第二版)

    第二版在第一版的基础上增加了一个动态3D的白云效果背景,鼠标悬浮在页面上云朵会向屏幕Z轴方向运动,在第一人称视角看来向着云朵方向前进的,由此形成一个伪3D效果.有点绕,直接看demo就能理解了.3D白 ...

  7. js仿百度文库文档上传页面的分类选择器_第二版

    仿百度文库文档上传页面的多级联动分类选择器第二版,支持在一个页面同一时候使用多个分类选择器. 此版本号把HTML,CSS,以及图片都封装到"category.js"中.解决因文件路 ...

  8. 锋利的jQuery（第二版）学习总结

    通过对<锋利的jQuery>(第二版)一书的学习,发现此书讲解通俗易懂,是学习jQuery的一本很好的指导书,特作如下总结. 此书主要讲解了jQuery的常用操作,包括认识jQuery,j ...

  9. （备忘）Nginx中文手册（技术指南第二版）

    Nginx 常见应用技术指南[Nginx Tips] 第二版 目 录 一. Nginx 基础知识二. Nginx 安装及调试三. Nginx Rewrite四. Nginx Redirect五. Ng ...

随机推荐

  1. 2020ubuntu1804server编译安装redis5笔记（二）配置redis

    前一篇笔记记录了ubuntu1804server编译安装redis5,接下来要配置redis5了 网址:https://www.cnblogs.com/qumogu/p/12435694.html 第 ...

  2. 第四篇（1）：企业常用Linux web环境安装配置（apache、php、mysql）

    上篇我们讲了基本的软件包管理和文件操作什么的,现在也要动手安装点有用的东西了吧! 本篇我会写出一个用yum安装apache.php.mysql的方法,最后再运行phpMyAdmin来管理数据库. 1. ...

  3. windows7免费永久激活方法分享

    前言 我相信,这里肯定有看过我上一篇博客的同学. 我说了,为解决windows7激活问题,我会找一个比较好的方法. 首先先让大家看一看激活前windows7的计算机属性: 显示是未激活的.下面就是方法 ...

  4. Apache Tomcat 文件包含漏洞（CVE-2020-1938）

    2月20日,国家信息安全漏洞共享平台(CNVD)发布了Apache Tomcat文件包含漏洞(CNVD-2020-10487/CVE-2020-1938).该漏洞是由于Tomcat AJP协议存在缺陷 ...

  5. Simulink仿真入门到精通（四） Simulink子系统

    4.1 Simulink子系统详解 4.1.1 子系统概述 Simulink根据仿真特性将模块的属性分为两种:虚拟模块和非虚拟模块. 非虚拟模块在仿真过程中起到实际的作用,对其进行编辑或者增加删除操作 ...

  6. 今天对C语言不常用的小东西的了解

    今天又翻了C语言的书,看到const语句,一时间想不起来到底是干嘛的,看语句const   int   a=1;明白了这是一个支持常量指定类型的定义常量的关键字,作用几乎与#define一毛一样,但# ...

  7. Antd 表格内通过rowClassName实现隔行变色的显示方法(转载）

    ant design中 table组件很方便,在项目中遇到了需要实现奇偶行颜色不同以方便阅读的功能,主要用到了rowClassName这一api,通过判断index的奇偶来实现不同的样式分配. row ...

  8. mysql5.7 ERROR 1045 (28000): Access denied for user解决方法

    https://blog.csdn.net/csy2961903/article/details/51345401  参考此文注意指名数据库mysql.user

  9. 记一次Maven发布Jar包中文乱码解决方法

    Maven deploy 乱码 今天使用Maven发布Jar包时,发布功能都是正常的也成功上传到了仓库,就是项目跑越来后出中文中现了乱码: { "code": "SUCC ...

  10. 懂一点Python系列——快速入门

    本文面相有 一定编程基础 的朋友学习,所以略过了 环境安装.IDE 搭建 等一系列简单繁琐的事情. 一.Python 简介 Python 英文原意为 "蟒蛇",直到 1989 年荷 ...