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>

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

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

Javascript 相关文章推荐
javascript 自动填写表单的实现方法
Apr 09 Javascript
有关JavaScript的10个怪癖和秘密分享
Aug 28 Javascript
Jquery中val()表单取值赋值的实例代码
Aug 15 Javascript
JavaScript中的eval()函数详解
Aug 22 Javascript
js获取当前路径的简单示例代码
Jan 08 Javascript
jQuery实现3D文字特效的方法
Mar 10 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
May 14 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
Aug 27 Javascript
使用开源工具制作网页验证码的方法
Oct 17 Javascript
[js高手之路]原型式继承与寄生式继承详解
Aug 28 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
Sep 19 Javascript
详解.vue文件中style标签的几个标识符
Jul 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
You might like
关于Intype一些小问题的解决办法
2008/03/28 PHP
linux系统下php安装mbstring扩展的二种方法
2014/01/20 PHP
PHP中静态变量的使用方法实例分析
2016/12/01 PHP
php 开发中加密的几种方法总结
2017/03/22 PHP
php str_replace替换指定次数的方法详解
2017/05/05 PHP
用JS实现的一个include函数
2007/07/21 Javascript
jQuery Ajax 全解析
2009/02/08 Javascript
jquery.validate使用攻略 第五步 正则验证
2010/07/01 Javascript
javascript利用控件对windows的操作实现原理与应用
2012/12/23 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
2013/12/28 Javascript
HTML页面登录时的JS验证方法
2014/05/28 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
2015/01/29 Javascript
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
Vue+element-ui 实现表格的分页功能示例
2018/08/18 Javascript
JavaScript继承的特性与实践应用深入详解
2018/12/30 Javascript
layui动态加载多表头的实例
2019/09/05 Javascript
[32:07]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第一场 12.16
2020/12/17 DOTA
简单理解Python中基于生成器的状态机
2015/04/13 Python
修复 Django migration 时遇到的问题解决
2018/06/14 Python
浅谈python的输入输出,注释,基本数据类型
2019/04/02 Python
OpenCV3.0+Python3.6实现特定颜色的物体追踪
2019/07/23 Python
Python常用数据类型之间的转换总结
2019/09/06 Python
美国最大的袜子制造商和零售商:Renfro Socks
2017/09/03 全球购物
二年级体育教学反思
2014/01/15 职场文书
五十岁生日宴会答谢词
2014/01/15 职场文书
大学总结自我鉴定
2014/01/18 职场文书
电视购物广告词
2014/03/19 职场文书
生物科学专业毕业生求职信
2014/06/02 职场文书
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
民主生活会对照检查材料
2014/09/22 职场文书
2014年加油站工作总结
2014/12/04 职场文书
2015年全国爱眼日活动小结
2015/02/27 职场文书
入伍通知书
2015/04/23 职场文书
2015年感恩母亲节活动方案
2015/05/04 职场文书
餐馆开业致辞
2015/08/01 职场文书
培训心得体会怎么写
2016/01/25 职场文书