JavaScript Tutorial
  • 🍼Introduction
  • 🥛Hello Gamers
  • 🍯Variables
    • Action Game Example
  • 🌰Strings
    • RPG Example
  • 🍪Character Acces
    • Simulation Example
  • 🍩Plus (+) operator
    • Strategy Game Example
  • 🥜Functions
    • Adventure Game Example
  • 🍿Template strings
    • Strategy Game Example
  • 🍫Numbers
    • Sports Game Example
  • 🍬Converting Numbers to Strings
    • Fighting Game Example
  • 🍭Operations
    • FPS Game Example
  • 🍮Conditions
    • Platformer Game Example
  • 🎂Arrays
    • Puzzle Game Example
  • 🍰Objects
    • Racing Game Example
  • 🧁Arrow Functions
    • Rhythm Game Example
  • 🔌Shameless Plug
  • 🥧Implicit Return
    • Platform Game Example
  • 🍦String Methods
    • GRID Game Example
  • 🍨Object Literals
    • Board Game Example
  • 🍧DynamicProperty
    • Political Game Example
  • 🍡Reading Dynamic Property
    • Hide & Seek Game
  • 🥮Objects Continued
    • Medieval Game Example
  • 🥠Object Shorthands
    • Trivia Game example
  • 🔌Shameless Plug (again)
  • 🍥Destructuring & Concatenation
    • Dig a hole game example
  • 🍏Optional Chaining
    • Action Game Example
  • 🍐Nullish coalescing operator
    • Adventure Game Example
  • 🍊Refactoring If Conditions
    • Arcade Game Example
  • 🍋Implicit Conversion & Falcy Values
    • Strategy Game Example
  • 🍌Arrays of objects
    • Sports Game Example
  • 🍉Transforming Array of Objects
    • Fighters Game Example
  • 🍇Some important array methods
    • FPS Example
  • 🫐Reducing arrays of objects
    • Third Person Shooter Example
  • 🍓Try....catch
    • Platformer Example
  • 🍈Immutability
    • Puzzle game example
  • 🍒Creating new arrays or objects
    • Racing Game Example
  • 🔌Shameless Plug (again)
  • 🍑Immutable object operations
    • Basics
    • Rhythm Game Example
  • 🥭Classes
    • Basics
    • Platformer Game Example
  • 🍍Instance Method
    • Basics
    • Role-playing game example
  • 🥥Object Oriented Programming
    • Basics
    • Stealth Game Example
  • 🥝Getters & Setters
    • Basics
    • Survival Game Example
  • 🍅Static Methods & Chaining
    • Basics
    • Tactical Role Playing Game
  • 🍆Class Inheritance
    • Tower Defense Game Example
  • 🥑Use of Super
    • Vehicular Combat Game example
  • 🫒Public Class Field
    • MMORPG Example
  • 🥦Private class fields
    • Battle Royale Games Example
  • 🥬Aysnc/Await
    • Collectible Card Game example
    • Video Board game example
  • 🫑SetTimeout
    • Dice game example
  • 🥒Execution Order
    • Digital Collectible Card Game example
  • 🌶️The callback pattern
    • Life Simulation Game example
  • 🌽Promises
    • Music Game Example
  • 🥕Writing a function that returns a promise
    • Party game example
  • 🧄Introduction to JSON
    • Tile based game example
  • 🧅JSON.parse(string) / JSON.stringify(object)
    • Rhythm action game example
  • 🍠JSON Example for a game
    • Fetching JSON game data
  • 🥐Handling fetch errors
    • Fetch and HTTP Requests
  • 🥯ES Modules
    • Tower Defence Game Example
  • 🍞Default Export
    • Strategy Adventure Game Example
  • 🥖Fetch Wrapper
    • Strategy Role-playing game example
  • 🔌Final Shameless Plug
  • 🫓Lexical Scope and Arrow Functions
    • Vehicular Combat Game Example
  • 🥨Passing Functions
    • Vehicular simulation game example
  • 🥚Dynamic Imports
    • Video card game example
  • 🍠What is a closure
    • Video casino game example
  • 🎆Congratulations
Powered by GitBook
On this page
  1. Execution Order

Digital Collectible Card Game example

Here is an example of execution order in the context of a digital collectible card game:

class CardGame {
  constructor() {
    this.cards = [];
  }

  async loadCards() {
    console.log('Loading cards...');

    // This is an asynchronous operation
    const response = await fetch('https://example.com/cards');
    const data = await response.json();

    // This line of code will not run until the data has been retrieved
    this.cards = data;

    console.log('Cards loaded');
  }

  // Public method
  startGame() {
    console.log('Starting game with cards:');
    console.log(this.cards);
  }

  // Public method
  async playTurn() {
    console.log('Your turn');

    // Wait for player to make a move
    await new Promise(resolve => {
      document.querySelector('button').addEventListener('click', resolve);
    });

    console.log('Processing move...');

    // Wait 1 second before ending turn
    await new Promise(resolve => setTimeout(resolve, 1000));

    console.log('Turn over');
  }
}

const game = new CardGame();

game.loadCards();

game.startGame();

// This function call is asynchronous
game.playTurn();

console.log('Waiting for turn to end...');

In this example, the CardGame class has several methods that affect the execution order: loadCards, startGame, and playTurn.

The loadCards method performs an asynchronous operation to retrieve a list of cards from a server. The startGame method is called after the loadCards method, but because loadCards is asynchronous, the startGame method may not be called until after the cards have been retrieved.

The playTurn method is also asynchronous, and waits for the player to make a move by listening for a button click event. Once the player has made their move, the method waits for 1 second before ending the turn.

The execution order in this example is as follows:

  1. console.log('Loading cards...')

  2. console.log('Starting game with cards:')

  3. console.log('Your turn')

  4. console.log('Waiting for turn to end...')

  5. console.log('Cards loaded') (when the cards have been retrieved)

  6. console.log('Processing move...') (when the player has made their move)

  7. console.log('Turn over') (1 second after the player has made their move)

The execution order in this example is affected by the use of asynchronous operations and event handlers. Understanding the execution order is important for writing correct and efficient code in a digital collectible card game.

PreviousExecution OrderNextThe callback pattern

Last updated 2 years ago

🥒