用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;// 创建一个classthis.chessDom = function(){// 创造新节点var dom = document.createElement('p');// 将这个名字给classdom.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里加上棋子的classchessBox[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实现双人五子棋小游戏相关推荐

php 设计五子棋游戏,基于js+canvas实现五子棋小游戏
本文实例为大家分享了js+canvas实现五子棋小游戏的具体代码,供大家参考,具体内容如下效果展示: 源码展示: 五子棋 * { margin: 0; padding: 0; } body { ma ...
C++实现五子棋小游戏（源代码）
>求关注,求点赞,求评论< Thanks♪(･ω･)ﾉ这次发个简单的废话不多说下为代码☟☟☟ #include <iostream> #include <conio ...
Java实现五子棋小游戏(附思路讲解,全部代码,游戏截图)
本文章是如何实现一个单机版双人五子棋小游戏,通过Swing技术进行可视操作. 个人简介:
记一次做双人在线五子棋小游戏
前一段时间没有项目在身上,时间比较充裕,就研究了下H5里的canvas画布,了解一些基础语法后,想尝试做个demo来练练手,检验下这段时间所学的知识,无意间看到慕课网channingbreeze老师的 ...
js实现五子棋小游戏
试玩试玩网址:http://42.194.221.6:8014/ 效果 html及js <!DOCTYPE html> <html lang="en">& ...
前端实现五子棋小游戏1（本地双人对战）
运用canvas写一个本地五子棋小游戏 HTML部分 JS 部分 CSS 部分实现效果 HTML部分 <!DOCTYPE html> <html lang="en&quo ...
php五子棋,JS实现五子棋小游戏
这次给大家带来JS实现五子棋小游戏,JS实现五子棋小游戏的注意事项有哪些,下面就是实战案例,一起来看一下. 思路: 1.先用canvas画五子棋的棋盘 2.获取鼠标点击的位置 3.根据鼠标点击的位置判 ...
【Verilog】基于FPGA的五子棋小游戏（VGA显示、双人对战、胜负判别、附完整代码）
基于FPGA的五子棋小游戏有一些说明: 1.本文是基于VGA的显示小游戏,主要为VGA显示的拓展应用: 2.为适应不同显示屏的分辨率,棋盘确定为10X10的黑线白底的方格: 3.下棋主要用棋格颜色变 ...
C语言---简单五子棋小游戏
效果图如下: 设计思路: 棋盘设计为15×15格,初始状态光标在棋盘的中央,白棋先走,轮流落子,当一方连成五子或下满棋盘时,游戏结束(连成五子的一方获胜,下满棋盘为和棋).当游戏一方胜利后显示胜利信息 ...

用js实现双人五子棋小游戏

用js实现双人五子棋小游戏相关推荐

最新文章

热门文章