JavaScript Variables: Homework Notbook`

Use this Notbook to perform JavaScript Variable Homework Hacks.

---

%%javascript

/*
Let-Const Homework Instructions:
- Review the code in `hacks/snake.md`.
- Identify at least one primitive type and one reference type variable used in the game.
- For each, add andrun a code snippet to explain why you think `let` or `const` was chosen.
- Reflect: How might changing a variable’s declaration (from `let` to `const` or vice versa) impact the game’s operation?
- Reflect: How might changing a variable's value change the game's behavior?
*/

<IPython.core.display.Javascript object>

%%js

/*
Add-Lives Homework Instructions:
- 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?
*/

let gameSpeed = 10; // Global game speed variable

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

const player  = new GameObject('player.png', 50, 50, 1.5 );
console.log("Player Object (Class Instance):", player, "Type:", typeof player);
// Object reference
console.log("Player Image:", player.image);

const enemy = new GameObject('enemy.png', 40, 40, 1.0, 100, 150);
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})`);

<IPython.core.display.Javascript object>

%%html

<!--
Add-Button Homework 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
-->

<!-- Button Container  -->
<div style="display: flex; flex-wrap: wrap; gap: 10px;">
    <a style="text-decoration: none;">
        <!-- Color Change Button with id -->
        <div id="color-btn" style="background-color: #00FF00; color: white; padding: 10px 20px; border-radius: 5px; font-weight: bold; cursor: pointer;">
            Color Change
        </div>
    </a>
    <a style="text-decoration: none;">
        <!-- Size Change Button with id -->
        <div id="size-btn" style="background-color: #FF0000; color: white; padding: 10px 20px; border-radius: 5px; font-weight: bold; cursor: pointer;">
            Size Change
        </div>
    </a>
    <a style="text-decoration: none;">
        <!-- Clicker Box with id -->
        <div id="clicker-box" style="background-color: #12ABFF; color: white; padding: 10px 20px; border-radius: 5px; font-weight: bold; cursor: pointer;">
            Clicks: <span id="click-count">0</span>
        </div>
    </a>
</div>

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

  // 1. Color Change
  // Define const variable for the color button by its ID
  const colorBtn = document.getElementById('color-btn'); 
  // Define isWhite variable to track current color state
  let isWhite = true;
  // Define an event listener for the button click event
  colorBtn.addEventListener('click', function() {
      // Tooggle the button text color between white and black
      colorBtn.style.color = isWhite ? 'black' : 'white'; 
      isWhite = !isWhite; // Toggle to opposite state
  });

  // 2. Size Change
  const sizeBtn = document.getElementById('size-btn');
  let isLarge = false;
  sizeBtn.addEventListener('click', function() {
      if (isLarge) {
          sizeBtn.style.padding = '10px 20px';
          sizeBtn.style.fontSize = '1em';
      } else {
          sizeBtn.style.padding = '20px 40px';
          sizeBtn.style.fontSize = '1.5em';
      }
      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>

Color Change

Size Change

Clicks: 0