Verán, estoy haciendo un experimento para hacer un juego platformer para dispositivos móviles con Javascript. El código no es perfecto pero funciona bien, hasta que te mueves en el aire, ya que esto causa que el cubo se quede pegado por unos segundos sin hacer nada. Aquí está el código completo.
var x_minus;
var x_plus;
var gravity = 3;
let screen = document.querySelector("canvas");
let display = screen.getContext("2d");
display.fillStyle = "blue";
display.fillRect(0, screen.height - 30, 30, 30);
const play = {
y: screen.height - 30,
x: 0,
s: 30,
repaint: function () {
display.clearRect(0, 0, screen.width, screen.height);
display.fillRect(this.x, this.y, this.s, this.s);
}
};
setInterval(function () {
if (play.y + play.s < screen.height) {
play.y += gravity;
play.repaint();
}
}, 20);
function moveLeft() {
if (play.x > 0) {
play.x -= 5;
play.repaint();
}
}
function moveRight() {
if (play.x + play.s < screen.width) {
play.x += 5;
play.repaint();
}
}
function doJump() {
if (play.y + play.s >= screen.height) {
var impulse = gravity * 5;
var y = setInterval(function () {
if (impulse <= 0) {
clearInterval(y);
}
else {
play.y -= impulse;
impulse--;
play.repaint();
}
}, 20);
}
}
<!DOCTYPE html>
<html>
<style>
body { background-color: slateblue; margin-bottom: 0; }
canvas { width: 100%; border: 2px solid black; background-color: lightgray; height:90% }
* { text-align: center; user-select: none; }
button { padding: 20px 59px; background-color: tomato; }
</style>
<body>
<canvas></canvas>
<button id="left" ontouchstart="x_minus = setInterval(moveLeft, 30)" ontouchend="clearInterval(x_minus)"> LEFT </button>
<button id="jump" onclick="doJump()"> JUMP </button>
<button id="right" ontouchstart="x_plus = setInterval(moveRight, 30)" ontouchend="clearInterval(x_plus)"> RIGHT </button>
</body>
</html>
He probado varias cosas, cómo modificar el código de los botones.
Tal vez podría ser el script de caída, pero no tiene sentido. Así que solo me podrían decir la solución