HTML5 JS implementation of Tetris principles and specific steps_html5 tutorial skills

Basic principles for the implementation of this game:

The game area is an area of ​​limited size. The game area of ​​this game has 21×25 rectangles. Each rectangle has a width of 10 units and a height of 6 units (the absolute unit of canvas is fixed, not pixels).

Create the RusBlock class to contain corresponding data and behavior, and create a two-dimensional array aState[21][25] to record the marked rectangle in the game area.

Tetris has 7 parts. The number and position of the rectangles occupied by each part are different, so create a part class, and then create an array to store the 7 parts. Each part contains an array to store the rectangle occupied by the part. The number and position of rectangles. When the falling part reaches the bottom, 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, print the falling parts, the fixed parts, and the next falling parts.

Basic knowledge:

HTML5 CSS JS
This game includes three files:

RusBlock.html: Setting elements
RusBlock.css: Setting style
RusBlock.js: Script control

Step One: Interface Settings and Material Preparation

RusBlock.html

Copy code

The code is as follows:

< ;audio id=”Score-AudioPlayer” preload=”auto”>

RusBlock

Start
End

Easy
Normal
Hard

Share to Renren

Score< ;/h2>

0

Step 2: Style
RosBlock.css

Copy code

The code is as follows:

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;
}

第三步:编写js代码

RusBlock.js

Rusblock类包括的成员解析:

数据:

nCurrentComID:当前下落部件的ID

aState[21][25]:存储游戏区域状态的数组

CurrentCom：当前下落的部件

NextCom：下一部件

ptIndex：当前下落的部件相对游戏区域的索引

函数:

NewNextCom()：产生新的下一部件

NextComToCurrentCom():将下一部件的数据转移到当前下落的部件上

CanDown():判断当前部件是否还可以下落

CanNew():判断是否还可以产生新的部件

Left():当前部件向左移动

Right():当前部件向右移动

Rotate():当前部件顺时针旋转

Acceleratet():当前部件向下加速

Disappear():消去一行

CheckFail():判断是否游戏失败

InvalidateRect():刷新当前部件的区域

完成:下载Demo