Exemplo de implementação rápida de um jogo simples de labirinto de tela

(Tenho estado um pouco obcecado por padrões de design recentemente e é um pouco chato enfrentar js puro o tempo todo -_-. Então escrevi algo interessante para apimentar isso)

Agora, o canvas não é novo, mas como não é comumente usado nos negócios diários, não há muita prática. Hoje vou compartilhar como implementar um labirinto de canvas simples. Este exemplo vem da segunda edição de "cheats HTML5" e o código foi ligeiramente ajustado.

Como há uma etapa intermediária ao usar o canvas para obter informações de imagem, um ambiente de servidor deve ser usado. Então eu primeiro escrevi uma amostra e joguei no servidor para que todos pudessem experimentar o efeito primeiro (use a sensação de realização como força motriz hahaha)

Clique em mim para experimentar

endereço git

Não é difícil implementar este pequeno jogo. Pensemos nos elementos básicos de um jogo de labirinto.

Primeiro, é claro, deve haver um mapa e depois um vilão em movimento. Usamos cavans para desenhar esses dois;

O próximo é o programa de movimentação de objetos. Este programa inclui principalmente dois aspectos:

1. Deixe o objeto se mover de acordo com as instruções que especificamos;

2. Detecte se o objeto toca a parede ou sai.

Desenhando um mapa do labirinto e figuras em movimento

As principais etapas para desenhar um mapa são:

1. Obtenha uma imagem de um mapa
2. Use cavans para desenhar imagens.

A geração do mapa do labirinto pode ser obtida com a ajuda de um gerador de labirinto online do Google.

O mesmo vale para desenhar um vilão. Basta procurar a imagem de um vilão. Porém, o que você precisa prestar atenção aqui é que você precisa encontrar uma imagem quadrada, porque precisaremos fazer a detecção de colisão móvel mais tarde, e quadrados. são mais fáceis de julgar.

A seguir, escreveremos as principais funções para desenhar labirintos e vilões.

 function drawMaze(mazeFile, StartingX, StartingY) { var imgMaze = new Image() imgMaze.onload = function () { // Ajuste do tamanho da tela canvas.width = imgMaze.width canvas.height = imgMaze.height // Desenha um rosto sorridente var imgFace = document.getElementById(face) context.drawImage(imgMaze, 0, 0) x = startX y = inicialY context.drawImage(imgFace, x, y) context.stroke() } imgMaze.src = mazeFile}

mazeFile é o endereço da imagem do labirinto, StartingX e StartingY são as coordenadas do ponto inicial. Existem duas maneiras de introduzir imagens aqui. A razão é que eu não mudo as imagens do vilão com frequência, então eu as escrevo diretamente na página. O mapa do labirinto deve ser variável, então eu o apresento. js. Se você quiser, não há problema se você importá-lo diretamente usando js. As outras partes são relativamente simples e não serão descritas novamente.

Os principais princípios do movimento são:

Aceite a entrada especificada do usuário (neste caso, responda às teclas de direção) e converta-a em instruções de movimento correspondentes. Em seguida, verifique periodicamente as instruções de movimento e desenhe a posição alvo correspondente. Dê um exemplo simples:

Por exemplo, toda vez que a tecla de direção para cima é pressionada, é registrado que ela deve se mover para cima e, a cada 100 milissegundos, verifica o comando de movimento atual, desenha o local alvo para onde deve se mover e repete esse processo. O código também é relativamente simples:

 // Move a função function processKey(e) { dx = 0 dy = 0 // Detecção das teclas de direção para cima, para baixo, esquerda e direita if (e.keyCode === 38) { dy = -1 } if (e.keyCode = == 40) { dy = 1 } if (e.keyCode === 37) { dx = -1 } if (e.keyCode === 39) { dx = 1 }}// Desenhar função de quadro drawFrame() { if (dx != 0 || dy != 0) { // context.clearRect(x,y,canvas.width,canvas.height) // Desenhar o contexto da trajetória móvel. começarPath(); contexto.fillStyle = rgb(254.244.207) contexto.rect(x, y, 15, 15) contexto.fill() x += dx y += dy // Detecção de colisão if (checkForCollision()) { x -= dx y -= dy dx = 0 dy = 0 } //Desenhe o local para onde o vilão deve se mover var imgFace = document.getElementById( ' face') context.drawImage(imgFace, x, y) if (canvas.height - y < 17) { // isFirst = false alert('Parabéns por completar o jogo') return false } // Se resetado aqui, ele se tornará um movimento não automático, ou seja, cada vez que a tecla de direção for pressionada, ele avançará apenas um passo desde a experiência atual. não é bom, não vamos resetá-lo agora/ / dx = 0 // dy = 0 } setTimeout(drawFrame, 20)}

No código acima, a função de movimento é relativamente simples. A função mais importante para desenhar quadros é a função de detecção de colisão, que é explicada em detalhes a seguir.

Para detectar se um objeto colide com uma parede, geralmente é necessário primeiro salvar as informações do mapa na memória e, em seguida, detectar se ele colide com uma parede atual ao mover o objeto. labirinto branco, podemos usar cores para detectar colisões. O método específico é:

Obtenha a posição coordenada do objeto atual e use o canvas para detectar se a cor desta posição no mapa atual é preta. Nesse caso, é considerado uma parede e o movimento não deve ser executado.

 function checkForCollision() { var imageData = context.getImageData (x - 1, y - 1, 15 + 2, 15 + 2) var pixels = imageData.data for (var i = 0, len = pixels.length; i < len ; i++) { var vermelho = pixels[i], verde = pixels[i + 1] azul = pixels[i + 2] alfa = pixels[i + 3] // Verifica se ele atinge uma parede preta if (red === 0 && green === 0 && blue === 0) { return true } } return false}

Aqui, 15 é a largura do vilão. Detectamos o intervalo de 1px em ambos os lados do vilão (correspondente a getImageData(x - 1, y - 1, 15 + 2, 15 + 2) no código. Você pode pensar nisso. porque é + aqui 2), se for preto, significa que uma colisão foi detectada.

No código, adicionei algumas outras funções, como solicitar respostas, etc. Quanto à alteração do mapa, é relativamente simples: armazene o endereço do arquivo, as coordenadas do ponto inicial, o caminho da imagem de resposta, etc. correspondente ao mapa em um objeto, em seguida, defina uma matriz de mapa, troque o mapa e renderize novamente quando clicado. Ainda existem algumas áreas que valem a pena otimizar, como:

1. A experiência de detecção de colisão é ruim nas curvas;
2. Existem rastros durante a execução na situação atual. Como devo remover os rastros no modo de resposta?

Os alunos interessados ​​​​podem tentar implementá-lo sozinhos.

Este exemplo é relativamente simples e não possui altos requisitos para js. É muito bom brincar com ele.

E ainda é o mesmo final todas as vezes. Se houver algum erro no conteúdo, indique se for útil para você, curta e salve. Por favor, peça permissão antes de reimprimir e indique a fonte. qualquer dúvida, você pode se comunicar via mensagem privada Página inicial Recebi um endereço de e-mail ~ escapou.

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.