<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>见缝插针</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
background:black;
}
ul{
position: absolute;
top: 40%;
left: 0;
width:100%;
text-align: center;
}
li{
height: 50px;
line-height: 50px;
font-size: 30px;
color: white;
}
#myCanvas{
position: absolute;
top: 0;
left: 0;
}
#cover{
position: absolute;
top: 0;
left:0;
width: 100%;
height: 100%;
background-color: rgba(50,50,50,0.8);
z-index: 1000;
display: none;
}
#cover li:nth-child(2) button{
border:1px white solid;
border-radius: 3px;
padding: 5px 10px;
font-size: 25px;
background-color: none;
}
</style>
</head>
<body>
<div>
//弹出框
<div id="cover">
<ul>
<li id="showResult">恭喜过关</li>
<li><button id="button">下一关</button></li>
</ul>
</div>
//画布
<canvas id="myCanvas" width="350" height="700" ></canvas>
</div>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
window.onload=function(){
var cans=document.getElementById("myCanvas");
var cover=document.getElementById("cover");
var showResult=document.getElementById("showResult");
var button=document.getElementById("button");
var can=cans.getContext("2d");
var checkPoint=JSON.parse(localStorage.getItem("num"));
if(checkPoint){
checkPoint=checkPoint;
}else{
checkPoint=1;
}
var pass=[
[3,5,1],
[3,7,2],
[4,7,3],
[4,9,4],
[5,9,5],
[5,11,6],
[6,11,7],
[6,12,8],
]
var x=200;
var y=200;
var speed=1;
var smallPi=15;
var run;
var balls=[];
var waits=[];
var showPass;
var mark=true;
if(checkPoint){
for(var i=0;i<pass[checkPoint-1][0];i++){
console.log(360/pass[checkPoint-1][0]*i);
balls.push({
deg:360/pass[checkPoint-1][0]*i,
num:""
});
}
for(var i=pass[checkPoint-1][1];i>0;i--){
waits.push(
{
deg:"",
num:i
}
);
}
showPass=pass[checkPoint-1][2];
}
can.translate(x,y);
function bigRound(){
can.save();
can.beginPath();
can.fillStyle="white";
can.arc(0,0,25,0,2*Math.PI);
can.fill();
can.closePath();
can.stroke();
can.font="25px 微软雅黑";
can.fillStyle="black";
can.fillText(showPass,-6,10);
can.restore();
}
function createSmallRound(){
can.clearRect(-180,-150,cans.width,300);
bigRound();
can.save();
for(var i=0;i<balls.length;i++){
can.save();
can.rotate(balls[i].deg*Math.PI/180);
balls[i].deg=balls[i].deg+1;
if(balls[i].deg>=360){
balls[i].deg=0;
}
can.beginPath();
can.lineWidth=5;
can.strokeStyle="white";
can.fillStyle="white";
can.moveTo(25,0);
can.lineTo(125,0);
can.fill();
can.closePath();
can.stroke();
can.beginPath();
can.fillStyle="white";
can.arc(125,0,smallPi,0,2*Math.PI);
can.fill();
can.closePath();
can.stroke();
can.font="20px 微软雅黑";
can.fillStyle="black";
can.fillText(balls[i].num,115,8)
can.restore();
}
can.restore();
run= window.requestAnimationFrame(createSmallRound);
}
createSmallRound();
function waitRound(){
can.clearRect(-180,150,cans.width,350);
can.save();
for(var i=0;i<waits.length;i++){
can.beginPath();
can.fillStyle="white";
can.arc(0,150+(smallPi*2)*(waits[i].num+1),smallPi,0,2*Math.PI);
can.fill();
can.closePath();
can.stroke();
can.font="20px 微软雅黑";
can.fillStyle="black";
can.fillText(waits[waits.length-1-i].num,-9,157+(smallPi*2)*(waits[i].num+1));
can.restore();
}
}
waitRound();
cans.onclick=function(){
if(waits.length!= ""){
var ball=waits.shift();
ball.deg=90;
console.log(balls);
for(var i=0;i<balls.length;i++){
if(balls[i].deg>74 && balls[i].deg<106){
cans.onclick=null;
mark=false;
setTimeout(function(){
cover.style.display="block";
showResult.innerText="闯关失败";
button.innerText="重新来";
cancelAnimationFrame(run);
button.onclick=function(){
clicks(0);
cover.style.display="none";
location.reload();
}
return;
},100)
}
}
balls.push(ball);
waitRound();
if(waits.length==0 && mark==true){
setTimeout(function(){
cover.style.display="block";
if(checkPoint==pass.length){
showResult.innerText="恭喜通过全关";
button.innerText="第一关";
button.onclick=function(){
var lengths=pass.length-1;
clicks(-7);
cover.style.display="none";
location.reload();
}
}else{
showResult.innerText="闯关成功";
button.innerText="下一关";
button.onclick=function(){
clicks(1);
cover.style.display="none";
location.reload();
}
}
cancelAnimationFrame(run);
},500)
}
}
}
function clicks(num){
checkPoint+=num;
localStorage.setItem("num",JSON.stringify(checkPoint));
}
}