Corentin Chepeau

Creating a Pokemon-Inspired Game with Graphics and Animations

The world of gaming has always been a space where creativity and imagination come together to create captivating experiences. One such experience is the Pokemon-inspired game we’re about to delve into, complete with graphics, animations, and a dynamic battle system. In this blog post, we’ll take a closer look at the code that powers this game and explore how it all comes together to deliver an engaging gaming experience.

Introduction

The Pokemon franchise has captured the hearts of millions with its charming creatures and exciting battles. Our game draws inspiration from this beloved series and allows players to engage in thrilling creature battles with graphics and animations. Let’s break down the different components that make up this game.

HTML and CSS: Setting the Stage

The foundation of any web-based game is the HTML and CSS structure. The game interface is designed with a focus on the battle area, where two creatures face off. The use of CSS Flexbox ensures proper alignment and spacing, creating an appealing visual layout.

<!DOCTYPE html>
<html>
<head>
  <title>Pokemon-like Game with Graphics and Animations</title>
  <style>
    /* CSS styles */
  </style>
</head>
<body>
  <!-- Game interface -->
</body>
</html>

Meet the Creatures

Two creatures take center stage in our game: Pikachu and Charmander. Each creature is represented by an image and accompanied by a display of their current level and health points (HP). The game mechanics include the ability for creatures to level up as they battle and take damage from each other.

<!-- Inside the body tag -->
<div id="battle-container">
  <div class="creature" id="pikachu">
    <img src="pikachu.png" alt="Pikachu">
    <div id="pikachu-info">Pikachu: Level 1, HP: 50</div>
  </div>
  <!-- Battle log will be displayed here -->
  <div class="creature" id="charmander">
    <img src="charmander.png" alt="Charmander">
    <div id="charmander-info">Charmander: Level 1, HP: 40</div>
  </div>
</div>
<button id="start-button">Start Battle</button>
<button id="replay-button" style="display: none;">Replay</button>

Abilities for Strategy

Abilities add an element of strategy to the battles. Each creature possesses a unique ability that can influence the outcome of the battle. These abilities are defined in the JavaScript code and can modify the damage dealt to the opponent.

class Ability {
  constructor(name, damageModifier) {
    this.name = name;
    this.damageModifier = damageModifier;
  }
}

The JavaScript Engine

The heart of our game lies in the JavaScript code that governs the battle system and animations. Here’s a breakdown of the key functionalities:

  1. Creature and Ability Classes: The Creature class is responsible for creating creature instances with attributes such as name, health, attack, and abilities. Abilities are defined as a separate class, allowing for expandable and customizable abilities in the future.
  2. Battle Logic: The battle function simulates a battle between two creatures. It incorporates animations to create a dynamic and engaging experience. Creatures take turns attacking each other, either using their abilities or a standard attack. Damage calculations and health adjustments are handled here.
  3. Leveling Up: When a creature defeats its opponent, it gains experience points and levels up. This not only enhances the creature’s attributes but also displays a level-up message in the battle log.
  4. Animation: Animations play a crucial role in making battles visually appealing. The animateAttack function adds movement to the attacking creature, creating a sense of action and impact.
  5. Battle Log: The battle log displays a running commentary of the battle’s progression. It provides real-time updates on actions taken by each creature, making the battle feel immersive.
  6. Game Loop: The gameLoop function orchestrates the battles between Pikachu and Charmander. It continues until one of the creatures is defeated, and a victory message is displayed.
class Creature {
  // Creature class definition
}

// Abilities definition
const abilities = [
  new Ability("Electric Shock", 1.2),
  new Ability("Fire Blast", 1.5),
  new Ability("Water Jet", 0.8)
];

// Pikachu and Charmander instances
const pikachu = new Creature("Pikachu", 50, 15, [abilities[0]]);
const charmander = new Creature("Charmander", 40, 20, [abilities[1]]);

// Battle function
function battle(attacker, defender) {
  // Battle logic
}

// Game loop
function gameLoop() {
  // Game loop logic
}

// Event listeners for buttons
const startButton = document.getElementById("start-button");
const replayButton = document.getElementById("replay-button");

startButton.addEventListener("click", () => {
  gameLoop();
  startButton.disabled = true;
});

replayButton.addEventListener("click", () => {
  // Replay logic
});

Bringing It All Together

With HTML, CSS, and JavaScript working in harmony, our Pokemon-inspired game comes to life. Players can click the « Start Battle » button to initiate the game loop, which simulates battles between Pikachu and Charmander. The battle log keeps players informed about the ongoing action, and animations add a dynamic touch to the experience.

