Já assisti alguns episódios de vídeos do Canvas no MOOC antes e sempre quis praticar a escrita de algo. Sinto que Snake é relativamente simples. Quando eu estava na faculdade, também escrevi uma versão em personagem da linguagem C. Inesperadamente, ainda encontrei muitos problemas.
O efeito final é o seguinte (se a imagem for muito grande demorará muito. O software para gravar gif tem limite de tempo...)
Comece definindo a área de jogo. Existem apenas dois elementos na tela do Snake: o corpo da cobra e a maçã, e ambos podem ser compostos por grades quadradas. Adicione lacunas entre os quadrados. Por que adicionar lacunas? Você pode imaginar que quando preencher todas as grades com sucesso, se não houver lacunas, será um grande quadrado sólido... Você não tem ideia de como é o corpo da cobra.
Faça um desenho.
As coordenadas do canto superior esquerdo da grade são (0, 0), a abcissa aumenta para a direita e a ordenada aumenta para baixo. Essa direção é a mesma do Canvas.
Cada vez que desenhamos uma grade, temos que começar pelo canto superior esquerdo. Sempre sabemos que as coordenadas do canto superior esquerdo do Canvas são (0, 0). do intervalo é GAP_WIDTH, podemos obter o (i, j)ésimo As coordenadas do canto superior esquerdo da grade (i*(GRID_WIDTH+GAP_WIDTH)+GAP_WIDTH, j*(GRID_WIDTH+GAP_WIDTH)+GAP_WIDTH) .
Suponha que o corpo da cobra seja composto por três grades azuis. Não podemos desenhar apenas três grades, mas também duas lacunas roxas. Caso contrário, como mencionado antes, você não saberá como é o corpo da cobra. Conforme mostrado na imagem abaixo, embora possa ser jogado sem deixar lacunas, a experiência com certeza será diferente.
Desenhe lacunas entre grades adjacentes sem desenhar lacunas
Agora podemos tentar desenhar uma cobra. O corpo da cobra é na verdade uma coleção de grades. Cada grade é representada por uma matriz contendo duas informações de posição. A cobra inteira pode ser representada por uma matriz bidimensional.
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>blog_snack</title> <style> #canvas { background-color: #000 } </style></; head><body> <canvas id=canvas></canvas> <script> const GRID_WIDTH = 10 // O comprimento lateral da grade const GAP_WIDTH = 10; 2; // O comprimento lateral da lacuna const ROW = 10; // Quantas linhas de grades existem no total e quantas grades existem em cada linha let canvas = document.getElementById('canvas'); =GRID_WIDTH * LINHA + GAP_WIDTH * (LINHA + 1); = canvas.getContext('2d'); deixe lanche = [ [2, 3], [2, 4], [2, 5], [3, 5], [4, 5], [4, 4], [5, 4], [5, 5] ]; // Inicializa um