HTML+CSS+JS写一个棋盘（幻影围棋1.0版）
幻影围棋1.0版
- 实现了棋盘，点击下棋，切换先后手
html部分
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<link rel="stylesheet" href="./index.css">
head>
<body>
<div class="wrap">
<div class="checkerboard" id="checkerboard">
<div class="horizontal">div>
<div class="row-frame">
<div class="line">div>
<div class="line">div>
<div class="line">div>
<div class="line">div>
<div class="line">div>
<div class="line">div>
<div class="line">div>
<div class="line">div>
<div class="line-last">div>
div>
<div class="horizontal">div>
<div class="row-frame">
<div class="line">div>
<div class="line">div>
<div class="line">div>
<div class="line">div>
<div class="line">div>
<div class="line">div>
<div class="line">div>
<div class="line">div>
<div class="line-last">div>
div>
<div class="horizontal">div>
<div class="row-frame">
<div class="line">div>
<div class="line">div>
<div class="line">div>
<div class="line">div>
<div class="line">div>
<div class="line">div>
<div class="line">div>
<div class="line">div>
<div class="line-last">div>
div>
<div class="horizontal">div>
<div class="row-frame">
<div class="line">div>
<div class="line">div>
<div class="line">div>
<div class="line">div>
<div class="line">div>
<div class="line">div>
<div class="line">div>
<div class="line">div>
<div class="line-last">div>
div>
<div class="horizontal">div>
<div class="row-frame">
<div class="line">div>
<div class="line">div>
<div class="line">div>
<div class="line">div>
<div class="line">div>
<div class="line">div>
<div class="line">div>
<div class="line">div>
<div class="line-last">div>
div>
<div class="horizontal">div>
<div class="row-frame">
<div class="line">div>
<div class="line">div>
<div class="line">div>
<div class="line">div>
<div class="line">div>
<div class="line">div>
<div class="line">div>
<div class="line">div>
<div class="line-last">div>
div>
<div class="horizontal">div>
<div class="row-frame">
<div class="line">div>
<div class="line">div>
<div class="line">div>
<div class="line">div>
<div class="line">div>
<div class="line">div>
<div class="line">div>
<div class="line">div>
<div class="line-last">div>
div>
<div class="horizontal">div>
<div class="row-frame">
<div class="line">div>
<div class="line">div>
<div class="line">div>
<div class="line">div>
<div class="line">div>
<div class="line">div>
<div class="line">div>
<div class="line">div>
<div class="line-last">div>
div>
<div class="horizontal">div>
<div class="vitualboard">
<div class="vitual-frame">
<div class="vitualsquare">div>
<div class="vitualsquare">div>
<div class="vitualsquare">div>
<div class="vitualsquare">div>
<div class="vitualsquare">div>
<div class="vitualsquare">div>
<div class="vitualsquare">div>
<div class="vitualsquare">div>
<div class="vitualsquare">div>
div>
<div class="vitual-frame">
<div class="vitualsquare">div>
<div class="vitualsquare">div>
<div class="vitualsquare">div>
<div class="vitualsquare">div>
<div class="vitualsquare">div>
<div class="vitualsquare">div>
<div class="vitualsquare">div>
<div class="vitualsquare">div>
<div class="vitualsquare">div>
div>
<div class="vitual-frame">
<div class="vitualsquare">div>
<div class="vitualsquare">div>
<div class="vitualsquare">
<div class="starpos">div>
div>
<div class="vitualsquare">div>
<div class="vitualsquare">
<div class="starpos">div>
div>
<div class="vitualsquare">div>
<div class="vitualsquare">
<div class="starpos">div>
div>
<div class="vitualsquare">div>
<div class="vitualsquare">div>
div>
<div class="vitual-frame">
<div class="vitualsquare">div>
<div class="vitualsquare">div>
<div class="vitualsquare">div>
<div class="vitualsquare">div>
<div class="vitualsquare">div>
<div class="vitualsquare">div>
<div class="vitualsquare">div>
<div class="vitualsquare">div>
<div class="vitualsquare">div>
div>
<div class="vitual-frame">
<div class="vitualsquare">div>
<div class="vitualsquare">div>
<div class="vitualsquare">
<div class="starpos">div>
div>
<div class="vitualsquare">div>
<div class="vitualsquare">
<div class="starpos">div>
div>
<div class="vitualsquare">div>
<div class="vitualsquare">
<div class="starpos">div>
div>
<div class="vitualsquare">div>
<div class="vitualsquare">div>
div>
<div class="vitual-frame">
<div class="vitualsquare">div>
<div class="vitualsquare">div>
<div class="vitualsquare">div>
<div class="vitualsquare">div>
<div class="vitualsquare">div>
<div class="vitualsquare">div>
<div class="vitualsquare">div>
<div class="vitualsquare">div>
<div class="vitualsquare">div>
div>
<div class="vitual-frame">
<div class="vitualsquare">div>
<div class="vitualsquare">div>
<div class="vitualsquare">
<div class="starpos">div>
div>
<div class="vitualsquare">div>
<div class="vitualsquare">
<div class="starpos">div>
div>
<div class="vitualsquare">div>
<div class="vitualsquare">
<div class="starpos">div>
div>
<div class="vitualsquare">div>
<div class="vitualsquare">div>
div>
<div class="vitual-frame">
<div class="vitualsquare">div>
<div class="vitualsquare">div>
<div class="vitualsquare">div>
<div class="vitualsquare">div>
<div class="vitualsquare">div>
<div class="vitualsquare">div>
<div class="vitualsquare">div>
<div class="vitualsquare">div>
<div class="vitualsquare">div>
div>
<div class="vitual-frame">
<div class="vitualsquare">div>
<div class="vitualsquare">div>
<div class="vitualsquare">div>
<div class="vitualsquare">div>
<div class="vitualsquare">div>
<div class="vitualsquare">div>
<div class="vitualsquare">div>
<div class="vitualsquare">div>
<div class="vitualsquare">div>
div>
div>
div>
<div class="infor-wrap">
<div class="btn-wrap">
<div class="btn" id="btn-black">黑子div>
<div class="btn" id="btn-white">白子div>
div>
div>
div>
body>
<script src="./index.js">script>
html>
js部分
var vitualsquare=document.getElementsByClassName('vitualsquare')
var chooseblack=document.getElementById('btn-black');
var choosewhite=document.getElementById('btn-white');
var color='black';
chooseblack.addEventListener('click',function(){
color='black';
})
choosewhite.addEventListener('click',function(){
color='white'
})
//先手黑子，后手白子
for(var i=0;i<vitualsquare.length;i++){
vitualsquare[i].addEventListener('click',function(){
console.log(this)
this.innerHTML=` +color+`chess">`
})
}
css部分===>Less实现
.wrap{
display: flex;
flex-direction: column;
.checkerboard{
display: flex;
flex-direction: column;
position: absolute;
top:100px;
left: 100px;
.horizontal{
height: 2px;
width: 418px;
background-color: black;
}
.row-frame{
display: flex;
flex-direction: row;
.line{
height: 50px;
width: 2px;
background-color: black;
margin-right: 50px;
}
.line-last{
height: 50px;
width: 2px;
background-color: black;
}
}
}
.vitualboard{
position: relative;
top: -443px;
left:-25px;
// opacity: 0.4;
display: flex;
flex-direction: column;
.vitual-frame{
display: flex;
flex-direction: row;
.vitualsquare{
height: 52px;
width: 52px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
//background-color: #666;
.starpos{
z-index: -10;
height: 10px;
width: 10px;
background-color: black;
border-radius: 50%;
}
.putwhitechess{
z-index: 100;
height: 52px;
width: 52px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
background:linear-gradient(to right bottom,white,#ccc);
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}
.putblackchess{
z-index:100;
height: 52px;
width: 52px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
background:linear-gradient(to right bottom,#555,#111);
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}
}
}
}
.infor-wrap{
position: absolute;
top: 100px;
left:600px;
display: flex;
flex-direction: column;
.btn-wrap{
display: flex;
flex-direction: row;
.btn{
padding: 10px 20px;
transition: all .3s;
border-radius: 10px;
cursor: pointer;
margin: 20px;
&:hover{
transform: translateY(-5px);
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.08);
}
}
#btn-black{
background-color: black;
color: white;
//box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
}
#btn-white{
background-color: white;
color: black;
border:1px solid black;
// box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
}
}
}
}
- 感觉没有什么好注释的啊233333