js实现三子棋小游戏效果代码-html代码-BFW代码库

js实现三子棋小游戏效果代码

代码语言：html

所属分类：游戏

代码描述：js实现三子棋小游戏效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
<style>
:root{
--size : min(85vw ,85vh);
--oneThird : calc(var(--size) / 3)
}
*{
cursor:default;
}
html,body{
height: 100%;
margin: 0;
}
body{
font-size: 16px;
font-family: sans-serif;
background-image: linear-gradient(75deg,white,  lightgray 5%,white 15%, lightgray 55% , lightgray 90%,white);
background-size: 100%;
background-attachment: fixed;
min-height: 300px;
display:flex;
flex-direction: column;
min-width:350px; 
  min-height: calc(var(--size) + 50px) ;
}
#container{
width: var(--size);
height: var(--size);
margin:auto;
}
#container>div{
width: var(--oneThird);
height: var(--oneThird);
display:inline-block;
vertical-align: top;
}
#container>div>div{
box-sizing: border-box;
width: 90%;
height: 90%;
margin:5%;
border-radius: 5%;
cursor:pointer;
border:1px solid transparent; 
background-color: rgb(255,255,255,.6);
background-color: rgb(0,0,0,.2);
transition: .1s;
}
#container>div>div:before{
overflow: hidden;
display: block;
line-height: 100%;;
width:100%;
height: 100%;
text-align: center;
border-radius: 50%;
font-size: calc( var(--oneThird) /1.1);
}
#container>div[marked=player]>div:before{
content:"✚";
color:green;
transform:rotate(45deg);
}
#container>div[marked=machine]>div:before{
content:"✚";
}
#container>div[empty=no]>div{
border-color:gray white white gray;
background-color:transparent;
cursor: default;
}
#headboard{
display:flex;
justify-content: space-between;
padding-top:2px;
height: 30px;
overflow: hidden;
}
h1{
margin:0;
font-size: 30px;
line-height: 24px;
font-weight: normal;
transition:.4s;
}
h1:before{
content:" (ง ͠° ͟ʖ ͡°)ง ";
font-size: 24px;
}
.nIn>span{
text-decoration:line-through double black;
}
.nIn:before{
content:  "(ง ˘ ʖ ˘ )ง !";
}
#textOutput{
position: absolute;
width: 100%;
top:20px;
font-weight: bold;
text-align: center;
.........完整代码请登录后点击上方下载按钮下载查看