Implémentation HTML5 JS des principes de Tetris et compétences spécifiques du didacticiel steps_html5

Principes de base pour la mise en œuvre de ce jeu :

La zone de jeu est une zone de taille limitée. La zone de jeu de ce jeu comporte 21×25 rectangles. une largeur de 10 unités et une hauteur de 6 unités (l'unité absolue de la toile est fixe, pas les pixels).

Créez la classe RusBlock pour contenir les données et le comportement correspondants, et créez un tableau bidimensionnel aState[21][25] pour enregistrer le rectangle marqué dans la zone de jeu.

Tetris comporte 7 parties. Le nombre et la position des rectangles occupés par chaque partie sont différents, créez donc une classe de parties, puis créez un tableau pour stocker les 7 parties. rectangle occupé par la pièce. Le nombre et la position des rectangles. Lorsque la pièce qui tombe atteint le bas, une nouvelle pièce sera générée et le rectangle marqué de la pièce sera attribué au tableau de la zone de jeu.

Dans la fonction boucle de jeu, imprimez les pièces qui tombent, les pièces fixes et les pièces qui tombent ensuite.

Connaissances de base :

HTML5 CSS JS
Ce jeu comprend trois fichiers :

RusBlock.html : Éléments de configuration
RusBlock.css : Style de configuration
RusBlock.js : Contrôle de script

Première étape : Paramètres de l'interface et préparation du matériel

RusBlock.html

Copier le code

Le code est le suivant :

=”Score-AudioPlayer” preload=”auto”>
;div id=”Game-Area”>

RusBlock

;button id=”Button-Game-Start” onclick=”GameStart()”>Start
Fin< ;/bouton>

=”sélectionné”>Facile
Normal
Difficile

Partager avec Renren div>

🎜>

0

Étape 2 : Style

RosBlock.css





Copier le code

Le code est le suivant :

body {
background-color:gris;
text-align:center;
famille de polices : 'Times New Roman' ;
image-de-fond:url("");
}
h1#Game-Name {
couleur de fond:blanc;
largeur : 100 % ;
font-size:x-large;
}
h2,#Game-Score {
font-size:x-large;
couleur de fond : blanc ;
}
#Game-Area {
position:absolute;
gauche : 10 % ;
largeur : 80 % ;
hauteur : 99 % ;
}
canvas#Game-Canvas {
couleur de fond:blanc;
largeur : 80 % ;
hauteur : 98 % ;
float:gauche;
}
#Button-Area ,#Score-Area{
width:10%;
hauteur : 100 % ;
float:gauche;
}
#Button-Game-Start ,#Button-Game-End,#Button-Game-Share,#Select-Game-Level{
width:100%;
hauteur : 10 % ;
taille de police : plus grande ;
border-right-width:3px;
couleur de fond : blanc ;
}
#Select-Game-Level {
width:100%;
hauteur : 100 % ;
font-size:x-large;
border-color:gris;
}

第三步:编写js代码

RusBlock.js

Rusblock类包括的成员解析:

数据:

nCurrentComID:当前下落部件的ID

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

Actuel Com：当前下落的部件

NextCom：下一部件

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

函数:

NewNextCom()：产生新的

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

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

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

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

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

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

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

Disparaître():消去一行

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

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

完成:下载Demo