Comment: Tetris has 7 parts, and each part occupies a different number and position of the rectangle, so create a component class, and then create an array to store 7 parts. Each part contains the array to store the number and position of the rectangle occupied by the component. The following is a detailed introduction
The basic principles of this game implementation:The game area is a limited size area. The game area of this game has 21×25 rectangles, each rectangle width is 10 units, and the height is 6 units (the absolute unit of canvas is fixed, non-pixel).
Create the RusBlock class to contain the corresponding data and behaviors, and create a two-dimensional array aState[21][25] to record the marked rectangles in the game area.
Tetris has 7 parts, and each part occupies a different number and position of the rectangle, so create a component class, and then create an array to store 7 parts. Each part contains the array to store the number and position of the rectangle occupied by the component. When the falling part is over, a new part will be generated, and the marked rectangle of the part will be assigned to the array of the game area.
In the game loop function, the falling parts are printed, the already fixed parts, and the falling parts are printed.
Basic knowledge:
HTML5 CSS JS
This game includes three files:
RusBlock.html: Setting elements
RusBlock.css: Set style
RusBlock.js: Script Control
Step 1: Interface settings and material preparation
RusBlock.html
<!DOCTYPE html>
<html>
<head>
<title>RusBlock</title>
<link rel=stylesheet type=text/css href=RusBlock.css>
<script type=text/javascript>
function ShareGame() {
var URL = ?link= + document.URL + &title=RusBlock;
window.showModalDialog([URL]);
}
</script>
</head>
<body onkeyup=Action(event)>
<audio loop=loop id=Background-AudioPlayer preload=auto>
<source src=audio/background.mp3″ type=audio/mp3″/>
</audio>
<audio id=GameOver-AudioPlayer preload=auto>
<source src=audio/gameover.ogg type=audio/ogg>
</audio>
<audio id=Score-AudioPlayer preload=auto>
<source src=audio/score.mp3″ type=audio/mp3″/>
</audio>
<div id=Game-Area>
<div id=Button-Area>
<h1 id=Game-Name>RusBlock</h1>
<button id=Button-Game-Start onclick=GameStart()>Start</button>
<button id=Button-Game-End onclick=GameEnd()>End</button>
<form id=Form-Game-Level>
<select id=Select-Game-Level>
<option value=500″ selected=selected>Easy</option>
<option value=300″>Normal</option>
<option value=200″>Hard</option>
</select>
</form>
<button onclick=ShareGame() id=Button-Game-Share>Share to Renren</button>
</div>
<canvas id=Game-Canvas></canvas>
<div id=Score-Area>
<h2>Score</h2>
<p id=Game-Score>0</p>
</div>
</div>
<script type=text/javascript src=RusBlock.js></script>
</body>
</html>
Step 2: Style
RosBlock.css
body {
background-color:gray;
text-align:center;
font-family: 'Times New Roman';
background-image:url();
}
h1#Game-Name {
background-color:white;
width:100%;
font-size:x-large;
}
h2,#Game-Score {
font-size:x-large;
background-color:white;
}
#Game-Area {
position:absolute;
left:10%;
width:80%;
height:99%;
}
canvas#Game-Canvas {
background-color:white;
width:80%;
height:98%;
float:left;
}
#Button-Area ,#Score-Area{
width:10%;
height:100%;
float:left;
}
#Button-Game-Start ,#Button-Game-End,#Button-Game-Share,#Select-Game-Level{
width:100%;
height:10%;
font-size:larger;
border-right-width:3px;
background-color:white;
}
#Select-Game-Level {
width:100%;
height:100%;
font-size:x-large;
border-color:gray;
}
Step 3: Write js code
RusBlock.js
Member parsing included by Rusblock class:
data:
nCurrentComID: The ID of the current drop component
aState[21][25]: an array that stores the game area state
CurrentCom: The currently falling part
NextCom: Next Part
ptIndex: The index of the currently falling part relative to the game area
function:
NewNextCom(): Generate new next component
NextComToCurrentCom(): Transfer data from the next component to the currently falling component
CanDown(): determine whether the current component can still fall
CanNew(): determine whether new components can be generated
Left(): The current component moves to the left
Right(): The current component moves to the right
Rotate(): The current component rotates clockwise
Acceleratet(): The current component accelerates downward
Disappear(): Eliminate a line
CheckFail(): determine whether the game fails
InvalidateRect(): Refresh the area of the current component
Complete: Download Demo