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

代码语言：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;
font-size: 50px;
}
@keyframes output {
0% {transform:scale(0);}
5% {transform:scale(1.2);}
95% {transform:scale(1.2);}   
100% {transform:scale(1);}
}
#machineCounter,#playerCounter{
position: absolute;
background-color: aqua;
line-height: 60px;
width: 60px;
bottom: 0;
margin:5px;
text-align: center;
font-size: 32px;
background-color: black;
color:white;
border-radius: 50%;
transition:transform .16s ease-in-out, filter .31s;
}
#playerCounter{
right: 0;
background-color: green;
}
#status{
display:inline-block;
vertical-align: top;
width: 20px;
height: 20px;
background-color: black;
border-radius: 50%;
margin:2px 10px;
transition:.2s;
animation-name: rotates;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#status[on]{
background-color: green;
animation-duration: 1s;
animation-direction: reverse;
}
#status>span{
display: block;
width: 5px;
height: 5px;
border-radius: 50%;
margin:auto;
background-color: white;
margin-top:1px;
opacity:.6;
}
@keyframes rotates {
0% {transform:rotate(360deg);}
100% {transform:rotate(0deg);}
}
#gameCounter{
display:inline-block;
vertical-align: top;
font-size: 24px;
line-height: 24px;
margin-right:5px;
background-color: rgba(0,0,0,.2);
padding:0 2px 0 10px ;
border-radius: 3px;
color:white;
}
#gameCounter:empty{
padding:0;
}
#help{
position:absolute;
bottom:5px;
width: 100%;
text-align:center;
font-size: 24px;
}
</style>




</head>

<body translate="no" >
  <div id="headboard">
    <h1><span>I'm invincible.</span></h1>
    <div id="textOutput"></div>
    <div><span id="gameCounter" title="Games played"></span><span id="status" Title="Status  &#10; Black: Ready to play &#10; Green: Game in progress"><span></span></span></div>  
</div>
<div id="help"><div></div></div>.........完整代码请登录后点击上方下载按钮下载查看