Implementação de detecção básica de colisão para animação Canvas HTML5

Para realizar a detecção de colisão no Canvas, as pessoas geralmente usam diretamente a função integrada de detecção de colisão do mecanismo de jogo (Cocos2d-JS, Egret) ou do mecanismo de física (Box2D). Você já pensou em seus mecanismos operacionais internos? A tecnologia básica de detecção de colisão será explicada abaixo:

A chamada detecção de colisão serve para determinar se há sobreposição entre objetos. Aqui assumimos que os colisores discutidos são todos objetos retangulares. No exemplo a seguir, criaremos dois objetos retos A e B (doravante denominados A, B). A posição de A é fixa e B se move com o mouse. Quando A e B se sobrepõem, o console solicitará a interceção! !

Aqui criamos um novo Rect.js, criamos um objeto Rect e adicionamos um método protótipo draw a ele. Este método desenhará para o objeto canvas de entrada (contexto) com base nas propriedades (posição, tamanho) do objeto atual.

O código é o seguinte:

 function Rect(x,y,largura,altura) { this.x = x; this.y = y; this.width = width; this.height = height;}Rect.prototype.draw = function(context){ contexto. save(); context.translate(this.x,this.y); context.fillRect(0,0,this.width,this.height);

Como B precisa seguir o movimento do mouse, precisamos detectar a posição atual do mouse na tela. Crie uma função Capturemouse para detectar o movimento do mouse no nó do documento recebido (elemento) e retornar um objeto de mouse (que contém as coordenadas x, y do mouse).

O código é o seguinte:

 function Capturemouse (elemento) { var mouse={x:null,y:null}; element.addEventListener('mousemove',function (event) { var x, y; if(event.pageX || event.pageY){ x = evento.páginaX; y = evento.páginaY }else{ x = evento.clientX+document.body.scrollLeft+ document.documentElement.scrollLeft; y = event.clientY+document.body.scrollTop+ document.documentElement.scrollTop; },falso); return mouse;}

Detectar se A e B se sobrepõem Ao discutir se ocorre sobreposição, podemos primeiro observar as quatro situações sem sobreposição, conforme mostrado abaixo:

A seguir está o julgamento desses quatro estados:

1. rectB.y + rectB.height < rectA.y

2. rectB.y > rectA.x + rectA.largura

3. rectB.y > rectA.y + rectA.height

4. rectB.x+rectB.largura < rectA.x

Agora que sabemos como julgar o estado não sobreposto, como julgar o estado sobreposto? Isso mesmo, o oposto! , criamos a função Interaect e a adicionamos ao Init.js. Esta função passa dois parâmetros do objeto Rect e retornará verdadeiro quando os dois objetos Rect se sobrepuserem.

O código é o seguinte:

 function Intersect(rectA,rectB) { return !(rectB.y+rectB.height < rectA.y || rectB.y > rectA.x +rectA.width || rectB.y > rectA.y + rectA.height|| rectB.x+rectB.largura < rectA.x)}

Crie um novo AnimationJS e defina a função de animação requestAnimationFrame().

No corpo do loop, as duas coisas a seguir serão feitas:

• Limpe o conteúdo da tela atual para preparar o desenho do próximo quadro.
• Detecte se A e B se sobrepõem. Se eles se sobrepuserem, a saída interage no console! ! !
• Detecte o movimento atual do mouse na tela e atualize a posição do mouse para a propriedade position de B.
• Redesenhe A e B de acordo com os novos atributos de posição (é claro, a posição de A não será atualizada, mas precisa ser redesenhada porque a tela será limpa cada vez que fizer um loop)

O código é o seguinte:

 função drawAnimation() { window.requestAnimationFrame(drawAnimation); context.clearRect(0, 0, canvas.width, canvas.height); ); } if(mouse.x){ rectB.x = mouse.x; rectB.draw(contexto);}

3. Inicialização

Crie um novo Init.js, obtenha o elemento canvas e vincule a detecção de movimento do mouse, inicialize os objetos Rect A e B e, finalmente, inicie o loop de animação.

O código é o seguinte:

 window.onload = function () { canvas = document.getElementById('collCanvas'); contexto = canvas.getContext('2d'); 2.100.100); rectB = novo Rect(100.100.100.100); desenharAnimação();}

