Crear juego de guerra con personajes 3d's game

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

No:27060

←

Prev Next

→

Crear juego de guerra con personajes 3d
Developer User13377｜Date and time 23/12/4 1:09:36
Build time 55.728 sec｜Game capacity 3.028KB｜

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 Guerra 3D</title>
  <style>
    #game-container {
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      position: relative;
    }

#game-wrapper {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

#canvas {
      width: 800px;
      height: 600px;
      border: 2px solid black;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <div id="game-wrapper">
      <canvas id="canvas"></canvas>
    </div>
  </div>

// Definir las dimensiones del juego
    const width = canvas.width;
    const height = canvas.height;

// Definir los personajes del juego
    const player = {
      x: width / 2,
      y: height / 2,
      size: 50,
      color: "blue",
      speed: 5
    };

const enemy = {
      x: Math.random() * width,
      y: Math.random() * height,
      size: 50,
      color: "red",
      speed: 2
    };

// Detectar los controles de movimiento del jugador
    document.addEventListener("keydown", movePlayer);

function movePlayer(event) {
      switch (event.keyCode) {
        case 37: // Flecha izquierda
          player.x -= player.speed;
          break;
        case 38: // Flecha arriba
          player.y -= player.speed;
          break;
        case 39: // Flecha derecha
          player.x += player.speed;
          break;
        case 40: // Flecha abajo
          player.y += player.speed;
          break;
      }
    }

// Actualizar el estado del juego y redibujar
    function update() {
      // Mover al enemigo hacia el jugador
      if (enemy.x < player.x) {
        enemy.x += enemy.speed;
      } else {
        enemy.x -= enemy.speed;
      }

if (enemy.y < player.y) {
        enemy.y += enemy.speed;
      } else {
        enemy.y -= enemy.speed;
      }

// Detectar colisión entre el jugador y el enemigo
      if (
        player.x < enemy.x + enemy.size &&
        player.x + player.size > enemy.x &&
        player.y < enemy.y + enemy.size &&
        player.y + player.size > enemy.y
      ) {
        alert("¡Has perdido!");
        reset();
      }

// Dibujar los personajes en el lienzo
      ctx.clearRect(0, 0, width, height);

ctx.fillStyle = player.color;
      ctx.fillRect(player.x, player.y, player.size, player.size);

ctx.fillStyle = enemy.color;
      ctx.fillRect(enemy.x, enemy.y, enemy.size, enemy.size);

// Repetir la función update aproximadamente 60 veces por segundo
      requestAnimationFrame(update);
    }

// Resetear la posición del enemigo y del jugador
    function reset() {
      player.x = width / 2;
      player.y = height / 2;

enemy.x = Math.random() * width;
      enemy.y = Math.random() * height;
    }

// Iniciar el juego
    update();
  </script>
</body>
</html>