Effect Chart:
Code:
Html:
HTML>
<html>
<lang="en">
< charset= "UTF-8">
<title> Tetris </title>
< src="js01dia.js"></script>
</head >
< body >
</body >
</html>Js:
/** * Created by Hao on 2015/8/29. *///table number of rowsvartries_rows= 16; Number of columns in a tablevarTries_cols= 10; Width height of cellvarWidhei= 20; function to create a tablevarTable;varcreatetable=function(Rows, cols, Cellwidth, Cellheight) {Table=Document. createelement ("Table"); for(vari = 0; i < rows; i++) {varrow =Table. InsertRow (i); for(varj = 0; J < cols; J + +) {varCell = Row.insertcell (j); Cell.style.width= cellwidth+"px"; Cell.style.Height= cellheight+"px"; }
} returnTable; //array, find the position of the graphic block (that is, the graphics box)varCurrentfall= [
{x:Tries_cols/2-1,y: 0}, {x:Tries_cols/2,y: 0}, {x:Tries_cols/2,y: 1}, {x:Tries_cols/2+1,y: 1}]; When the page load completes, call the code in the function:window. onload =function()
{varTable=createtable (tries_rows,Tries_cols,Widhei,Widhei); Table.Border= 1; The border line of the table is a single table.style.Bordercollapse="Collapse";Document. Body. appendchild (table); SetInterval ("Fall()", 500); Traversing the elements in an array currentfall for(vari=0;i<Currentfall.length; i++) {varCur=Currentfall[i]; Table.rows[Cur.y].cells[Cur.x].style.BackgroundColor="Red"; }//Box downvarFall=function() {//Traversal of elements in array currentfall, background is white for(vari=0;i<Currentfall.length; i++) {varCur=Currentfall[i];Table.rows[Cur.y].cells[Cur.x].style.BackgroundColor="White"; Don't drop it when you're judging the end.varCanfall =true; Traversing the elements in an array currentfall for(vari=0;i<Currentfall.length; i++) {if(Currentfall[i].y>=tries_rows-1) {Canfall =false; Break; }///If you can drop downif(Canfall) {//traversal of elements in array Currentfall for(vari=0;i<Currentfall.length; i++) {varCur=Currentfall[i]; Cur.y++; }
}Else{//If you can't drop it, open a new box}//traverse the elements in the array currentfall, the background is red for(vari=0;i<Currentfall.length; i++) {varCur=Currentfall[i];Table.rows[Cur.y].cells[Cur.x].style.BackgroundColor="Red";
}
}; Reference Video: http://www.chuanke.com/?mod=student&act=study&courseid=93303
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