<!DOCTYPE html>
<html>
<head>
  <title>Pokemon-like Game with Graphics and Animations</title>
  <style>
    #battle-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 20px;
    }

    .creature {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .creature img {
      width: 100px;
      height: 100px;
    }

    #battle-log {
      width: 450px;
      height: 350px;
      border: 1px solid black;
      overflow: auto;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <div id="battle-container">
    <div class="creature" id="pikachu">
      <img src="data:image/png;base64,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" alt="Pikachu">
      <div id="pikachu-info">Pikachu: Level 1, HP: 50</div>
    </div>
    <div id="battle-log"></div>
    <div class="creature" id="charmander">
      <img src="data:image/png;base64,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" alt="Charmander">
      <div id="charmander-info">Charmander: Level 1, HP: 40</div>
    </div>
  </div>
  <button id="start-button">Start Battle</button>
  <button id="replay-button" style="display: none;">Replay</button>

  <script>
    class Ability {
      constructor(name, damageModifier) {
        this.name = name;
        this.damageModifier = damageModifier;
      }
    }

    class Creature {
      constructor(name, health, attack, abilities = []) {
        this.name = name;
        this.health = health;
        this.attack = attack;
        this.level = 1;
        this.abilities = abilities;
      }

      levelUp() {
        this.level++;
        this.attack += 5;
        this.health += 10;
      }

      takeDamage(damage) {
        this.health -= damage;
      }

      isDefeated() {
        return this.health <= 0;
      }

      // Reset creature's health
      resetHealth() {
        this.health = this.maxHealth;
        updateCreatureInfo(this);
      }

      useAbility(target) {
        if (this.abilities.length > 0) {
          const randomAbility = this.abilities[Math.floor(Math.random() * this.abilities.length)];
          const modifiedDamage = this.attack * randomAbility.damageModifier;
          target.takeDamage(modifiedDamage);
          addToBattleLog(`${this.name} uses ${randomAbility.name} on ${target.name}!`);
        }
      }

      animateAttack() {
        addToBattleLog(`${this.name} is attacking...`);
        const attackerElement = document.getElementById(this.name.toLowerCase());
        attackerElement.style.transform = 'translateX(100px)';
        setTimeout(() => {
          attackerElement.style.transform = 'translateX(0)';
          addToBattleLog(`${this.name} attack animation finished.`);
        }, 300);
      }
    }

    const abilities = [
      new Ability("Electric Shock", 1.2),
      new Ability("Fire Blast", 1.5),
      new Ability("Water Jet", 0.8)
    ];

    const pikachu = new Creature("Pikachu", 50, 15, [abilities[0]]);
    const charmander = new Creature("Charmander", 40, 20, [abilities[1]]);

    function battle(attacker, defender) {
      addToBattleLog(`--- ${attacker.name} is attacking ${defender.name} ---`);
      attacker.animateAttack();

      if (Math.random() < 0.8) {
        attacker.useAbility(defender);
      } else {
        defender.takeDamage(attacker.attack);
        addToBattleLog(`${defender.name} takes ${attacker.attack} damage!`);
      }

      updateCreatureInfo(attacker);
      updateCreatureInfo(defender);

      if (defender.isDefeated()) {
        addToBattleLog(`${defender.name} is defeated!`);
        attacker.levelUp();
        addToBattleLog(`${attacker.name} leveled up to level ${attacker.level}!`);
      } else {
        addToBattleLog(`${defender.name} has ${defender.health} HP left.`);
      }

      checkEndOfBattle();
    }

    function checkEndOfBattle() {
      if (pikachu.isDefeated() || charmander.isDefeated()) {
        addToBattleLog("The battle has ended.");
        document.getElementById("replay-button").style.display = "block";
      }
    }

    function gameLoop() {
      addToBattleLog("Starting the battle...");
      while (!pikachu.isDefeated() && !charmander.isDefeated()) {
        const randomCreature = Math.random() < 0.5 ? pikachu : charmander;
        const otherCreature = randomCreature === pikachu ? charmander : pikachu;
        
        battle(randomCreature, otherCreature);
      }

      if (pikachu.isDefeated()) {
        addToBattleLog(`${pikachu.name} has been defeated.`);
      } else {
        addToBattleLog(`${charmander.name} has been defeated.`);
      }
    }

    function updateCreatureInfo(creature) {
      const creatureInfo = document.getElementById(`${creature.name.toLowerCase()}-info`);
      creatureInfo.textContent = `${creature.name}: Level ${creature.level}, HP: ${creature.health}`;
    }

    function addToBattleLog(message) {
      console.log(message);

      const battleLog = document.getElementById("battle-log");
      battleLog.innerHTML += `<p>${message}</p>`;
      battleLog.scrollTop = battleLog.scrollHeight;
    }

    const startButton = document.getElementById("start-button");
    const replayButton = document.getElementById("replay-button");

    startButton.addEventListener("click", () => {
      gameLoop();
      startButton.disabled = true;
    });

    replayButton.addEventListener("click", () => {
      document.getElementById("battle-log").innerHTML = "";
      startButton.disabled = false;
      replayButton.style.display = "none";
      pikachu.resetHealth(); // Reset Pikachu's health
      charmander.resetHealth(); // Reset Charmander's health
    });
  </script>
</body>
</html>

Conclusion

Creating a Pokemon-inspired game with graphics and animations demonstrates the power of web technologies in crafting interactive and entertaining experiences. By combining HTML, CSS, and JavaScript, we’ve built a game that captures the essence of creature battles while adding an extra layer of visual engagement.

Whether you’re a gaming enthusiast or a developer looking to explore the world of interactive web applications, this project serves as a great starting point. You can further expand this game by adding more creatures, abilities, and features to create your own unique gaming experience. Happy coding and gaming!

Publié

dans

par

ccblog

Étiquettes :

Commentaires

Laisser un commentaire