JavaScript Variables and HTML DOM Challenge

3 min read • Assignment

JavaScript Variables: Challenge

Hack #1 (Weight: 60%)

Add-Lives Challenge Instructions:

Add a reaction message for the enemy when it reacts (e.g., “Enemy reacts!”).
Add lives to player
- Reflect: Did adding lives impact the enemy? Why or why not?
Add lives to enemy
- Reflect: How can values be the same for both player and enemy? Without duplicating assignments?
- Reflect: How can you have default values for lives, but also allow for custom values?

Code Runner Challenge

Class definition with properties, methods, and default values

View IPYNB Source

%%js

// CODE_RUNNER: Class definition with properties, methods, and default values

let gameSpeed = 10; // Global game speed variable

// Example of a class representing a game object
class GameObject {
  constructor(data) {
    // Using 'this' to define properties of the class instance
    this.image = data.image;
    this.width = data.width;
    this.height = data.height;
    this.speedRatio = data.speedRatio;
    // Position coordinates of the object are set to default values if arguments are not provided
    this.x = data.x;
    this.y = data.y;
    // Speed is calculated based on the global game speed and the speed ratio
    this.speed = gameSpeed * this.speedRatio;
    // Store the react callback if provided
    this.react = data.react || function() {
      console.log('No reaction defined');
    };
  }
}

const player_data = {
  image: 'player.png',
  width: 50,
  height: 50,
  speedRatio: 1.5,
  x: 0,
  y: 0,
  react: function() {
    console.log(`${this.image} is reacting at position (${this.x}, ${this.y})!`);
  }
};

const player = new GameObject(player_data);

console.log("Player Object (Class Instance):", player, "Type:", typeof player);
// Object reference
console.log("Player Image:", player.image);

// Activate the react callback
player.react();

const enemy_data = {
  image: 'enemy.png',
  width: 40,
  height: 40,
  speedRatio: 1.0,
  x: 100,
  y: 150
};

const enemy = new GameObject(enemy_data);
console.log("Enemy Object (Class Instance):", enemy, "Type:", typeof enemy);

// Object reference
console.log("Enemy Position:", `(${enemy.x}, ${enemy.y})`);
enemy.x += enemy.speed; // Move enemy based on its speed
console.log("Enemy New Position after moving:", `(${enemy.x}, ${enemy.y})`);
enemy.react(); // Enemy has default reaction

Lines: 1 Characters: 0

Output

Click "Run" in code control panel to see output ...

HTML DOM: Challenge

Hack #2 (Weight: 40%)

Add-Button Challenge Instructions:

Comment the code for Button 2 (Size Change)
Comment the code for Button 3 (Clicker Box).
Add a 4th button, and make it do something new when clicked
- change background
- highlight the text
Comment your new button code

HTML Runner Challenge

Interactive DOM manipulation buttons

View IPYNB Source

%%html

<!-- CODE_RUNNER: Interactive DOM manipulation buttons -->

<!-- Button Container  -->
<div class="ocs__container">

    <!-- Button 1: Color Change -->
    <button id="color-change-btn" class="ocs__btn alert-red fill">
        Color Change
    </button>

    <!-- Button 2: Size Change -->
    <button id="size-change-btn" class="ocs__btn large alert-green fill">
        Size Change
    </button>

    <!-- Button 3: Clicker Box -->
    <button class="ocs__btn medium alert-green fill">
        <div id="clicker-box" style="cursor: pointer">
            Clicks: <span id="click-count">0</span>
        </div>
    </button>

</div>

<script>
// All JS code inside a function to allow multiple runs in Jupyter Notebook without conflicts 
(function() {

  // 1. Color Change
  // Define const (constant) variable for the color button by its ID
  const colorBtn = document.getElementById('color-change-btn'); 
  // Define let variable (mutable) to track current state
  let isDefault = true;
  // Define an event listener for the button click event
  colorBtn.addEventListener('click', function() {
    if (isDefault) {
        colorBtn.className = "ocs__btn alert-yellow fill";
    } else {
        colorBtn.className = "ocs__btn alert-red fill";
    }
    isDefault = !isDefault; // Toggle to opposite state
  });

  // 2. Size Change
  const sizeBtn = document.getElementById('size-change-btn');
  let isLarge = true;
  sizeBtn.addEventListener('click', function() {
    if (isLarge) {
        sizeBtn.className = "ocs__btn small alert-green fill";
    } else {
        sizeBtn.className = "ocs__btn large alert-green fill";      
    }
    isLarge = !isLarge;
  });

  // 3. Clicker Box (Cookie Clicker)
  const clickerBox = document.getElementById('clicker-box');
  const clickCount = document.getElementById('click-count');
  let count = 0;
  clickerBox.addEventListener('click', function() {
      clickCount.textContent = ++count; 
  });

})(); // End Jupyter Notebook required function()
</script>

Lines: 1 Characters: 0

HTML Output

Need to update a submission later? Open the submissions dashboard.

Computer Science & Software Engineering