Estoy codificando una tarea en la que tengo que arrastrar un círculo dibujado dentro del lienzo encima de una imagen de queso y cambiar otra imagen de un ratón a ratones celebrando. Intenté agregar un detector de eventos mousemove para detectar el puntero del mouse sobre el círculo y agregar una declaración if para ver si los valores X / Y del puntero del mouse son mayores que los valores X / Y. Quiero hacer esto usando requestAnimationFrame .
canvas.addEventListener("mousemove", setMousePosition, false); function setMousePosition(e) { mouseX = e.clientX - canvasPos.x; mouseY = e.clientY - canvasPos.y; } function update() { context.clearRect(0,0,canvas.width, canvas.height); drawText(); loadCheese(); loadMouse(); drawLine(); context.beginPath(); var x = context.arc(mouseX,mouseY,40,0,2*Math.PI, true); context.fillStyle = "#FF6A6A"; context.fill(); context.stroke(); requestAnimationFrame(update); } Este es mi código base, que esencialmente hace que el círculo siga mi cursor. El controlador de eventos corrige las coordenadas del mouse en relación con mi navegador. update() dibuja todos los elementos necesarios.
Me alegro de que lo hayas encontrado útil.
Esto se hizo demasiado largo para un comentario, así que...
sí, utilice la matriz. no es difícil y tiene sentido si miras lo suficientemente cerca :)
comience con un cuadrado ya que otras formas requieren un poco de matemática adicional si desea que sea perfecto. aunque matemáticas adicionales significan menos rendimiento. por lo tanto, muchos desarrolladores de juegos usan cuadros delimitadores cuadrados/cúbicos/hitboxes para la detección de colisiones.
Ah, y un pequeño consejo: manténgase alejado de los decimales ya que los puntos flotantes son más caros. pero los métodos matemáticos/de redondeo de JS pueden ser peores, por lo que la manipulación de bits funciona muy bien aquí (y también en otros lugares)
aquí hay algo para redondear:
// some quicker math export const bitshift = { // this is for decimals only round_d: d => (d + (d > 0 ? 0.5 : -0.5)) << 0, // and with a multiple we round by the number we pass // to the second argument /** d: domain, m: multiple */ round_m: (d, m = 1) => ((d / m + (d > 0 ? 0.5 : -0.5)) << 0) * m }básicamente, el cambio de bits, si no está familiarizado con él, es mover los 1 y los 0 en una u otra dirección en un byte. al desplazar a la izquierda obtienes la multiplicación por 2 y la división por 2 al desplazar a la derecha, por ejemplo:
0010 is 2 0100 is 4 0001 is 1como puede imaginar, hacer cálculos reales requiere muchos más pasos, e incluso si la manipulación de bits puede ser un poco menos precisa algunas veces debido a cómo funcionan las computadoras. bien vale la pena saberlo.
en cuanto a la detección de colisiones, aquí hay una simple para cuadrados:
if ( rx < x + w && rx + rw > x && ry < y + h && rh + ry > y ) collided!y para algunas lecturas intensas: http://www.jeffreythompson.org/collision-detection/matrix-transformations.php
¡Buena suerte y diviértete! =)