Learn JavaScript

Web Design
Norbert BM0

In this video we will continue our journey in the javascript language by creating a game using HTML CSS and JS.

In this Series you will learn about:

  • JavaScript Variables let and const
  • JavaScript DOM Document Object model
  • JavaScript DOM Manipulation
  • JavaScript Regular Functions
  • JavaScript Arrow Functions
  • JavaScript Objects
  • JavaScript Conditional Operators
  • JavaScript Logical Operators
  • JavaScript Math.abs()
  • JavaScript Math.floor()
  • JavaScript Math.random()
  • JavaScript if, if else and else
  • JavaScript setTimeout function
  • JavaScript forEach() loop

This video is part of a play list of javascript tutorials

Part-I

imgDownload

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
      integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
      crossorigin="anonymous"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Grenze+Gotisch&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
    <title> </title>
  </head>
  <body>
    <h1 id="Game_Title">Dragon Scale</h1>

    <button id="startGame" class="btn btn-large">START GAME</button>
    <div class="battleground">
      <div id="container_Player-1">
        <h3 id="name_Player-1">Player 1</h3>
        <ul class="player_stats">
          <li>Life: 100hp</li>
          <li>Armor: 20</li>
          <li>Mana: 0</li>
        </ul>
        <div class="player_character">
          <div class="intake">
            <div class="dmg"></div>
            <div class="armor"></div>
            <div class="mana"></div>
            <div class="heal"></div>
          </div>
        </div>
        <div class="actions">
          <button id="Attack" class="btn action">Attack</button>
          <button id="Heal" class="btn action"></button>
          <button id="Defend" class="btn action">Defend</button>
        </div>
      </div>

      <div id="container_Player-2">
        <h3 id="name_Player-2">Player 2</h3>
        <ul class="player_stats">
          <li>Life: 100hp</li>
          <li>Armor: 20</li>
          <li>Mana: 0</li>
        </ul>
        <div class="player_character">
          <div class="intake">
            <div class="dmg"></div>
            <div class="armor"></div>
            <div class="mana"></div>
            <div class="heal"></div>
          </div>
        </div>
        <div class="actions">
          <button id="Attack" class="btn action">Attack</button>
          <button id="Heal" class="btn action"></button>
          <button id="Defend" class="btn action">Defend</button>
        </div>
      </div>
    </div>

    <script src="game.js"></script>
  </body>
</html>

CSS

*,
::before,
::after {
  margin: 0;
  padding: 0;
}
a,
li {
  text-decoration: none;
  list-style: none;
}

body {
  background-image: url(/img/gameTitle.jpg);

  background-size: cover;
  background-repeat: no-repeat;
  background-clip: border-box;
  letter-spacing: 1.8px;
  color: #ffffff;
  font-family: "Grenze Gotisch", cursive;
}
#startGame {
  background-color: rgb(7, 7, 7);
  color: #fff;
  position: relative;
  font-size: 2rem;
  letter-spacing: 3px;
  margin: 10% 40%;
}
.battleground {
  width: 650px;
  margin: auto;
  display: none;
}

JS

// Start Game

const startGameBtn = document.getElementById("startGame");
const body = document.querySelector("body");
const gameTitle = document.getElementById("Game_Title");
console.log(gameTitle);

// Start Btn

startGameBtn.addEventListener("click", () => {
  startGame();
  startGameBtn.style.display = "none";
  gameTitle.innerText = "Battle Ground";
});

function startGame() {
  body.style.backgroundImage = "url(/img/BATTLEGROUND.jpg)";
  document.querySelector(".battleground").style.display = "flex";
}

// End Game

Part-2

In this video we will continue our journey in the javascript language by creating a game using HTML CSS and JS. This video is part of a play list of javascript tutorials :

Code for this Video:

JS

// Set Game Colors

// Damage Colors

let normalDamge = "#ff0039";

// Elementel Colors

// Defensive Colors

let armor = "#f5f5f5";

// -----------End Game Colors----------//

// Player Intakes

// Player 1
const intakesPlayer1 = document.querySelector("#container_Player-1 .intake");
const displayDmgP1 = document.querySelector("#container_Player-1 .dmg");

// Player Body

const plyer1Body = document.getElementById("#container_Player-1");

// Player Stats
const plyer1Stats = document.querySelector("#container_Player-1 .player_stats");

// Player Actions

const attackPlayer1 = document.querySelector("#container_Player-1 #Attack");

// Player Stats

const Player1 = {
  life: 100,
  defence: 20,
  mana: 0,
};

// console.log(Player1.life);

attackPlayer1.addEventListener("click", () => {
  const randAttack = randomAttackDmg();

  displayDmgP2.innerHTML = `-${randAttack}`;
  displayDmgP2.style.color = `${normalDamge}`;
  displayDmgP2.style.display = "block";

  resetDisplayIntakes(displayDmgP2);

  const attackP1 = randAttack;

  Player2.life = Player2.life - attackP1;
});

// ---------Player 1----------//

console.log(plyer1Stats);

// Player 2
const intakesPlayer2 = document.querySelector("#container_Player-2 .intake");
const displayDmgP2 = document.querySelector("#container_Player-2 .dmg");

// Player Body

const plyer2Body = document.getElementById("#container_Player-2");

// Player Stats
const plyer2Stats = document.querySelector("#container_Player-2 .player_stats");

// Player Actions

const attackPlayer2 = document.querySelector("#container_Player-2 #Attack");

// Player Stats

const Player2 = {
  life: 100,
  defence: 20,
  mana: 0,
};

attackPlayer2.addEventListener("click", () => {
  const randAttack = randomAttackDmg();

  displayDmgP2.innerHTML = `-${randAttack}`;
  displayDmgP2.style.color = `${normalDamge}`;
  displayDmgP2.style.display = "block";

  resetDisplayIntakes(displayDmgP2);

  const attackP2 = randAttack;

  Player1.life = Player1.life - attackP2;
});
// Attack Player

// get players attaks

// ----------- Utility functions --------------//

// Attack function

function randomAttackDmg() {
  return Math.floor(Math.random() * 5) + 2;
}

function resetDisplayIntakes(displayDmg) {
  setTimeout(() => {
    // Reset Display Dmg
    if (displayDmg) {
      displayDmg.style.display = "none";
    }
  }, 2000);
}
// Generate difance function

// Reset Intaks Display function

// Modify player Stats Function

// End Game

Part-III coming on Sep. 14

Part-IV coming on Sep. 16

In this video we will continue our journey in the javascript language by creating a game using HTML CSS and JS. This video is part of a play list of javascript tutorials :

  • You will learn about:
  • JavaScript DOM Document Object model
  • JavaScript DOM Manipulation set attributes and remove attributes
  • JavaScript Array
  • JavaScript forEach loop
  • Objects childNodes
  • Template strings & template Literals

Code for this Video:

Part-V coming on Sep. 18

  • You will learn about:
  • if else statements
  • conditional operators
  • Math().abs

Part-VI coming on Sep. 21

Part-VII coming on Sep. 23

Part-VIII coming on Sep. 25

Part-VIII coming on Sep. 28

Do you want to learn JavaScript and become a Developer?

Then try this Complete Modern JavaScript Course:

https://www.udemy.com/course/modern-javascript-and-nodejs-from-beginner-to-advanced/?referralCode=B79F16D478BA5B193002

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.