Commentaire: Tetris a 7 parties, et chaque pièce occupe un nombre et une position différents du rectangle, alors créez une classe de composants, puis créez un tableau pour stocker 7 parties. Chaque pièce contient le tableau pour stocker le nombre et la position du rectangle occupé par le composant. Ce qui suit est une introduction détaillée
Les principes de base de cette implémentation de jeu:La zone de jeu est une zone de taille limitée. La zone de jeu de ce jeu a 21 × 25 rectangles, chaque largeur rectangulaire est de 10 unités et la hauteur est de 6 unités (l'unité absolue de toile est fixe, non pixel).
Créez la classe Rusblock pour contenir les données et comportements correspondants et créez un tableau bidimensionnel ASTATE [21] [25] pour enregistrer les rectangles marqués dans la zone de jeu.
Tetris a 7 parties, et chaque pièce occupe un nombre et une position différents du rectangle, alors créez une classe de composants, puis créez un tableau pour stocker 7 parties. Chaque pièce contient le tableau pour stocker le nombre et la position du rectangle occupé par le composant. Lorsque la partie qui tombe sera terminée, une nouvelle pièce sera générée et le rectangle marqué de la pièce sera attribué à la gamme de la zone de jeu.
Dans la fonction de boucle de jeu, les pièces qui tombent sont imprimées, les pièces déjà fixes et les pièces qui tombent sont imprimées.
Connaissances de base:
HTML5 CSS JS
Ce jeu comprend trois fichiers:
Rusblock.html: Définition des éléments
Rusblock.css: style set
Rusblock.js: contrôle du script
Étape 1: Paramètres d'interface et préparation des matériaux
Rusblock.html
<! Doctype html>
<html>
<adal>
<Title> Rusblock </Title>
<link rel = Stylesheet type = text / css href = rusblock.css>
<script type = text / javascript>
fonction sharegame () {
var url =? link = + document.url + & title = rusblock;
window.showmodaldialog ([url]);
}
</cript>
</ head>
<Body onKeyUp = Action (événement)>
<Loop audio = 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 = aire de jeu>
<div id = Button-Area>
<h1 id = game-name> rusblock </h1>
<Button id = Button-Game-start onClick = GameStart ()> Démarrer </futh>
<Button id = Button-Game-End OnClick = Gameend ()> fin </fut Button>
<form id = formulaire formulaire>
<select id = select-game-level>
<Valeur d'option = 500 ″ sélectionnée = sélectionné> Easy </ Option>
<Valeur d'option = 300 ″> Normal </ Option>
<Valeur d'option = 200 ″> dur </opoption>
</lect>
</ form>
<Button onClick = Sharegame () id = Button-Game-share> Partager vers Renren </futton>
</div>
<canvas id = game-canvas> </ canvas>
<div id = Score-Area>
<h2> score </h2>
<p id = score de jeu> 0 </p>
</div>
</div>
<script type = text / javascript src = rusblock.js> </cript>
</docy>
</html>
Étape 2: style
Rosblock.css
corps {
Color en arrière-plan: gris;
Texte-aligne: Centre;
Font-Family: «Times New Roman»;
Image d'arrière-plan: url ();
}
H1 # Nom de jeu {
Color d'arrière-plan: blanc;
Largeur: 100%;
taille de police: X-plus;
}
H2, # jeu-score {
taille de police: X-plus;
Color d'arrière-plan: blanc;
}
# Area de jeu {
Position: absolue;
Gauche: 10%;
Largeur: 80%;
Hauteur: 99%;
}
Canvas # givas gibier {
Color d'arrière-plan: blanc;
Largeur: 80%;
hauteur: 98%;
flottant: à gauche;
}
# Button-Area, # Score-Area {
Largeur: 10%;
hauteur: 100%;
flottant: à gauche;
}
# Button-Game-Start, # Button-Game End, # Button-Game-Share, # Select-Game-Level {
Largeur: 100%;
hauteur: 10%;
taille de police: plus grand;
largeur de droite: 3px;
Color d'arrière-plan: blanc;
}
# Select-jeu-niveau {
Largeur: 100%;
hauteur: 100%;
taille de police: X-plus;
Color à la frontière: gris;
}
Étape 3: Écrivez le code JS
Rusblock.js
Analyse des membres inclus par la classe Rusblock:
données:
NcurrentComid: l'ID du composant de dépôt actuel
Astate [21] [25]: un tableau qui stocke l'état de la zone de jeu
CurrentCom: la partie qui tombe actuellement
Nextcom: partie suivante
PTindex: l'indice de la partie qui tombe actuellement par rapport à la zone de jeu
fonction:
NewNextcom (): générer un nouveau composant suivant
NextComtoCurrentCom (): Transférer les données du composant suivant vers le composant actuellement en chute
Candown (): Déterminez si le composant actuel peut encore tomber
Cannew (): déterminer si les nouveaux composants peuvent être générés
Left (): le composant actuel se déplace vers la gauche
Droit (): le composant actuel se déplace vers la droite
Rotate (): le composant actuel tourne dans le sens des aiguilles d'une montre
Acceleratet (): le composant actuel accélère vers le bas
Disparaître (): éliminer une ligne
CheckFail (): Déterminez si le jeu échoue
Invalidatect (): rafraîchir la zone du composant actuel
Complet: Téléchargez la démo