Comentario: Tetris tiene 7 partes, y cada parte ocupa un número y posición diferentes del rectángulo, así que cree una clase de componentes y luego cree una matriz para almacenar 7 partes. Cada parte contiene la matriz para almacenar el número y la posición del rectángulo ocupado por el componente. La siguiente es una introducción detallada
Los principios básicos de la implementación del juego:El área de juego es un área de tamaño limitado. El área de juego de este juego tiene rectángulos de 21 × 25, cada ancho del rectángulo es de 10 unidades y la altura es de 6 unidades (la unidad absoluta de lienzo es fija, no píxel).
Cree la clase Rusblock para contener los datos y los comportamientos correspondientes, y cree un Astate de matriz bidimensional [21] [25] para registrar los rectángulos marcados en el área de juego.
Tetris tiene 7 partes, y cada parte ocupa un número y posición diferentes del rectángulo, así que cree una clase de componentes y luego cree una matriz para almacenar 7 partes. Cada parte contiene la matriz para almacenar el número y la posición del rectángulo ocupado por el componente. Cuando termine la parte que cae, se generará una nueva parte, y el rectángulo marcado de la parte se asignará a la matriz del área de juego.
En la función de bucle del juego, las partes que caen se imprimen, las partes ya fijas y las partes que caen se imprimen.
Conocimiento básico:
HTML5 CSS JS
Este juego incluye tres archivos:
Rusblock.html: configuración de elementos
Rusblock.css: estilo establecido
Rusblock.js: control de script
Paso 1: Configuración de la interfaz y preparación de material
Rusblock.html
<! Doctype html>
<html>
<Evista>
<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>
</ablo>
<Body OnKeyUp = Action (Event)>
<audio loop = loop id = background-AudioPlayer Preload = Auto>
<fuente src = audio/background.mp3 ″ type = audio/mp3 ″/>
</audio>
<Audio ID = GameOver-AudioPlayer Preload = Auto>
<fuente src = audio/gameover.ogg type = audio/ogg>
</audio>
<Audio ID = Score-AudioPlayer Preload = Auto>
<Source src = audio/scact.mp3 ″ type = audio/mp3 ″/>
</audio>
<Div ID = Game-Area>
<Div ID = Button-AREA>
<h1 id = juego-name> rusblock </h1>
<botón id = botón-game-start onClick = gameStart ()> inicio </botón>
<button id = button-game-end onClick = gameEnd ()> end </boton>
<Form ID = Form-Game-Level>
<select id = select-game-nivel>
<opción valor = 500 ″ seleccionado = seleccionado> fácil </opción>
<opción valor = 300 ″> normal </opción>
<opción valor = 200 ″> duro </ppection>
</select>
</form>
<Button onClick = shareGame () id = Button-Game-share> Compartir en Renren </boton>
</div>
<Canvas ID = Game-Canvas> </Canvas>
<Div ID = Score-Area>
<h2> Score </h2>
<p id = juego-score> 0 </p>
</div>
</div>
<script type = text/javaScript src = rusblock.js> </script>
</body>
</html>
Paso 2: Estilo
Rosblock.css
cuerpo {
Color de fondo: gris;
Text-Align: Center;
Font-Family: 'Times New Roman';
IMAGEN DE ACTUESS: URL ();
}
h1#juego de juego {
Color de fondo: blanco;
Ancho: 100%;
tamaño de fuente: X-Large;
}
H2,#Game-Score {
tamaño de fuente: X-Large;
Color de fondo: blanco;
}
#Área de juego {
Posición: Absoluto;
Izquierda: 10%;
Ancho: 80%;
Altura: 99%;
}
Canvas#Game-Canvas {
Color de fondo: blanco;
Ancho: 80%;
Altura: 98%;
flotante: izquierda;
}
#Área de botón,#Score-área {
Ancho: 10%;
Altura: 100%;
flotante: izquierda;
}
#Button-Game-start,#Button-Game-End,#Button-Game-Share,#SELECT-Game-Level {
Ancho: 100%;
Altura: 10%;
tamaño de fuente: más grande;
ancho de derecho fronterizo: 3px;
Color de fondo: blanco;
}
#Seleccione a nivel de juego {
Ancho: 100%;
Altura: 100%;
tamaño de fuente: X-Large;
color de borde: gris;
}
Paso 3: Escribir código JS
Rusblock.js
Analización de miembros incluido por la clase Rusblock:
datos:
ncurrentcomid: la identificación del componente de caída actual
Astate [21] [25]: una matriz que almacena el estado del área de juego
CurrentCom: la parte que cae actualmente
Nextcom: Siguiente parte
PtIndex: el índice de la parte que cae actualmente en relación con el área de juego
función:
NewNextCom (): Genere un nuevo componente siguiente
NextComTocurrentCom (): Transfiera los datos desde el siguiente componente al componente que se cae actualmente
CANDOWN (): Determine si el componente actual aún puede caer
Canal (): determinar si se pueden generar nuevos componentes
Izquierda (): el componente actual se mueve hacia la izquierda
Right (): el componente actual se mueve hacia la derecha
Girar (): el componente actual gira en sentido horario
AccelerAtet (): el componente actual acelera hacia abajo
Desaparecer (): eliminar una línea
CheckFail (): determine si el juego falla
Invalidaterect (): actualice el área del componente actual
Complete: descargar demostración