Quiero trabajar este código simple en gatsby js ( https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls ).
pero la pelota no funcionó. Creo que el uso de useState es incorrecto. pero no puedo encontrar el punto equivocado. ¿Me podría ayudar? Gracias
javascript
import * as React from "react" import {useRef, useEffect, useState} from "react"; import { Container, CanvasBox} from "./style" const MainView = () => { let canvasRef = useRef(null) const [x, setValx] = useState(0); const [y, setValy] = useState(0); useEffect(()=>{ const canvas = canvasRef.current; const context = canvas.getContext('2d'); let ballRadius = 2; let xtemp = canvas.width/2; let ytemp = canvas.height-30; // console.log('xtemp') // console.log(xtemp) // console.log(ytemp) setValx(xtemp); setValy(ytemp); let dx = 2; let dy = -2; function drawBall() { context.beginPath(); context.arc(x, y, ballRadius, 0, Math.PI*2); context.fillStyle = "white"; context.fill(); context.closePath(); } function draw() { context.clearRect(0, 0, canvas.width, canvas.height); drawBall(); if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) { dx = -dx; } if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) { dy = -dy; } // console.log('x') let xtemp = x + dx let ytemp = y + dy; console.log('x') console.log(x) console.log('xtemp') console.log(xtemp) setValx(xtemp); setValy(ytemp); } setInterval(draw, 10); },[x,y]) return( <> <Container> <CanvasBox ref={canvasRef} ></CanvasBox> </Container> </> ) } export default MainViewCSS
import styled from "@emotion/styled" export const Container = styled.div` background-color: black; margin: 0; width: 100vw; height: 100vmax; max-height: 100vh; ` export const CanvasBox = styled.canvas` width: 100%; height: 100%; position: absolute; `Fue tan increíble, pasé un tiempo en él y lo encontré, pero aún no está terminado.
pero tal vez puedas completarlo. Tengo que decir que cuando configura (x, y) no puede esperar que x o y tengan ese valor, entonces los cambio a xtemp o ytemp.
Es trabajo para mí, échale un vistazo:
import * as React from "react" import {useRef, useEffect, useState} from "react"; import {Container, CanvasBox} from "./style" const MainView = () => { let canvasRef = useRef(null) useEffect(() => { const canvas = canvasRef.current; const context = canvas.getContext('2d'); let ballRadius = 2; var xtemp = canvas.width / 2; var ytemp = canvas.height - 30; let dx = 2; let dy = -2; function drawBall() { context.beginPath(); context.arc(xtemp, ytemp, ballRadius, 0, Math.PI * 2); context.fillStyle = "white"; context.fill(); context.closePath(); } function draw() { context.clearRect(0, 0, canvas.width, canvas.height); drawBall(); if (xtemp + dx > canvas.width - ballRadius || xtemp + dx < ballRadius) { dx = -dx; } if (ytemp + dy > canvas.height - ballRadius || ytemp + dy < ballRadius) { dy = -dy; } xtemp = xtemp + dx ytemp = ytemp + dy; } setInterval(draw, 10); }, []) return ( <> <Container> <CanvasBox ref={canvasRef}></CanvasBox> </Container> </> ) } export default MainView