estoy tratando de hacer un juego de lienzo simple en jquery,
Básicamente, tengo un bucle infinito que atrae constantemente al jugador y al fondo:
loop = () => { $('#player').css("transform", "rotateX("+xr+"deg) rotateY("+yr+"deg)"); ctx.fillStyle = 'gray'; ctx.fillRect(0,0,400,400); ctx.drawImage(player, x, y, 50, 50); window.setTimeout(loop, 1); }Y luego tengo una declaración de cambio que altera el XR y el YR del jugador cuando presionan los botones A y D:
$(document).ready(()=>{ loop(); $(document).bind('keydown',(e)=>{ switch(e.keyCode){ case 65: //moving left (altering the xr and yr values) break; case 87: //moving up (altering the y and x values based on SIN and COS and player's XR and YR) break; etc... } }); });Puedo decir que está detectando las pulsaciones de teclas, porque cuando ejecuto CONSOLE.LOG() en la declaración de cambio, imprime algo en la consola,
claramente, este es un problema con las imágenes dibujadas en un lienzo que no mantienen su estilo css.
si alguien puede descubrir cómo mantener el css de una imagen al dibujarla en un lienzo, o modificar el dibujo de una imagen en el css de un lienzo, sería genial.
y no, no encontré ninguna respuesta en ningún otro lugar. esta pregunta no parece haber sido hecha todavía.
EDITAR: xr y yr son variables XROTATION y YROTATION.
aparentemente, las imágenes no mantienen su css en los lienzos, y no hay forma de agregar esto. no importa, supongo que intentaré otra cosa.
No necesita CSS, puede hacer todo con Canvas, tiene métodos de traducción y rotación . Aquí un ejemplo muy básico:
const ctx = canvas.getContext("2d"); const { width: w, height: h } = canvas; let x = (w - 50) >> 1, y = (h - 50) >> 1; let angle = 0; const Keys = { pressed: {}, handleEvent({type, code}) { this.pressed[code] = type === "keydown" } } document.addEventListener("keydown", Keys); document.addEventListener("keyup", Keys); function update() { if (Keys.pressed["ArrowLeft"]) { --angle; } if (Keys.pressed["ArrowRight"]) { ++angle; } } function draw() { ctx.fillStyle = "black"; ctx.fillRect(0, 0, w, h); ctx.translate(x + 25, y + 25); ctx.rotate(angle * Math.PI / 180 ); ctx.drawImage(player, -25, -25, 50, 50); ctx.setTransform(1, 0, 0, 1, 0, 0); } let player = new Image(); player.src = "https://1.bp.blogspot.com/-ddkcnhuU07g/Vllq4DNohkI/AAAAAAAACHo/p8d9SZxOy-w/s1600/mship1.png"; requestAnimationFrame(function render() { update(); draw(); requestAnimationFrame(render); }) <canvas id="canvas" width="320" height="240"></canvas>