Comentário: O Tetris possui 7 partes e cada parte ocupa um número e uma posição diferentes do retângulo; portanto, crie uma classe de componente e, em seguida, crie uma matriz para armazenar 7 partes. Cada peça contém a matriz para armazenar o número e a posição do retângulo ocupado pelo componente. A seguir é uma introdução detalhada
Os princípios básicos desta implementação do jogo:A área do jogo é uma área de tamanho limitado. A área do jogo deste jogo possui 21 × 25 retângulos, cada largura do retângulo é de 10 unidades e a altura é de 6 unidades (a unidade absoluta de tela é fixa, não pixel).
Crie a classe Rusblock para conter os dados e comportamentos correspondentes e criar uma matriz bidimensional astata [21] [25] para registrar os retângulos marcados na área do jogo.
O Tetris possui 7 partes, e cada parte ocupa um número e posição diferentes do retângulo; portanto, crie uma classe de componente e, em seguida, crie uma matriz para armazenar 7 partes. Cada peça contém a matriz para armazenar o número e a posição do retângulo ocupado pelo componente. Quando a parte da queda terminar, uma nova parte será gerada e o retângulo marcado da peça será atribuído à matriz da área do jogo.
Na função de loop do jogo, as peças que caem são impressas, as peças já fixas e as peças que caem são impressas.
Conhecimento básico:
HTML5 CSS JS
Este jogo inclui três arquivos:
Rusblock.html: configuração de elementos
Rusblock.css: definir estilo
Rusblock.js: controle de script
Etapa 1: Configurações de interface e preparação de material
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>
<corpo onkeyup = ação (evento)>
<AUDIO LOOP = LOOP ID = Background-AudioPlayer Preload = Auto>
<fonte src = áudio/background.mp3 ″ tipo = áudio/mp3 ″/>
</udio>
<AUDIO ID = GameOver-Audioplayer Preload = Auto>
<fonte src = áudio/gameover.ogg Type = Audio/Ogg>
</udio>
<AUDIO ID = SCORE-AUDIOPLAYER PROLAAD = AUTO>
<fonte src = áudio/score.mp3 ″ tipo = áudio/mp3 ″/>
</udio>
<div id = áreas de jogo>
<div ID = Button-area>
<h1 id = game-name> rusblock </h1>
<Button ID = Button-Game-Start OnClick = GameStart ()> Iniciar </botão>
<botão ID = Button-Game-End OnClick = GameEnd ()> END </BOTTN>
<form id = formulário-jogo-lame>
<SELECT ID = Select-game-LEVEL>
<Valor da opção = 500 ″ selecionado = selecionado> Easy </pption>
<Valor da opção = 300 ″> Normal </pption>
<Opção Value = 200 ″> Hard </pption>
</leclect>
</morm>
<botão onclick = sharegame () id = button-game share> compartilhe com renren </button>
</div>
<Canvas id = game-canvas> </canvas>
<div id = score-area>
<H2> Pontuação </h2>
<P ID = Game-Score> 0 </p>
</div>
</div>
<script type = text/javascript src = rusblock.js> </script>
</body>
</html>
Etapa 2: estilo
Rosblock.css
corpo {
Background-Color: cinza;
Alinhamento de texto: centro;
Fonte-família: 'Times New Roman';
Imagem de fundo: url ();
}
H1#nome de jogo {
cor de fundo: branco;
largura: 100%;
tamanho de fonte: x-large;
}
H2,#escore de jogo {
tamanho de fonte: x-large;
cor de fundo: branco;
}
#Área de jogo {
Posição: Absoluto;
Esquerda: 10%;
largura: 80%;
Altura: 99%;
}
Canvas#Game-Canvas {
cor de fundo: branco;
largura: 80%;
Altura: 98%;
flutuar: esquerda;
}
#Área de botão,##area {
largura: 10%;
Altura: 100%;
flutuar: esquerda;
}
#Button-Game-Start,#Button-Game-End,#Button-Game-Share,#Select-Game-Level {
largura: 100%;
altura: 10%;
tamanho de fonte: maior;
largura da fronteira: 3px;
cor de fundo: branco;
}
#Selecione o nível de jogo {
largura: 100%;
Altura: 100%;
tamanho de fonte: x-large;
cor de borda: cinza;
}
Etapa 3: Escreva o código JS
Rusblock.js
Parsing de membros incluído pela classe Rusblock:
dados:
ncurrentComid: o ID do componente de queda atual
astate [21] [25]: uma matriz que armazena o estado da área de jogo
Currentcom: a parte atualmente caindo
Nextcom: Próxima parte
ptindex: o índice da parte atualmente em relação à área do jogo
função:
NewNextcom (): gerar novo próximo componente
NextComToCurrentCom (): Transfira dados do próximo componente para o componente atualmente em queda
Cdown (): determine se o componente atual ainda pode cair
Cannew (): determine se novos componentes podem ser gerados
Esquerda (): o componente atual se move para a esquerda
Direita (): o componente atual se move para a direita
Girar (): o componente atual gira no sentido horário
Aceleratet (): o componente atual acelera para baixo
Desaparecer (): eliminar uma linha
Check -alail (): determine se o jogo falha
Invalidaterect (): atualize a área do componente atual
Complete: Demoção de download