Haz un juego de un bloque con una patineta y le podés mover con flechas y hay un piso's game

Click here for free DL of the app version that can save data.

No:35725

177

←

Prev Next

→

Haz un juego de un bloque con una patineta y le p..ALL
Developer User16538｜Date and time 24/1/15 5:26:02
Build time 12.655 sec｜Game capacity 3.172KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
  <title>Juego de Bloque con Patineta</title>
</head>
<body>
  <canvas id="gameCanvas" width="480" height="320"></canvas>

// Definimos las propiedades del bloque
    var blockWidth = 50;
    var blockHeight = 50;
    var blockX = (canvas.width - blockWidth) / 2;
    var blockY = canvas.height - blockHeight;

// Definimos las propiedades de la patineta
    var skateboardWidth = 80;
    var skateboardHeight = 20;
    var skateboardX = (canvas.width - skateboardWidth) / 2;
    var skateboardY = canvas.height - skateboardHeight * 2;

// Definimos las propiedades del piso
    var floorHeight = 30;

// Variables para detectar la entrada del usuario
    var rightPressed = false;
    var leftPressed = false;

// Event listeners para las flechas del teclado
    document.addEventListener("keydown", keyDownHandler, false);
    document.addEventListener("keyup", keyUpHandler, false);

// Funciones para detectar las teclas presionadas por el usuario
    function keyDownHandler(event) {
      if (event.key == "ArrowRight") {
        rightPressed = true;
      } else if (event.key == "ArrowLeft") {
        leftPressed = true;
      }
    }

function keyUpHandler(event) {
      if (event.key == "ArrowRight") {
        rightPressed = false;
      } else if (event.key == "ArrowLeft") {
        leftPressed = false;
      }
    }

// Función para dibujar el bloque
    function drawBlock() {
      ctx.beginPath();
      ctx.rect(blockX, blockY, blockWidth, blockHeight);
      ctx.fillStyle = "#0095DD";
      ctx.fill();
      ctx.closePath();
    }

// Función para dibujar la patineta
    function drawSkateboard() {
      ctx.beginPath();
      ctx.rect(skateboardX, skateboardY, skateboardWidth, skateboardHeight);
      ctx.fillStyle = "#FF0000";
      ctx.fill();
      ctx.closePath();
    }

// Función para dibujar el piso
    function drawFloor() {
      ctx.beginPath();
      ctx.rect(0, canvas.height - floorHeight, canvas.width, floorHeight);
      ctx.fillStyle = "#000000";
      ctx.fill();
      ctx.closePath();
    }

// Función para actualizar la posición del bloque
    function updateBlockPosition() {
      if (rightPressed && blockX < canvas.width - blockWidth) {
        blockX += 5;
      } else if (leftPressed && blockX > 0) {
        blockX -= 5;
      }
    }

// Función principal de dibujo y actualización del juego
    function drawGame() {
      // Limpia el lienzo
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Dibuja el bloque
      drawBlock();

// Dibuja la patineta
      drawSkateboard();

// Dibuja el piso
      drawFloor();

// Actualiza la posición del bloque según las teclas presionadas
      updateBlockPosition();

// Solicita una nueva animación del juego
      requestAnimationFrame(drawGame);
    }

// Inicia el juego llamando a la función principal de dibujo y actualización
    drawGame();
  </script>
</body>
</html>