Recentemente, decidi ajudar uma criança muito especial de 11 anos com um projeto de classe para escrever um videogame. Isso me leva de volta aos 11 anos de idade e escrevi meus primeiros jogos. É claro que naquela época eu escrevia em BASIC no meu Timex Sinclaire 1000 e fiz o possível para salvar o código em um gravador de fita cassete. Hoje vamos escrever o jogo usando HTML5 com WebMatrix e sistemas de controle de origem. Em vez de visar uma TV preto e branco de 13″, há uma variedade de dispositivos de consumo que precisamos visar, bem como interfaces de toque modernas. Isso significa que precisamos ter uma solução que funcione bem em um telefone, tablet, desktop e outros. Felizmente, o HTML5 nos oferece a capacidade de iniciar o dispositivo móvel/toque primeiro e aumentar a escala.
Decidimos que escreveríamos uma versão online de Pente que funcionaria em várias plataformas e dispositivos. Fui apresentado ao Pente pela primeira vez na faculdade, quando um de meus bons amigos escreveu uma versão dele para ajudá-lo a aprender Turbo Pascal em um fim de semana. ele fez isso em um fim de semana no início dos anos 90, imaginei que poderia fazer isso durante várias semanas, investindo 2 a 3 horas por semana.
Pente é um jogo relativamente simples. O objetivo é obter cinco de suas pedras em uma linha ou’capturar’5 pares de pedras de seus oponentes. O tabuleiro de jogo é feitode uma grade quadrada de 12×12. Os usuários se revezam na colocação de pedras nas intersecções das linhas Cada jogador tenta obter 5 pedras em uma linha horizontalmente, verticalmente ou ao longo da diagonal, enquanto bloqueia seu competidor de fazer o mesmo. Se um jogador rodeia um par de pedras do oponente, essas pedras são capturadas e removidas do tabuleiro. Capturar 5 pares de pedras também ganhará o jogo.
Nesta postagem do blog, vamos criar a superfície de jogo básica, uma grade 12×12. Como este jogo requer algumas técnicas básicas de desenho, optei por usar o elemento Canvas. Canvas é um novo elemento HTML5 que fornece uma superfície rica para desenhar dinamicamente, adicionar imagens e realizar animações comuns a praticamente qualquer jogo. Nesta etapa inicial, irei definir as dimensões da tela para um tamanho fixo de 800×800 pixels. Vou tornar isso mais dinâmico na próxima etapa, mas queria simplificar as coisas para começar.
Você pode defina a altura e a largura especificando os valores nos atributos, mas porque sei que isso precisará ser mais dinâmico com base no dispositivo e no tamanho do navegador, escolhi definir isso no JavaScript. No código a seguir, defino a altura e a largura no método jQuery.ready. Eu escolhi ir um pouco à velha escola usando o método getElementById em vez de um seletor jQuery. Assim, você pode ver que, quando obtenho uma referência ao elemento canvas, obtenho seu contexto 2d chamando o método getContext passando o parâmetro”2d”.
$ (document).ready (function
() {var
canvas=document.getElementById ("PenteBoard"
) ,context=canvas.getContext (
"2d"
),blockSize=800/12;
canvas.height=800;
canvas.width=800;
//mais coisas vão aqui
});
Próximo I definir uma variável blockSize que usarei na próxima etapa. Estou obtendo qual deve ser a dimensão de cada bloco dividindo os 800 pixels usados para a tela por 12, o número de blocos na superfície de jogo. Em seguida, defino a altura e largura reais da tela para 800 pixels.
Depois de definir o tamanho da tela, é hora de adicionar as linhas de grade. Como a superfície de jogo é uma grade de células 12×12, precisamos desenhar 11 linhas verticais e horizontais. Isso significa que precisamos empregar 2 loops for que contarão de 12 a 0. Por que você pode perguntar para trás? Bem, evidentemente, contar para trás é mais rápido em loops for do que para frente, e estou sempre procurando ajustes de desempenho. Esse truque foi apontado para mim durante uma palestra no Dallas Day of.NET, e vi algumas outras referências a isso desde então, então vamos em frente;).
Antes de executar o for loops, você deve definir o strokeStyle e lineWidth do contexto porque esses valores serão usados por cada uma das linhas. Para desenhar uma linha em um Canvas, você chama o método begingPath do contexto. Em seguida, você chama o método moveTo fornecendo as coordenadas x e y. Isso designa o ponto de início da linha. Para uma linha vertical, deve ser algum valor de x variável e 0 valor de y. A chamada moveTo é seguida por lineTo, passando também as coordenadas x e y. Desta vez, a coordenada y deve ser 800 ou a altura vertical da tela. Por fim, chame o método do traço para completar o desenho da linha.
var
i=12;context.strokeStyle=
"# 000"
;context.lineWidth=0. 99;
para
(i=12 ; i> 0; i-) {context.beginPath ();
var
x=blockSize + (12-i) * blockSize;context.moveTo ( x + 0,5, 0);
context.lineTo (x + 0,5, 800);
context.stroke ()
}
para
(i=12; i> 0; i-) {context.beginPath ();
var
y=blockSize + (12-i) * blockSize;context.moveTo (0. 5, y + 0.5);
context.lineTo (800, y + 0.5);
context.stroke ()
}
Para criar as linhas horizontais, repita o loop for, mas desta vez as coordenadas x serão fixas e as coordenadas y variam.
Eu escolhi estilizar a cor de fundo usando um Regra CSS e escolheu um verde. Isso pode ser substituído por qualquer cor ou imagem. Também explorarei mais opções aqui em uma postagem posterior.
Na próxima postagem, revisarei como desenhar um círculo para representar a pedra de um jogador. Esperançosamente, até o final de maio, teremos um jogo totalmente funcional para compartilhar com todos, bem como aprenderemos alguns fundamentos do uso do controle de tela HTML5 e técnicas básicas de jogos AJAX.
