标签：网页 width 五子棋 transform height 版自 lineNum var 1rem
js五子棋
过程很艰辛，请教了很多人，网查了资料，终于和自己玩上了五子棋。
<!DOCTYPE html>
<html>
<head>
<title>五子棋</title>
<meta charset="UTF-8">
<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) ;
}
#chessboard div{
width: calc(9vmin - 2px);
height: calc(9vmin - 2px);
float: left;
border: 1px solid black;
}
#chessboard div p{
width: 97%;
height: 97%;
margin: 1.5% auto;
border-radius: 100%;
}
.white{
background-color: white;
box-shadow: .1rem .1rem .05rem rgba(0,0,0,.5);
}
.black{
background-color: black;
box-shadow: .1rem .1rem .05rem rgba(0,0,0,.5);
}
#mask{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0,0,0,.5);
}
.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{
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;
}
.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>
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--;
}
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++) {
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){
var index = x.target.id||x.target.parentNode.id;
//得到格子的id 返回
console.log(index)
return playChess(index);
};
};
mask.style.display = 'none';
//隐藏蒙板
}
//棋子对象
function Chess(){
this.color = 'white';
this.site = 0;
this.chessDom = function(){
var dom = document.createElement('p');
dom.setAttribute('class',this.color);
return dom;
}
this.ligature = function(arr){
var whiteChess = arr.map(function(s){
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){
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);
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++;
chessArr[i] = new Chess();
timer%2==0?chessArr[i].color = 'black':chessArr[i].color = 'white';
chessArr[i].site = i;
chessBox[i].appendChild(chessArr[i].chessDom());
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>
</body>
</html>
标签：网页,width,五子棋,transform,height,版自,lineNum,var,1rem 来源： https://blog.csdn.net/weixin_44775372/article/details/88600091
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。