Estoy creando un juego en el que usas las teclas de flecha para moverte hacia la izquierda, hacia la derecha, saltar y rodar.
Mi HTML está debajo hasta ahora, muy vacío debido a lo atascado que estoy. Todavía no he encontrado una imagen, pero pondré ese asunto en mis propias manos una vez que termine con esto .
html { background: url("Game_city.png") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } img { background-color: transparent; } #imgcole { position: absolute; bottom: opx; height: 100px; } <center> <span id="pos"></span> <img id="imgcole" src="" alt="cole" style:width="300px" , height="300px"> </center>Encontré una manera de hacer esto con un cuadrado dibujado con el elemento canvas ( https://www.w3schools.com/graphics/tryit.asp?filename=trygame_controllers_keys ) pero como no sé javascript, no pude descubra cómo cambiar el código de acuerdo con mi código. El enlace del sitio web real que estoy codificando está aquí, presione el botón de reproducción, luego elija al tipo con el martillo: https://ninjago-game-of-masks.ayushgudipati.repl.co/
No estoy exactamente seguro de lo que estoy haciendo, recién comencé a aprender a codificar y solo tengo 13 años. Cualquier sugerencia es útil, ¡gracias!
No estoy seguro exactamente de cómo está tratando de hacer esto, supongo que aún no ha intentado implementar el movimiento. Pero si está tratando de evitar los marcos, le sugiero que use eventos de JavaScript:
https://www.w3schools.com/js/js_events.asp
Esta es una forma de obtener información del usuario y hacer que manipule dinámicamente el DOM (cambiar cosas en su programa como mover una imagen). Esta no es una solución completa sobre cómo implementar esto, sino más bien un impulso en la dirección correcta. Si solo desea crear un juego, usar un marco de Javascript como p5.js lo hace mucho más fácil. Si desea obtener información sobre Coding Train en youtube: https://www.youtube.com/watch?v=HerCR8bw_GE&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA tiene muchos tutoriales sobre este tipo de cosas.
Puede probar esto, según su vista de código, y obtendrá el resultado, e intente usar una imagen más grande, como 1920 * 1080, o algo como esto, para que se cubra toda la página.
body { padding: 0px 30px 0px 30px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-image: url("bg2.jpg"); background-repeat: no-repeat; background-size: cover; }