首页
所有分类
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 相关文章推荐
分享一个我自己写的ToolTip提示插件(附源码)
Jan 20 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
Dec 13 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
Aug 28 Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 Javascript
web 屏蔽BackSpace键实例代码
Dec 24 Javascript
不得不看之JavaScript构造函数及new运算符
Aug 21 Javascript
详解微信小程序调起键盘性能优化
Jul 24 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
微信小程序页面间传值与页面取值操作实例分析
Apr 30 Javascript
layui实现tab的添加拒绝重复的方法
Sep 04 Javascript
JavaScript Reflect Metadata实现详解
Dec 12 Javascript
Element实现动态表格的示例代码
Aug 02 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
webpack(1) OpenFeign(1) calc(1) Git(3) cudnn(1) cudn(1) K8s(1) RTX 3050 ti(1) swing(1) SandBox(1)
You might like
PHP读取网页文件内容的实现代码(fopen,curl等)
2011/06/23 PHP
游戏人文件夹程序 ver 3.0
2006/07/14 Javascript
javascript css在IE和Firefox中区别分析
2009/02/18 Javascript
基于jQuery的日期选择控件
2009/10/27 Javascript
div+css布局的图片连续滚动js实现代码
2010/05/04 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
2015/06/05 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
2015/06/12 Javascript
javascript实现PC网页里的拖拽效果
2016/03/14 Javascript
原生JavaScript实现Ajax的方法
2016/04/07 Javascript
xmlplus组件设计系列之文本框（TextBox)（3）
2017/05/03 Javascript
Angularjs 实现动态添加控件功能
2017/05/25 Javascript
node文件上传功能简易实现代码
2017/06/16 Javascript
vue项目中导入swiper插件的方法
2018/01/30 Javascript
浅谈Angularjs中不同类型的双向数据绑定
2018/07/16 Javascript
解决LayUI表单获取不到data的问题
2018/08/20 Javascript
JavaScript中Array方法你该知道的正确打开方法
2018/09/11 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
2018/10/29 Javascript
vue中使用v-for时为什么不能用index作为key
2020/04/04 Javascript
一个超级简单的python web程序
2014/09/11 Python
使用Python的urllib2模块处理url和图片的技巧两则
2016/02/18 Python
python学习教程之Numpy和Pandas的使用
2017/09/11 Python
Python 解码Base64 得到码流格式文本实例
2020/01/09 Python
Python使用循环神经网络解决文本分类问题的方法详解
2020/01/16 Python
使用keras根据层名称来初始化网络
2020/05/21 Python
推荐10个CSS3 制作的创意下拉菜单效果
2014/02/11 HTML / CSS
Lacoste美国官网：经典POLO衫品牌
2016/10/12 全球购物
Order by的几种用法
2013/06/16 面试题
大学生校园创业计划书
2014/02/08 职场文书
试用期自我鉴定范文
2014/03/20 职场文书
土地转让协议书范本
2014/04/15 职场文书
财务负责人任命书
2014/06/06 职场文书
雷人标语集锦
2014/06/19 职场文书
党员志愿者活动方案
2014/08/28 职场文书
篮球拉拉队口号
2015/12/25 职场文书
2016学习依法治国心得体会
2016/01/15 职场文书
Python多个MP4合成视频的实现方法
2021/07/16 Python