线条拼图接通小游戏-html代码-BFW代码库

线条拼图接通小游戏

代码语言：html

所属分类：游戏

代码描述：线条拼图接通小游戏

代码标签：小游戏

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
ul{
  display:block;
  width:500px;
  height:500px;
  list-style:none;
  
  transform:translateZ(0);
}

li{
  position:relative;
  
  display:block;
  float:left;
  
  background:rgba(60,60,60,1);
  
  width:50px;
  height:50px;
  
  border-radius:100%;
    
  overflow:hidden;
}

li:before{
  position:absolute;
  content:'';
  
  width:50px;
  height:50px;
  
  top:22px;
  left:22px;
  border:5px solid white;
  width:inherit;
  height:inherit;
  border-radius:40%;
  
  box-sizing:border-box;
}

[data-state='1'], [data-state='2'], [data-state='3'], [data-state='4'], li{
    animation:turn .5s forwards;
}
[data-state='2']{
    animation-name:turn1;
}
[data-state='3']{
    animation-name:turn2;
}
[data-state='4']{
    animation-name:turn3;
}
li{
    animation-name:turn3;
}

@keyframes turn{
  0%{
    transform:rotate(0deg);
  }
  100%{
    transform:rotate(90deg);
  }
}
@keyframes turn1{
  0%{
    transform:rotate(90deg);
  }
  100%{
    transform:rotate(180deg);
  }
}
@keyframes turn2{
  0%{
    transform:rotate(180deg);
  }
  100%{
    transform:rotate(270deg);
  }
}
@keyframes turn3{
  0%{
    transform:rotate(270deg);
  }
  100%{
    transform:rotate(360deg);
  }
}

/* Boring */
body{
  font-family:"Helvetica Neue", sans-serif;
}
h1, p{
  text-align:center;
}
h1{
  font-size:2em;
}
.center{
  margin:0 auto;
  width:600px;
}
.right{
  float:right;
}

footer{
  font-size:.8em;
}
</style>

</head>
<body translate="no">
<h1>Little Game</h1>
<p>Click on a circle to rotate it; connect the pipes and watch everything move.</p>
<div class="center">
<ul id="board"></ul>
<div><span>Points: </span><span id="point"></span></div>
<a id="fast" href="#">Fast mode</a>
<a id="normal" href="#">Normal mode</a>
<div class="right">
<a href="https://twitter.com/share" id="tweet">Tweet Score</a>
</div>
<footer>
<p>Everything is rendered in HTML + CSS, no Canvas used. </p>
</footer>
</div>

<script >
var game = {
  points : 0,
  delay  : 510,
  init : function(node, point, tweet, w, h){
    this.map = new Array(w*h);
    
    this.node = node;
    this.point = point;
    this.tweet = tweet;
    
    this.w = w;
    this.h = h;
    
    
    this.node.addEventListener('click', function(e){
      var element = e.srcElement || e.target;
      game.points = 0;
      game.turn(element.dataPos, true);
    }, true); 
       
 .........完整代码请登录后点击上方下载按钮下载查看