<!DOCTYPE HTML>
<html lang = 'en'>
<head>
<meta charset = 'UTF-8'/>
<title>Document</title>
<style>
*{
padding:0;
margin:0;
}
.boundary{
position:relative;
overflow:hidden;
width:500px;
height:800px;
border:10px solid black;
margin:0 auto;
margin-top:50px;
}
button{
position:absolute;
width:500px;
height:150px;
font-size:50px;
background-color:#FFC0CB;
z-index:2;
}
.box{
position:absolute;
width:500px;
height:200px;
z-index:1;
}
</style>
</head>
<body>
<div class = 'boundary'>
<button>Let's Go</button>
<div class = 'box'></div>
<div class = 'box'></div>
<div class = 'box'></div>
<div class = 'box'></div>
<div class = 'box'></div>
</div>
<script>
var num = 0;
var num1 = 1;
var num2 = 1;
var num3 = 1;
var num4 = 1;
var num5 = 1;
var numNew = 1;
var divBox = document.getElementsByClassName("box")[0];
var divBox2 = document.getElementsByClassName("box")[1];
var divBox3 = document.getElementsByClassName("box")[2];
var divBox4 = document.getElementsByClassName("box")[3];
var divBox5 = document.getElementsByClassName("box")[4];
var button = document.getElementsByTagName('button')[0];
var arrDivNew = [];
var arrDivNew2 = [];
var arrDivNew3 = [];
var arrDivNew4 = [];
var arrDivNew5 = [];
button.onclick = function(){
//当按钮点击后消失
button.style.display = "none";
//往页面中的class = 'box'的div插入5个小div
for(var i = 0; i < 5; i++){
arrDivNew[i] = document.createElement('div');
arrDivNew[i].style.width = 100 + 'px';
arrDivNew[i].style.height = 200 + 'px';
arrDivNew[i].style.border = '1px solid black';
arrDivNew[i].style.float = 'left';
arrDivNew[i].style.boxSizing = 'border-box';
divBox.appendChild(arrDivNew[i]);
}
//往页面中的class = 'box'的div插入5个小div
for(var i = 0; i < 5; i++){
arrDivNew2[i] = document.createElement('div');
arrDivNew2[i].style.width = 100 + 'px';
arrDivNew2[i].style.height = 200 + 'px';
arrDivNew2[i].style.border = '1px solid black';
arrDivNew2[i].style.float = 'left';
arrDivNew2[i].style.boxSizing = 'border-box';
divBox2.appendChild(arrDivNew2[i]);
}
//往页面中的class = 'box'的div插入5个小div
for(var i = 0; i < 5; i++){
arrDivNew3[i] = document.createElement('div');
arrDivNew3[i].style.width = 100 + 'px';
arrDivNew3[i].style.height = 200 + 'px';
arrDivNew3[i].style.border = '1px solid black';
arrDivNew3[i].style.float = 'left';
arrDivNew3[i].style.boxSizing = 'border-box';
divBox3.appendChild(arrDivNew3[i]);
}
//往页面中的class = 'box'的div插入5个小div
for(var i = 0; i < 5; i++){
arrDivNew4[i] = document.createElement('div');
arrDivNew4[i].style.width = 100 + 'px';
arrDivNew4[i].style.height = 200 + 'px';
arrDivNew4[i].style.border = '1px solid black';
arrDivNew4[i].style.float = 'left';
arrDivNew4[i].style.boxSizing = 'border-box';
divBox4.appendChild(arrDivNew4[i]);
}
//往页面中的class = 'box'的div插入5个小div
for(var i = 0; i < 5; i++){
arrDivNew5[i] = document.createElement('div');
arrDivNew5[i].style.width = 100 + 'px';
arrDivNew5[i].style.height = 200 + 'px';
arrDivNew5[i].style.border = '1px solid black';
arrDivNew5[i].style.float = 'left';
arrDivNew5[i].style.boxSizing = 'border-box';
divBox5.appendChild(arrDivNew5[i]);
}
//让5行小div动起来
divBox5.style.bottom = 800 + 'px';
divBox.style.bottom = 600 + 'px';
divBox2.style.bottom = 400 + 'px';
divBox3.style.bottom = 200 + 'px';
divBox4.style.bottom = 0 + 'px';
var timer = setInterval(function(){
if(num >= 0 && num <= 10){
numNew = 1;
}else if(num > 10 && num <= 15){
numNew = 2;
}else if(num > 15 && num <= 23){
numNew = 3;
}else if(num > 23 && num <= 40){
numNew = 4;
}else if(num > 50 && num <= 60){
numNew = 4.2;
}else if(num > 60 && num <= 70){
numNew = 4.4;
}else if(num > 70 && num <= 80){
numNew = 4.6;
}else if(num > 80 && num <= 90){
numNew = 4.8;
}else{
numNew = 5;
}
var back5 = Math.floor(Math.random()*5);
if(parseInt(divBox5.style.bottom) <= -200){
divBox5.style.bottom = 801 + 'px';
num5 = 0;
}
if(parseInt(divBox5.style.bottom) === 801){
for(var i = 0; i < 5; i++){
if(i != back5){
arrDivNew5[i].style.backgroundColor = 'transparent';
arrDivNew5[i].onclick = function(){
this.style.backgroundColor = 'gray';
alert('积分数量：' + num + ' 继续加油!');
num = 0;
clearInterval(timer);
}
}else{
arrDivNew5[i].style.backgroundColor = '#FFC0CB';
arrDivNew5[i].onclick = function(){
this.style.backgroundColor = 'gray';
num++;
num5 = 1;
}
}
}
}
divBox5.style.bottom = parseInt(divBox5.style.bottom) - numNew + 'px';
if(parseInt(divBox5.style.bottom) < 0&&num5 === 0){
alert('积分数量：' + num + ' 继续加油!');
num = 0;
clearInterval(timer);
}
var back = Math.floor(Math.random()*5);
if(parseInt(divBox.style.bottom) <= -200){
divBox.style.bottom = 801 + 'px';
num1 = 0;
}
if(parseInt(divBox.style.bottom) === 801){
for(var i = 0; i < 5; i++){
if(i != back){
arrDivNew[i].style.backgroundColor = 'transparent';
arrDivNew[i].onclick = function(){
this.style.backgroundColor = 'gray';
alert('积分数量：' + num + ' 继续加油!');
num = 0;
clearInterval(timer);
}
}else{
arrDivNew[i].style.backgroundColor = '#FFC0CB';
arrDivNew[i].onclick = function(){
this.style.backgroundColor = 'gray';
num++;
num1 = 1;
}
}
}
}
divBox.style.bottom = parseInt(divBox.style.bottom) - numNew + 'px';
if(parseInt(divBox.style.bottom) < 0&&num1 === 0){
alert('积分数量：' + num + ' 继续加油!');
num = 0;
clearInterval(timer);
}
var back2 = Math.floor(Math.random()*5);
if(parseInt(divBox2.style.bottom) <= -200){
divBox2.style.bottom = 801 + 'px';
num2 = 0;
}
if(parseInt(divBox2.style.bottom) === 801){
for(var i = 0; i < 5; i++){
if(i != back2){
arrDivNew2[i].style.backgroundColor = 'transparent';
arrDivNew2[i].onclick = function(){
this.style.backgroundColor = 'gray';
alert('积分数量：' + num + ' 继续加油!');
num = 0;
clearInterval(timer);
}
}else{
arrDivNew2[i].style.backgroundColor = '#FFC0CB';
arrDivNew2[i].onclick = function(){
this.style.backgroundColor = 'gray';
num++;
num2 = 1;
}
}
}
}
divBox2.style.bottom = parseInt(divBox2.style.bottom) - numNew + 'px';
if(parseInt(divBox2.style.bottom) < 0&&num2 === 0){
alert('积分数量：' + num + ' 继续加油!');
num = 0;
clearInterval(timer);
}
var back3 = Math.floor(Math.random()*5);
if(parseInt(divBox3.style.bottom) <= -200){
divBox3.style.bottom = 801 + 'px';
num3 = 0;
}
if(parseInt(divBox3.style.bottom) === 801){
for(var i = 0; i < 5; i++){
if(i != back3){
arrDivNew3[i].style.backgroundColor = 'transparent';
arrDivNew3[i].onclick = function(){
this.style.backgroundColor = 'gray';
alert('积分数量：' + num + ' 继续加油!');
num = 0;
clearInterval(timer);
}
}else{
arrDivNew3[i].style.backgroundColor = '#FFC0CB';
arrDivNew3[i].onclick = function(){
this.style.backgroundColor = 'gray';
num++;
num3 = 1;
}
}
}
}
divBox3.style.bottom = parseInt(divBox3.style.bottom) - numNew + 'px';
if(parseInt(divBox3.style.bottom) < 0&&num3 === 0){
alert('积分数量：' + num + ' 继续加油!');
num = 0;
clearInterval(timer);
}
var back4 = Math.floor(Math.random() * 5);
if(parseInt(divBox4.style.bottom) <= -200){
divBox4.style.bottom = 801 + 'px';
num4 = 0;
}
if(parseInt(divBox4.style.bottom) === 801){
for(var i = 0; i < 5; i++){
if(i != back4){
arrDivNew4[i].style.backgroundColor = 'transparent';
arrDivNew4[i].onclick = function(){
this.style.backgroundColor = 'gray';
alert('积分数量：' + num + ' 继续加油!');
num = 0;
clearInterval(timer);
}
}else{
arrDivNew4[i].style.backgroundColor = '#FFC0CB';
arrDivNew4[i].onclick = function(){
this.style.backgroundColor = 'gray';
num++;
num4 = 1;
}
}
}
}
divBox4.style.bottom = parseInt(divBox4.style.bottom) - numNew + 'px';
if(parseInt(divBox4.style.bottom) < 0&&num4 === 0){
alert('积分数量：' + num + ' 继续加油!');
num = 0;
clearInterval(timer);
}
}, 10);
}
</script>
</body>
</html>
js写别踩白块游戏
猜你喜欢
转载自blog.csdn.net/weixin_48727085/article/details/107971045
今日推荐
周排行