JavaScript五子棋第二版
这是博主做的一个移动端五子棋小游戏，请使用手机体验。由于希望能有迭代开发的感觉，所以暂时只支持双人对战且无其他提示及对战界面，只有胜利提示，悔棋、对战双方显示、人机对战、集成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社区
首先你需要去npm的官方网站注册一个账号，链接为https://www.npmjs.com/
创建一个文件夹，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"
}
使用npm login登录，分别输入你的用户名、密码、邮箱，最好使用QQ邮箱
npm config set registry https://registry.npmjs.org/ 使用此命令将替换为原的镜像，不可是淘宝镜像
npm publish 上传, 注意如果需要更新版本，version需要进行修改
npm unpublish --force 删除已经上传了的固定版本npm包
具体设计过程将在人机智能对战功能更新后完善。
使用过程中有什么BUG或是建议欢迎大家滴滴我，谢谢！
JavaScript五子棋第二版的更多相关文章
- 读书笔记：JavaScript DOM 编程艺术（第二版）
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
- JavaScript 多级联动浮动(下拉)菜单 (第二版)
JavaScript 多级联动浮动(下拉)菜单 (第二版) 上一个版本(第一版请看这里)基本实现了多级联动和浮动菜单的功能,但效果不是太好,使用麻烦还有些bug,实用性不高.这次除了修改已发现的问 ...
- Javascript DOM 编程艺术（第二版）读书笔记——基本语法
Javascript DOM 编程艺术(第二版),英Jeremy Keith.加Jeffrey Sambells著,杨涛.王建桥等译,人民邮电出版社. 学到这的时候,我发现一个问题:学习过程中,相当一 ...
- 《JavaScript高级程序设计》(第二版)
这本书的作者是 Nicholas C.Zakas ,博客地址是 http://www.nczonline.net/ ,大家可以去多关注,雅虎的前端工程师,是YUI的代码贡献者,可想而知这本书得含金量, ...
- Lucene.net站内搜索—6、站内搜索第二版
目录 Lucene.net站内搜索—1.SEO优化 Lucene.net站内搜索—2.Lucene.Net简介和分词Lucene.net站内搜索—3.最简单搜索引擎代码Lucene.net站内搜索—4 ...
- 基于Html5的爱情主题网站–表白神器(第二版)
第二版在第一版的基础上增加了一个动态3D的白云效果背景,鼠标悬浮在页面上云朵会向屏幕Z轴方向运动,在第一人称视角看来向着云朵方向前进的,由此形成一个伪3D效果.有点绕,直接看demo就能理解了.3D白 ...
- js仿百度文库文档上传页面的分类选择器_第二版
仿百度文库文档上传页面的多级联动分类选择器第二版,支持在一个页面同一时候使用多个分类选择器. 此版本号把HTML,CSS,以及图片都封装到"category.js"中.解决因文件路 ...
- 锋利的jQuery（第二版）学习总结
通过对<锋利的jQuery>(第二版)一书的学习,发现此书讲解通俗易懂,是学习jQuery的一本很好的指导书,特作如下总结. 此书主要讲解了jQuery的常用操作,包括认识jQuery,j ...
- （备忘）Nginx中文手册（技术指南第二版）
Nginx 常见应用技术指南[Nginx Tips] 第二版 目 录 一. Nginx 基础知识二. Nginx 安装及调试三. Nginx Rewrite四. Nginx Redirect五. Ng ...
随机推荐
- 深度学习与人类语言处理-语音识别(part1)
语音识别 语音识别该何去何从? 1969年,J.R. PIERCE:"语音识别就像把水变成汽油.从大海中淘金.治疗癌症.人类登陆月球" 当然,这是50年前的想法,那么语音识别该如何 ...
- css 实战技巧
css 看起来比较简单,但是要想做的好也不是那么容易,我们在平时开发中,主要用css 来美化我们的html结构,所有我觉得css 还是挺重要的,这里记录整理一些关于css 的技巧以及容易忘记的知识点. ...
- Vue2.0 【第四季】第1节 实例入门-实例属性
目录 Vue2.0 [第四季]第1节 实例入门-实例属性 第1节 实例入门-实例属性 一.Vue和Jquery.js一起使用 二.实例调用自定义方法 Vue2.0 [第四季]第1节 实例入门-实例属性 ...
- 树链剖分与倍增求LCA
树链剖分与倍增求\(LCA\) 首先我要吐槽机房的辣基供电情况,我之前写了一上午,马上就要完成的时候突然停电,然后\(GG\)成了送链剖分 其次,我没歧视\(tarjan LCA\) 1.倍增求\(L ...
- 免费获取 Jetbrain 全家桶使用兑换码的正确姿势！
自今年1月份以Jetbrain公司严厉打击旗下开发工具产品(如:IntelliJ IDEA.WebStorm.PyCharm等)的盗版破解以来.求新破解方式.分享新破解方法的帖子或信息经常可以在各技术 ...
- C语言格式化输出
1.%d 十进制有符号整数int. 2.%u 十进制无符号整数. 3.%ld 输出long整数 . 4.%s 字符串. 5.%c 单个字符. 6.%p 指针的值. 7.%e 指数形式的浮点数. 8.% ...
- Natas7 Writeup（任意文件读取漏洞）
Natas7: 页面出现了两个选项,点击后跳转,观察url发现了page参数,猜测可能存在任意文件读取漏洞. 且源码给了提示,密码在/etc/natas_webpass/natas8 中. 将/etc ...
- angular vue通过node启动项目局域网内关闭防火墙无法访问的解决办法
先试 ng serve --host 0.0.0.0 不行再试 ng serve --host 0.0.0.0 --disable-host-check
- shiro拦截所有报 Uncaught SyntaxError: Unexpected token '<' 解决方法
改成 -> filterChainDefinitionMap.put("/css/**", "anon");filterChainDefinitionMa ...
- 部署harbor以https模式和k8s对接
集群时间同步 我们在之前的kubeasz部署高可用kubernetes1.17.2 并实现traefik2.1.2部署篇已经实现了基于chrony的时间同步 [root@bs-k8s-master01 ...