Depois de falar sobre colisão retangular, vamos falar sobre colisão circular. Da mesma forma, criaremos dois objetos circulares A e B (doravante denominados A, B). A posição de A é fixa e B segue o movimento do mouse. Sobreposição B, o console Intercect será solicitado! !

 function Circle(x,y,radius) { this.x = x; this.radius = radius;}Circle.prototype.draw = function(context){ context.save() context.translate(; this.x,this.y); context.beginPath() context.arc(0,0,this.radius,0,Math.PI*2,false); contexto.restore();}

A detecção de colisão entre círculos pode ser avaliada simplesmente comparando a distância entre os centros dos dois círculos com a soma dos raios dos dois círculos. Quando a distância entre os centros dos dois círculos é menor que a soma dos raios dos dois círculos. dois círculos, ocorre uma colisão.

Conforme mostrado abaixo:

Então a primeira coisa que precisamos fazer é calcular a distância entre os centros dos dois círculos. Aqui usaremos a fórmula da distância entre dois pontos, como segue:

Quando a distância entre os centros de dois círculos for obtida, ela será comparada com a soma dos raios dos dois círculos. Se a distância for menor que a soma dos raios, será retornado verdadeiro.

Agora atualizamos a função Interaect.

O código é o seguinte:

 função Interseção (círculoA, círculoB) { var dx = círculoA.x-círculoB.x; var dy = círculoA.y-círculoB.y distância = Math.sqrt(dx*dx+dy*dy); círculoA.raio + círculoB.raio);}

Atualize Animation.js, aqui substituímos o objeto Rect por um objeto Circle.

O código é o seguinte:

 function drawAnimation() { window.requestAnimationFrame(drawAnimation); context.clearRect(0, 0, canvas.width, canvas.height); ); } if(mouse.x){ círculoB.x = mouse.x; círculoB.y = mouse.y; círculoB.draw(contexto);}

Atualize Init.js, inicialize os objetos Circle A e B e, finalmente, inicie o loop de animação.

O código é o seguinte:

 window.onload = function () { canvas = document.getElementById('collCanvas'); contexto = canvas.getContext('2d'); 2.100); círculoB = new Círculo(100.100.100); desenharAnimação();}

As explicações anteriores são sobre detecção de colisão entre formas únicas. A seguir, detectaremos colisões entre retângulos e círculos.

1. Detectar colisão

Tal como acontece com a detecção de retângulo, vamos primeiro examinar as quatro situações em que não ocorre colisão.

Conforme mostrado abaixo:

A seguir está o julgamento desses quatro estados:

• Círculo.y + Círculo.raio <Ret.y
• Círculo.x - Círculo.raio > Rect.x + Rect.largura
• Círculo.y - Círculo.raio > Rect.y + Rect.height
• Círculo.x + Círculo.raio < Rect.x

Atualize a função Interaect, inverta o estado não sobreposto e passe o objeto Rect e o objeto Circle para a função. Quando o objeto Rect e o objeto Circle se sobrepõem, true será retornado.

O código é o seguinte:

 function Intersect(Rect,Circle) { return !(Circle.y + Circle.radius < Rect.y || Circle.x - Circle.radius > Rect.x + Rect.width || Circle.y - Circle.radius > Rect .y + Altura Ret. || Círculo.x + Raio.Círculo <Ret.x)}

Atualize Animation.js, aqui seguimos o objeto círculo até o movimento do mouse e detectamos a colisão com o objeto reto de posição fixa.

O código é o seguinte:

 função drawAnimation() { window.requestAnimationFrame(drawAnimation); context.clearRect(0, 0, canvas.width, canvas.height); ); } if(mouse.x){ círculo.x = mouse.x; círculo.y = mouse.y;

Atualize Init.js, inicialize o objeto Circle e o objeto Rect e, finalmente, inicie o loop de animação.

O código é o seguinte:

 window.onload = function () { canvas = document.getElementById('collCanvas'); contexto = canvas.getContext('2d'); largura/2,canvas.height/2.100.100); drawAnimation();}

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.