EncodeTheCode/rpg_game_2d_v2.htm

## rpg_game_2d_v2.htm
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>RPG Game</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    #game-container {
      position: relative;
      width: 100vw;
      height: 100vh;
      background-color: #f0f0f0;
    }

    .character {
      position: absolute;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: grey;
    }

    #player {
      background-color: blue;
      left: 50px;
      top: 50px;
    }

    #enemy {
      background-color: red;
      right: 50px;
      bottom: 50px;
    }

    .sword {
      position: absolute;
      width: 20px;
      height: 70px;
      background-color: grey;
      top: -20px;
      left: 50%;
      transform: translateX(-50%);
    }
  </style>
</head>
<body>
  <div id="game-container">
    <div id="player" class="character"></div>
    <div id="enemy" class="character"></div>
  </div>

  <script>
    class Character {
      constructor(name, strength, agility, criticalStrikeChance, criticalStrikeBonus, dodge) {
        this.name = name;
        this.strength = strength;
        this.agility = agility;
        this.criticalStrikeChance = criticalStrikeChance;
        this.criticalStrikeBonus = criticalStrikeBonus;
        this.dodge = dodge;
        this.health = 100; // Starting health
      }

      attack(target) {
        const criticalChance = Math.random();
        const isCritical = criticalChance <= this.criticalStrikeChance;

        const dodgeChance = Math.random();
        const isDodged = dodgeChance <= target.dodge;

        if (isDodged) {
          console.log(`${target.name} dodged the attack!`);
          return;
        }

        let damage = this.strength;

        if (isCritical) {
          const criticalBonus = Math.floor(Math.random() * this.criticalStrikeBonus) + 1;
          damage += criticalBonus;
          console.log(`Critical strike! ${target.name} takes ${damage} damage.`);
        } else {
          console.log(`${this.name} attacks ${target.name} for ${damage} damage.`);
        }

        target.health -= damage;
        console.log(`${target.name}'s health: ${target.health}`);
      }
    }

    document.addEventListener("DOMContentLoaded", function() {
      const player = new Character("Player", 10, 8, 0.2, 5, 0.1);
      const enemy = new Character("Enemy", 8, 6, 0.1, 3, 0.2);

      const playerDiv = document.getElementById("player");
      const enemyDiv = document.getElementById("enemy");

      const sword = document.createElement("div");
      sword.classList.add("sword");
      playerDiv.appendChild(sword);

      let enemyHealth = enemy.health;

      playerDiv.addEventListener("keydown", function(event) {
        if (event.key === "w" || event.key === "W") {
          playerDiv.style.top = `${parseInt(playerDiv.style.top) - 10}px`;
        } else if (event.key === "a" || event.key === "A") {
          playerDiv.style.left = `${parseInt(playerDiv.style.left) - 10}px`;
        } else if (event.key === "s" || event.key === "S") {
          playerDiv.style.top = `${parseInt(playerDiv.style.top) + 10}px`;
        } else if (event.key === "d" || event.key === "D") {
          playerDiv.style.left = `${parseInt(playerDiv.style.left) + 10}px`;
        } else if (event.code === "Space") {
          const enemyRect = enemyDiv.getBoundingClientRect();
          const playerRect = playerDiv.getBoundingClientRect();
          if (isColliding(enemyRect, playerRect)) {
            player.attack(enemy);
            if (enemy.health <= 0) {
              enemyDiv.style.display = "none";
              alert("You defeated the enemy!");
            } else {
              enemy.attack(player);
              if (player.health <= 0) {
                alert("You were defeated by the enemy!");
              }
            }
          }
        }
      });

      function isColliding(rect1, rect2) {
        return !(
          rect1.top > rect2.bottom ||
          rect1.right < rect2.left ||
          rect1.bottom < rect2.top ||
          rect1.left > rect2.right
        );
      }
    });
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>RPG Game</title>
	<style>
	body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	}

	#game-container {
	position: relative;
	width: 100vw;
	height: 100vh;
	background-color: #f0f0f0;
	}

	.character {
	position: absolute;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: grey;
	}

	#player {
	background-color: blue;
	left: 50px;
	top: 50px;
	}

	#enemy {
	background-color: red;
	right: 50px;
	bottom: 50px;
	}

	.sword {
	position: absolute;
	width: 20px;
	height: 70px;
	background-color: grey;
	top: -20px;
	left: 50%;
	transform: translateX(-50%);
	}
	</style>
	</head>
	<body>
	<div id="game-container">
	<div id="player" class="character"></div>
	<div id="enemy" class="character"></div>
	</div>

	<script>
	class Character {
	constructor(name, strength, agility, criticalStrikeChance, criticalStrikeBonus, dodge) {
	this.name = name;
	this.strength = strength;
	this.agility = agility;
	this.criticalStrikeChance = criticalStrikeChance;
	this.criticalStrikeBonus = criticalStrikeBonus;
	this.dodge = dodge;
	this.health = 100; // Starting health
	}

	attack(target) {
	const criticalChance = Math.random();
	const isCritical = criticalChance <= this.criticalStrikeChance;

	const dodgeChance = Math.random();
	const isDodged = dodgeChance <= target.dodge;

	if (isDodged) {
	console.log(`${target.name} dodged the attack!`);
	return;
	}

	let damage = this.strength;

	if (isCritical) {
	const criticalBonus = Math.floor(Math.random() * this.criticalStrikeBonus) + 1;
	damage += criticalBonus;
	console.log(`Critical strike! ${target.name} takes ${damage} damage.`);
	} else {
	console.log(`${this.name} attacks ${target.name} for ${damage} damage.`);
	}

	target.health -= damage;
	console.log(`${target.name}'s health: ${target.health}`);
	}
	}

	document.addEventListener("DOMContentLoaded", function() {
	const player = new Character("Player", 10, 8, 0.2, 5, 0.1);
	const enemy = new Character("Enemy", 8, 6, 0.1, 3, 0.2);

	const playerDiv = document.getElementById("player");
	const enemyDiv = document.getElementById("enemy");

	const sword = document.createElement("div");
	sword.classList.add("sword");
	playerDiv.appendChild(sword);

	let enemyHealth = enemy.health;

	playerDiv.addEventListener("keydown", function(event) {
	if (event.key === "w" \|\| event.key === "W") {
	playerDiv.style.top = `${parseInt(playerDiv.style.top) - 10}px`;
	} else if (event.key === "a" \|\| event.key === "A") {
	playerDiv.style.left = `${parseInt(playerDiv.style.left) - 10}px`;
	} else if (event.key === "s" \|\| event.key === "S") {
	playerDiv.style.top = `${parseInt(playerDiv.style.top) + 10}px`;
	} else if (event.key === "d" \|\| event.key === "D") {
	playerDiv.style.left = `${parseInt(playerDiv.style.left) + 10}px`;
	} else if (event.code === "Space") {
	const enemyRect = enemyDiv.getBoundingClientRect();
	const playerRect = playerDiv.getBoundingClientRect();
	if (isColliding(enemyRect, playerRect)) {
	player.attack(enemy);
	if (enemy.health <= 0) {
	enemyDiv.style.display = "none";
	alert("You defeated the enemy!");
	} else {
	enemy.attack(player);
	if (player.health <= 0) {
	alert("You were defeated by the enemy!");
	}
	}
	}
	}
	});

	function isColliding(rect1, rect2) {
	return !(
	rect1.top > rect2.bottom \|\|
	rect1.right < rect2.left \|\|
	rect1.bottom < rect2.top \|\|
	rect1.left > rect2.right
	);
	}
	});
	</script>
	</body>
	</html>