一、屏幕宽度高度自适应
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />
二、css
<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);
}
三、js逻辑
*
1、首先写出一个计数器，将所填写的规格数字进行处理，并实现动态的棋盘规格
*
获取到规格计数器的加减按钮以及中间规格数，并进行加减数
####、html
<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>
####、js逻辑
var lineNum = parseInt(gridNum.innerHTML);
// 减去规格
subBtn.onclick = function() {
if (lineNum > 8) {
lineNum--;
}
// innerHTML为gridNum的全元素
gridNum.innerHTML = lineNum;
}
// 加上规格
addBtn.onclick = function() {
if (lineNum < 14) {
lineNum++;
}
gridNum.innerHTML = lineNum;
}
在点击确定规格按钮时，必须要将棋盘初始化
####、html
<section id="chessboard" class="clear"></section>
####、js逻辑
var box = document.getElementById('chessboard');//棋盘
var submitBtn = document.getElementById('submitBtn');//计数器确定按钮
//声明当前方格
var grid;
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)';//方格
box.appendChild(grid);
};
}
点击之后将规格popup关掉
mask.style.display = "none"
在点击棋盘时是否有棋子
var chessArr = [];
//将每个方格做一个标志
grid.id = i;
//点击棋盘时触发事件
grid.onclick = function(x) {
var index = x.target.id || x.target.parentNode.id;//获取到每个方格的id
};
//判断当前是否有棋子，没有棋子添加棋子
if (chessArr[i] == 0) {
// 通过标识符判断当前是否是偶数，也就是是否是黑或白子，将当前颜色动态
timer++;
// 没棋子就把当前的棋子赋值给一个对象
chessArr[i] = {};
//判断是否是黑子还是白子
timer % 2 == 0 ? chessArr[i].color = 'black' : chessArr[i].color = 'white';
// 给每个方格加一个坐标值，也就是方格的序号
chessArr[i].site = i;
} else {
//当前有棋子，提示有棋子
alert('此处有子!');
}
当前位置chessArr[i]没棋子，chessArr数组作为棋盘上每个棋子，通过声明site将当前的棋子坐标存进去，使用chessDom渲染到每个方格中
//首先要初始化棋子颜色
this.color ="black"
//初始化site坐标
this.site = 0
//添加chessDom变量
this.chessDom = function() {
// 创造新节点
var dom = document.createElement('p');
// 将类名添加进当前dom中
dom.setAttribute('class', this.color);
return dom;
}
把当前dom添加到方格中
// 在每一个方格中添加棋子，并将每个棋子赋予一个chessDom的类变量
chessBox[i].appendChild(chessArr[i].chessDom());
使用棋子的数组判断黑子、白子哪方赢
//首先分别声明两个变量，表示黑白两方下的棋子。
var whiteChess = chessArr.map(function(s) {
return (s.color == 'white') ? parseInt(s.site) : 0;
});
var blackChess = chessArr.map(function(s) {
return (s.color == 'black') ? parseInt(s.site) : 0;
});
判断当前下的子（黑白两子）哪方赢。
*根据以下几点 1、获取到当前棋子的xy坐标，并进行判断 2、判断赢法有横向、纵向、斜向、反斜向四组。 *
for (var i = 0; i < che.length; i++) {
// 棋子横坐标
var x = che[i] % lineNum;
// 棋子竖坐标
var y = parseInt(che[i] / lineNum);
/*
lineNum - 5 代表当前赢法最大的赢法组（例如：横向---在每行最后的五个棋子的这个组合之后不能在组合了）
*/
// \这样的倾斜判断
if (x <= lineNum - 5 && y <= lineNum - 5 && che[i] != 0) {
/*
必须符合以下几点：
1、x轴等于x轴的所有五子组合（因为有限制，所以必须-5）
2、y轴同理
3、当前没有棋子
*/
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) {
/*
必须符合以下几点：
1、棋子数组中第一项、第二项、第三项、第四项都不等于0的情况下才可以获胜
*/
alert(color + '获胜!');
// 胜利后刷新页面
location.replace(location);
return true;
}
};
// |这样的竖直判断
if (y <= lineNum - 5 && che[i] != 0) {
/*
必须符合以下几点：
1、因为是竖直判断，所以x轴时不变的
2、当前没有棋子
*/
if (che[i + 1 * lineNum] != 0 && che[i + 2 * lineNum] != 0 && che[i + 3 * lineNum] !=
0 && che[i + 4 * lineNum] != 0) {
/*
必须符合以下几点：
1、棋子数组中第一项、第二项、第三项、第四项都不等于0的情况下才可以获胜
*/
alert(color + '获胜!');
// Location 对象方法replace() 用新的文档替换当前文档
location.replace(location);
return true;
}
};
// /这样的倾斜判断
if (x >= 4 && y <= lineNum - 5 && che[i] != 0) {
/*
必须符合以下几点：
1、每一组五子直到组合到不能组合的位置，也就是x轴的值不能超过4（因是/判断，是从下往上，所以坐标数一直是从大到小的顺序）
2、y轴一直是不能>不能组合的地步
3、当前没有棋子
*/
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) {
/*
必须符合以下几点：
1、棋子数组中第一项、第二项、第三项、第四项都不等于0的情况下才可以获胜
*/
alert(color + '获胜!');
location.replace(location);
return true;
}
};
// ——这样的平行判断
if (x <= lineNum - 5 && che[i] != 0) {
/*
必须符合以下几点：
1、因是平行判断，y轴一直是随着当前棋子的变化而变化，x轴组合必须不能超过结尾是五个子的位置的值
2、y轴一直是不能>不能组合的地步
3、当前没有棋子
*/
if (che[i + 1] != 0 && che[i + 2] != 0 && che[i + 3] != 0 && che[i + 4] != 0) {
/*
必须符合以下几点：
1、棋子数组中第一项、第二项、第三项、第四项都不等于0的情况下才可以获胜
*/
alert(color + '获胜!');
location.replace(location);
return true;
}
};
源码参考：
http://www.tab-system.com/post/74
注意：本文归作者所有，未经作者允许，不得转载
