见缝插针（js基础）-CSDN博客

<!DOCTYPE html>

<html>

<head>

body {

margin: 0px;

padding: 0px;

}

.wrap {

width: 400px;

height: 400px;

/*border: 1px solid black;*/

position: relative;

}

.center {

width: 50px;

height: 50px;

position: absolute;

top: 175px;

left: 175px;

background: black;

/*border: 25px solid black;*/

border-radius: 50%;

}

.ball {

width: 26px;

height: 26px;

background: black;

border-radius: 50%;

position: absolute;

top: -26px;

left: -12px;

}

.newball {

width: 26px;

height: 26px;

background: black;

border-radius: 50%;

position: absolute;

top: -26px;

left: -12px;

}

.line {

width: 2px;

height: 124px;

background: black;

position: absolute;

top: 76px;

left: 199px;

transform-origin: 50% 100%;

}

.box {

width: 400px;

height: 600px;

border: 1px solid black;

background: rgb(224, 224, 224);

overflow: hidden;

/*text-align: center;*/

/*line-height: 40px;*/

/*font-size: 40px;*/

}

.start {

width: 400px;

height: 600px;

background: rgba(0, 0, 0, 0.7);

position: absolute;

top: 1px;

left: 1px;

text-align: center;

line-height: 600px;

font-size: 40px;

color: rgb(214, 206, 206);

}

.startBtn {

width: 150px;

height: 60px;

border: 2px solid gray;

position: absolute;

top: 350px;

left: 125px;

background: rgba(188, 188, 188, 0.8);

border-radius: 20px;

text-align: center;

line-height: 60px;

font-size: 25px;

color: rgb(88, 100, 100);

cursor: pointer;

}

.num {

width: 26px;

height: 26px;

background: black;

color: white;

border-radius: 50%;

margin-left: 187px;

margin-top: 5px;

text-align: center;

line-height: 26px;

font-size: 15px;

}

.over{

width: 400px;

height: 600px;

background: rgba(0, 0, 0, 0.7);

position: absolute;

top: 1px;

left: 1px;

text-align: center;

line-height: 600px;

font-size: 40px;

color: rgb(214, 206, 206);

display: none;

}

.again{

width: 150px;

height: 60px;

border: 2px solid gray;

position: absolute;

top: 350px;

left: 125px;

background: rgba(188, 188, 188, 0.8);

border-radius: 20px;

text-align: center;

line-height: 60px;

font-size: 25px;

color: rgb(88, 100, 100);

cursor: pointer;

}

.niu{

width: 400px;

height: 600px;

background: rgba(0, 0, 0, 0.7);

position: absolute;

top: 1px;

left: 1px;

text-align: center;

line-height: 600px;

font-size: 200px;

color: rgb(214, 206, 206);

display: none;

}

</style>

</head>

<body>

见缝插针<br>

<div class="startBtn">START</div>

</div>

游戏结束

</div>

牛逼

</div>

</body>

var start = document.querySelector('.start');

var startBtn = document.querySelector('.startBtn');

startBtn.onclick = function() {

start.style.display = 'none';

}

var body_ = document.querySelector('.box');

var wrap = document.createElement('div');

wrap.className = 'wrap';

body_.appendChild(wrap);

var center = document.createElement('div');

center.className = 'center';

body_.appendChild(center);

var index = 1;

var x = 5;

var arr = [];

function made(){

for (var i = 0; i < x; i++) {

var line = document.createElement('div');

line.className = 'line';

line.setAttribute('id', 'init-line' + (i + 1) + '');

line.style.transform = 'rotate(' + i * (360 / x) + 'deg)';

arr.push(i * 360 / x);

console.log(arr);

var ball = document.createElement('div');

ball.className = 'ball';

line.appendChild(ball);

wrap.appendChild(line);

}

var timer = null;

var z = 0;

timer = setInterval(function() {

z++;

wrap.style.transform = 'rotate(' + z + 'deg)';

wrap.style.transformOrigin = '50% 50%';

if (z >= 360) {

z = 0;

} else {

z++;

}

}, 20)

body_.onclick = function() {

var newline = document.createElement('div');

newline.className = 'newline';

newline.style.width = '2px';

newline.style.height = '124px';

newline.style.background = 'black';

newline.style.position = 'absolute';

newline.style.left = '199px';

newline.style.top = '76px';

newline.style.transformOrigin = '50% 100%';

var newZ = 180 - z;

if (newZ <= 0) {

arr.push(newZ + 360)

} else {

arr.push(newZ);

}

// console.log(arr);

newline.style.transform = 'rotate(' + newZ + 'deg)';

var newball = document.createElement('div');

newball.className = 'newball';

newline.appendChild(newball);

wrap.appendChild(newline);

for (var i = 0; i < arr.length - 1; i++) {

if (Math.abs(arr[i] - arr[arr.length - 1]) <= 10) {

clearInterval(timer);

gameover();

}

var mm=0;

var nums=document.querySelectorAll('.num');

body_.removeChild(nums[mm]);

console.log(nums.length);

if (nums.length==1) {

next();

}

var c = 10;

for (var i = 0; i < c; i++) {

var num = document.createElement('div');

num.className = 'num';

num.innerHTML =c-i;

body_.appendChild(num);

}

var niu=document.querySelector('.niu');

function next(){

clearInterval(timer);

niu.style.display='block';

}

made();

var over=document.querySelector('.over');

function gameover(){

over.style.display='block';

}

</script>

</html>