AI game creator

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

No:12970

←

Prev Next

→

Super Mario bros
Developer User5663｜Date and time 23/8/25 15:21:35
Build time 20.753 sec｜Game capacity 2.171KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

<!DOCTYPE html>
<html>
<head>
<title>Super Mario Bros</title>
<style>
canvas {
  border: 1px solid black;
  display: block;
  margin: 0 auto;
}
</style>
</head>
<body>
<script>
// Juego Super Mario Bros

// Inicialización
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
canvas.width = 800;
canvas.height = 600;
document.body.appendChild(canvas);

// Definición de los pictogramas
let marioImg = new Image();
marioImg.src = "ruta/de/la/imagen/mario.png";

let goombaImg = new Image();
goombaImg.src = "ruta/de/la/imagen/goomba.png";

// Datos del juego
let mario = {
  x: 0,
  y: 0,
  width: 48,
  height: 64,
  speed: 5
};

let goomba = {
  x: canvas.width - 64,
  y: canvas.height - 64,
  width: 64,
  height: 64,
  speed: 3
};

let isGameOver = false;

// Función para mostrar los pictogramas en el canvas
function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  if (!isGameOver) {
    ctx.drawImage(marioImg, mario.x, mario.y, mario.width, mario.height);
    ctx.drawImage(goombaImg, goomba.x, goomba.y, goomba.width, goomba.height);
  } else {
    ctx.font = "30px Arial";
    ctx.fillText("Game Over", canvas.width/2 - 80, canvas.height/2);
  }
}

// Función para mover a Mario
function moveMario(event) {
  switch(event.keyCode) {
    case 37: // Tecla de flecha izquierda
      mario.x -= mario.speed;
      break;
    case 39: // Tecla de flecha derecha
      mario.x += mario.speed;
      break;
  }
}

// Función para comprobar la colisión entre Mario y Goomba
function checkCollision() {
  if (mario.x < goomba.x + goomba.width &&
      mario.x + mario.width > goomba.x &&
      mario.y < goomba.y + goomba.height &&
      mario.y + mario.height > goomba.y) {
    isGameOver = true;
  }
}

// Función principal del juego
function gameLoop() {
  draw();
  checkCollision();
  
  if (!isGameOver) {
    requestAnimationFrame(gameLoop);
  }
}

// Inicia el juego
gameLoop();

// Escucha los eventos de teclado para mover a Mario
document.addEventListener("keydown", moveMario);
</script>
</body>
</html>