The examples in this article share with you the specific code of JS to implement the five-color block game for your reference. The specific content is as follows
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="" > </head> <body> <div class="wrapper"> <div id = "go">Game Start</div> <!-- Exercisedom --> <div ></div> </div> <script src = ""></script> </body> </html>
CSS:
*{
margin: 0;
padding: 0;
}
.wrapper{
position: relative;
width: 400px;
height: 600px;
border: 1px solid black;
margin :160px auto;
overflow: hidden;
}
#go{
position:absolute;
left:0;
top: 0;
width: 100%;
height: 100px;
border-bottom: 1px solid #000;
font-weight: bolder;
font-size: 60px;
line-height: 100px;
text-align: center;
cursor: pointer;
z-index: 999;
}
#main{
position: relative;
width:400px;
height: 600px;
/* border:1px solid red; */
}
.row{
width: 400px;
height: 150px;
}
.row div{
/* Block-level elements horizontal arrangement */
float: left;
width: 100px;
height: 150px;
border: 1px solid #000;
/* Mixed mode box model */
box-sizing: border-box;
/* The final display width is the set width */
}
js:
// bindEvent display start, clear creatDiv to add a line move to judge the victory or defeat scorevar go = ('go');
// Sports tend tovar main = ('main');
var timer;
var speed = 5,num = 0,flag = true;
function bindEvent() {
('click', function () {
= 'none';
move();
});
('click',function(e){
if(flag){
var tar = ;
if( == 'tar'){
= '#bbb';
('tar');
num++;
}else{
clearInterval(timer);
alert('The game is over and scores'+num);
flag = false;
}
}
});
}
bindEvent();
function move() {
timer = setInterval(function(){
// Initial position + speed var step = parseInt()+speed;
// Pay the new top at the current location = step+'px';
if(parseInt()>=0){
= '-150px';
cDiv();
}
// Remove excess div var len = ;
if(len == 6){
var lastRow = [len -1];
// Whether it ends for(var i = 0;i<4;i++){
if([i].('tar')){
clearInterval(timer);
alert('Game end score:'+num);
flag = false;
}}
([len - 1]);
}
}
,20 );
}
// Create rows and columnsfunction cDiv() {
// Generate array color var color = ['red','blue','green','pink'];
// Create a row var oDiv = ('div');
// Generate a random number var index = (()*4);
// Create four columns for (var i = 0; i < 4; i++) {
// Create four column blocks var iDiv = ('div');
// Insert columns in rows (iDiv);
}
// The clicked div var clickDiv = [index];
('class','tar');
// Random colors = color[index];
('class', 'row');
// Insert if the behavior is empty, and if it is not empty, insert upward; if ( == 0) {
(oDiv);
} else {
(oDiv, [0]);
}
}
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.