AI game creator

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

No:40168

←

Prev Next

→

Juego de Mario bros
Developer User17930｜Date and time 24/2/1 11:04:31
Build time 9.624 sec｜Game capacity 1.984KB｜

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 Mario Bros</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="800" height="600"></canvas>
  
  <script>
    // Variables del juego
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var marioImg = new Image();
    var marioX = 100;
    var marioY = 100;
    var marioVelX = 0;
    var marioVelY = 0;
    var gravity = 0.5;
    
    // Cargar imágenes
    marioImg.src = 'ruta/imagen/mario.png';
    
    // Eventos de teclado
    document.addEventListener('keydown', function(event) {
      if (event.keyCode === 37) { // Izquierda
        marioVelX = -5;
      }
      else if (event.keyCode === 39) { // Derecha
        marioVelX = 5;
      }
      else if (event.keyCode === 38 && marioY === canvas.height - 50) { // Arriba
        marioVelY = -10;
      }
    });
    
    document.addEventListener('keyup', function(event) {
      if (event.keyCode === 37 || event.keyCode === 39) { // Izquierda o Derecha
        marioVelX = 0;
      }
    });
    
    // Función de actualización del juego
    function update() {
      // Limpiar el canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      // Dibujar Mario
      ctx.drawImage(marioImg, marioX, marioY, 50, 50);
      
      // Actualizar posición de Mario
      marioX += marioVelX;
      marioY += marioVelY;
      
      // Aplicar gravedad
      if (marioY < canvas.height - 50) {
        marioVelY += gravity;
      }
      
      // Detectar colisión con el suelo
      if (marioY > canvas.height - 50) {
        marioY = canvas.height - 50;
        marioVelY = 0;
      }
      
      // Dibujar suelo
      ctx.fillRect(0, canvas.height - 50, canvas.width, 50);
      
      // Llamar a la función de actualización
      requestAnimationFrame(update);
    }
    
    // Iniciar el juego
    update();
  </script>
</body>
</html>