首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

js实现双人五子棋小游戏

Posted in Javascript onMay 28, 2020

本文实例为大家分享了js实现双人五子棋小游戏的具体代码，供大家参考，具体内容如下

这是自己自学js的时候，在网上找的js源码，由于是自学，花了数小时才把这个源码大致弄明白。
大致算法 自定义棋盘规格，直接在棋盘建新div就可以，长度宽度用计算就可以了。下棋，在div里再建class，这里要给每个class标一个site值，由site值写出该棋子竖直方向和横向的坐标，由坐标可以写出棋子胜利的条件。而棋子的黑白走是用标识符，偶的标识符则是白棋子的class。奇的标识符则是黑棋子的class。

ps 我遇到的一些问题在代码中有注释

<!DOCTYPE html>
<html>
<head>
 <title>五子棋</title>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
 <style>
 /* 简单初始化 */
 html,body,section,div,p{
 padding: 0;
 margin: 0;
 font-size: 12px;
 }
 body{
 width: 100%;
 height: 100%;
 position: fixed;
 }
 /* 棋盘 */
 #chessboard{
 width: 90vmin;
 min-height: 89vmin;
 margin: calc(50vh - 46vmin + 2px) auto;
 background: #f5ca69;
 border: 2px solid #000;
 border-radius: 7px;
 -webkit-box-shadow: .1rem .1rem .05rem rgba(0,0,0,.5), 
       -.1rem -.1rem .05rem rgba(0,0,0,.5) ; 
  box-shadow: .1rem .1rem .05rem rgba(0,0,0,.5), 
       -.1rem -.1rem .05rem rgba(0,0,0,.5) ; 
 }
 /* after伪元素,载入chessboard后发生 */
 #chessboard::after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
 }
 #chessboard div{
 width: calc(9vmin - 2px);
 height: calc(9vmin - 2px);
 float: left;
 border: 1px solid #000;
 border-radius: 5px;
 }
 #chessboard div p{
  width: 97%;
  height: 97%;
  margin: 1.5% auto;
 border-radius: 100%;
 }
 /* 白棋子 */
 .white{
 background: -webkit-radial-gradient(at 35% 35%,#FFF,#CCC,#FFF);
  background: -o-radial-gradient(at 35% 35%,#FFF,#CCC,#FFF); 
  background: -moz-radial-gradient(at 35% 35%,#FFF,#CCC,#FFF); 
  background: radial-gradient(at 35% 35%,#FFF,#CCC,#FFF); 
 box-shadow: .1rem .1rem .05rem rgba(0,0,0,.5);
 }
 /* 黑棋子 */
 .black{
 background: -webkit-radial-gradient(at 30% 30%,#999 -13%,#000 35%,#999 200%);
  background: -o-radial-gradient(at 30% 30%,#999 -13%,#000 35%,#999 200%); 
  background: -moz-radial-gradient(at 30% 30%,#999 -13%,#000 35%,#999 200%); 
  background: radial-gradient(at 30% 30%,#999 -13%,#000 35%,#999 200%); 
 box-shadow: .1rem .1rem .05rem rgba(0,0,0,.5);
 }
 #mask{
 width: 100%;
 height: 100vh;
 position: fixed;
 top: 0;
 left: 0;
 background-color: rgba(0,0,0,.7);
 }
 .conBox{
 display: block;
 width: 300px;
 height: 200px;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 margin: auto;
 background-color: #fff;
 border-radius: 3px;
 box-shadow: .1rem .1rem .05rem rgba(0,0,0,.5);
 }
 .conBox h1{
 width: 100%;
 float: left;
 margin: 0;
 line-height: 45px;
 text-align: center;
 }
 .conBox p{
 display: block;
 width: 40px;
 height: 40px;
 float: left;
 margin-top: 40px;
 font-size: 32px;
 text-align: center;
 line-height: 40px;
 cursor: pointer;
 }
 .conBox p:nth-child(2){
 margin-left: 60px;
 }
 .conBox p:nth-child(3){
 width: 100px;
 font-size: 20px;
 cursor: initial;
 }
 .conBox button{
 width: 80px;
 float: left;
 margin-top: 30px;
 margin-left: 110px;
 color: #fff;
 font-size: 14px;
 text-align: center;
 line-height: 28px;
 background-color: #f60;
 border: none;
 outline: none;
 }
 .clear::after{
 content: "";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;
 }
 .border,
 .borderTop,
 .borderBot
 {
 position: relative;
 }
 .border:after{
 content: " ";
  width: 200%;
  height: 200%;
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  box-sizing: border-box;
 }
 .borderBot:after{
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
 }
 .borderTop:before{
 content: " ";
  position: absolute;
  left: 0; 
  top: 0;
  right: 0; 
  height: 1px;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
 }
 </style>
 <script>
 // onload为浏览器对象中的事件,页面载入时触发
 window.function(){
 var grid;
 var chessArr = [];
 var timer = 0;
 var lineNum = parseInt(gridNum.innerHTML);
 // 获取元素
 var box = document.getElementById('chessboard');
 var chessBox = box.getElementsByTagName('div');
 var submitBtn = document.getElementById('submitBtn');
 // 减去规格
 subBtn.onclick = function(){
 if ( lineNum > 8 ) {
  lineNum--;
 }
 // innerHTML为gridNum的全元素
 gridNum.innerHTML = lineNum;
 }
 // 加上规格
 addBtn.onclick = function(){
 if ( lineNum < 14 ) {
  lineNum++;
 }
 gridNum.innerHTML = lineNum;
 }

 //棋盘初始化
 submitBtn.onclick = function(){
 var chessMaxNum = lineNum * lineNum;
 var chessWH = 90/lineNum;
 for (var i = 0; i < chessMaxNum; i++) {
  // 设置棋盘里小格子div元素
  grid = document.createElement('div');
  grid.style.width = 'calc(' + chessWH + 'vmin - 2px)';
  grid.style.height = 'calc(' + chessWH + 'vmin - 2px)';
  grid.id=i;
  
  
  box.appendChild(grid);
  chessArr[i] = 0;

  grid.onclick = function(x){
  // target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。
  var index = x.target.id||x.target.parentNode.id;
  return playChess(index);
  };
  
 };
 mask.style.display = 'none';
 }

 //棋子对象
 function Chess(){
 this.color = 'white';
 this.site = 0;
 // 创建一个class
 this.chessDom = function(){
  // 创造新节点
  var dom = document.createElement('p');
  // 将这个名字给class
  dom.setAttribute('class',this.color);
  return dom;
 }
 
 this.ligature = function(arr){
  // map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
  //是就返回这个site
  
  // 给白棋一个标识号,方便在下列judge中判断
  var whiteChess = arr.map(function(s){
  // parseInt() 函数可解析一个字符串，并返回一个整数。
  return (s.color == 'white')?parseInt(s.site):0;
  });
  
  var blackChess = arr.map(function(s){
  return (s.color == 'black')?parseInt(s.site):0;
  });

  judge(whiteChess,'白子');
  judge(blackChess,'黑子');

  function judge(che,color){
  // length 属性可返回字符串中的字符数目
  for (var i = 0;i < che.length;i++) {
  // 棋子横坐标
  var x = che[i]%lineNum;
  // 棋子竖坐标
  var y = parseInt(che[i]/lineNum);
  // \这样的倾斜判断
  if ( x <= lineNum - 5 && y <= lineNum - 5 && che[i] != 0 ) {
  if( che[i+1*lineNum+1] != 0 && che[i+2*lineNum+2] != 0 && che[i+3*lineNum+3] != 0 && che[i+4*lineNum+4] != 0 ){
   alert(color+'获胜!');
   // 胜利后刷新页面
   location.replace(location);
   return true;
  }
  };
  // |这样的竖直判断
  if ( y <= lineNum - 5 && che[i] != 0 ) {
  if( che[i+1*lineNum] != 0 && che[i+2*lineNum] != 0 && che[i+3*lineNum] != 0 && che[i+4*lineNum] != 0 ){
   alert(color+'获胜!');
   // Location 对象方法replace() 用新的文档替换当前文档
   location.replace(location);
   return true;
  }
  };
  // /这样的倾斜判断
  if ( x >= 4 && y <= lineNum - 5 && che[i] != 0 ) {
  if( che[i+1*lineNum-1] != 0 && che[i+2*lineNum-2] != 0 && che[i+3*lineNum-3] != 0 && che[i+4*lineNum-4] != 0 ){
   alert(color+'获胜!');
   location.replace(location);
   return true;
  }
  };
  // ——这样的平行判断
  if ( x <= lineNum - 5 && che[i] != 0 ) {
  if( che[i+1] != 0 && che[i+2] != 0 && che[i+3] != 0 && che[i+4] != 0 ){
   alert(color+'获胜!');
   location.replace(location);
   return true;
  }
  };
  };
  }
 }
 } 

 function playChess(i){
 if(chessArr[i] == 0){
  // 标识符
  timer++;
  // 用new创建新的对象
  chessArr[i] = new Chess();
  timer%2==0?chessArr[i].color = 'black':chessArr[i].color = 'white';
  // 给每个小格子设置一个site值
  chessArr[i].site = i;
  // appendChild() 方法向节点添加最后一个子节点
  // 意思就是在小格子div里加上棋子的class
  chessBox[i].appendChild(chessArr[i].chessDom());
  // 给这个class的棋子赋予site值
  chessArr[i].ligature(chessArr);
 }else{
  alert('此处有子!');
 }
 }
 
 };
 </script>
</head>
<body>
 <section id="chessboard" class="clear">
 </section>
 <section id="mask">
 <aside class="conBox">
 <h1 class="borderBot">小依，选择棋盘规格哇。</h1>
 <p id="subBtn" class="border">-</p>
 <p id="gridNum" value="10" class="borderTop borderBot">10</p>
 <p id="addBtn" class="border">+</p>
 <button id="submitBtn">确认</button>
 </aside>
 </section>
 <div style="text-align:center;">
</div>
</body>
</html>

更多有趣的经典小游戏实现专题，分享给大家：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

js实现双人五子棋小游戏

- Author -

原映雪

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JSON 学习之JSON in JavaScript详细使用说明
Feb 23 Javascript
一个js的tab切换效果代码[代码分离]
Apr 11 Javascript
Jquery 绑定时间实现代码
May 03 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
Jul 25 Javascript
JS字符串拼接在ie中都报错的解决方法
Mar 27 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
Apr 16 Javascript
jQuery判断多个input file 都不能为空的例子
Jun 23 Javascript
JS 对象(Object)和字符串(String)互转方法
May 20 Javascript
Bootstrap 附加导航（Affix）插件实例详解
Jun 01 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
Aug 17 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
Apr 30 Javascript
JavaScript使用canvas绘制随机验证码
Feb 17 Javascript
vue实现五子棋游戏
May 28 #Javascript
用vue 实现手机触屏滑动功能
May 28 #Javascript
Jquery高级应用Deferred对象原理及使用实例
May 28 #jQuery
JQuery插件tablesorter表格排序实现过程解析
May 28 #jQuery
JS替换字符串中指定位置的字符(多种方法)
May 28 #Javascript
js实现九宫格布局效果
May 28 #Javascript
微信小程序实现电子签名并导出图片
May 27 #Javascript
矿石收音机(1) S900(1) E1-XM(1) DSP(2) R601SW(1) 沃尔沃(1) ETON(1) 电子管(5) 放大器(1) 接收机(2)
You might like
第4章 数据处理-php字符串的处理-郑阿奇(续)
2011/07/04 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
PHP fopen中文文件名乱码问题解决方案
2020/10/28 PHP
事件冒泡是什么如何用jquery阻止事件冒泡
2013/03/20 Javascript
jQuery插件slides实现无缝轮播图特效
2015/04/17 Javascript
老生常谈javascript变量的命名规范和注释
2016/09/29 Javascript
关于JavaScript中事件绑定的方法总结
2016/10/26 Javascript
javascript DOM的详解及实例代码
2017/03/06 Javascript
javascript自定义事件功能与用法实例分析
2017/11/08 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
2018/04/22 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
2018/10/11 Javascript
微信小程序 JS动态修改样式的实现方法
2018/12/16 Javascript
[01:19:23]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第二场
2018/04/06 DOTA
Python代码的打包与发布详解
2014/07/30 Python
Python实现竖排打印传单手机号码易撕条
2015/03/16 Python
基于Python实现的百度贴吧网络爬虫实例
2015/04/17 Python
在Python的Django框架中获取单个对象数据的简单方法
2015/07/17 Python
Python 快速实现CLI 应用程序的脚手架
2017/12/05 Python
python3+PyQt5自定义视图详解
2018/04/24 Python
python sort、sort_index方法代码实例
2019/03/28 Python
python解释器spython使用及原理解析
2019/08/24 Python
python英语单词测试小程序代码实例
2019/09/09 Python
python识别验证码图片实例详解
2020/02/17 Python
Django使用Celery加redis执行异步任务的实例内容
2020/02/20 Python
Python GUI库PyQt5图形和特效样式QSS介绍
2020/02/25 Python
python 常用日期处理-- datetime 模块的使用
2020/09/02 Python
基于Python爬取股票数据过程详解
2020/10/21 Python
Python类class参数self原理解析
2020/11/19 Python
html5触摸事件判断滑动方向的实现
2018/06/05 HTML / CSS
英国和世界各地预订便宜的酒店：LateRooms.com
2019/05/05 全球购物
Dodax奥地利：音乐、电影、书籍、玩具、电子产品等
2019/08/31 全球购物
2019年.net常见面试问题
2012/02/12 面试题
课改先进个人汇报材料
2014/01/26 职场文书
小学网上祭英烈活动总结
2014/07/05 职场文书
2014年政风行风工作总结
2014/11/22 职场文书
社区党风廉政建设调研报告
2015/01/01 职场文书