这是博主做的一个移动端五子棋小游戏,请使用手机体验。由于希望能有迭代开发的感觉,所以暂时只支持双人对战且无其他提示及对战界面,只有胜利提示,悔棋、对战双方显示、人机对战、集成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. MATLAB神经网络(5) 基于BP_Adaboost的强分类器设计——公司财务预警建模

    5.1 案例背景 5.1.1 BP_Adaboost模型 Adaboost算法的思想是合并多个“弱”分类器的输出以产生有效分类.其主要步骤为:首先给出弱学习算法和样本空间($X$,$Y$),从样本空间 ...

  2. 用Setuptools构建和分发程序包

    目录 使用Setuptools构建和分发软件包 开发人员指南 安装setuptools 基本使用 指定项目的版本 新增和更改的setup()关键字 包括数据文件 参考示例 使用Setuptools构建 ...

  3. javaScript 基础知识汇总 (十五)

    1.模块简介 什么是模块: 模块就是一个文件,一个脚本,通过关键字export 和 import 交换模块之间的功能. export 关键字表示在当前模块之外可以访问的变量和功能. import 关键 ...

  4. C#winform如何主窗口最大化最小化默认大小

    this.WindowState = FormWindowState.Minimized; bool b = true; private void button2_Click(object sende ...

  5. JavaScript每日学习日记(1)

    8.11.2019 1. lastIndexOf() 方法从尾到头进行检索. 2. 有三种提取部分字符串的方法: 2.1 slice(start, end)  如果某个参数为负,则从字符串的结尾开始计 ...

  6. Python基础 | 日期时间操作

    目录 获取时间 时间映射 格式转换 字符串转日期 日期转字符串 unixtime 时间计算 时间偏移 时间差 "日期时间数据"作为三大基础数据类型之一,在数据分析中会经常遇到. 本 ...

  7. python之路---协程

    阅读目录 一 引子 二 协程介绍 三 Greenlet模块 四 Gevent模块 引子 之前我们学习了线程.进程的概念,了解了在操作系统中进程是资源分配的最小单位,线程是CPU调度的最小单位.按道理来 ...

  8. spring官方demo及配置查看

    1.http://spring.io/projects/spring-framework 2.https://github.com/spring-projects/spring-mvc-showcas ...

  9. 新手版超详细LoadRunner12完整安装+汉化过程

      01下载 首先从百度网盘获取到这几个文件(网盘地址会附在文末,过期请联系): 我安装的是社区版+中文汉化过的,使用我只下载了第一个和第三个文件,下面我将讲一下如何安装. 02安装社区版 1.选择“ ...

  10. laravel的中间件创建思路

    网上有很多解析laravel中间件的实现原理,但是不知道有没有读者在读的时候不明白,作者是怎么想到要用array_reduce函数的? 本文从自己的角度出发,模拟了如果我是作者,我是怎么实现这个中间件 ...