popcorn 1-1

%%html

<output id="output"></output>

<script>
function intializeData(data = null) {
    // Define default values
    let scaleFactor = 9/16;
    let animationRate = 1;
    let position = [0, 0];
    let speed = 1;

    // Check if data is provided
    if (data) {
        scaleFactor = data.SCALE_FACTOR || scaleFactor;
        animationRate = data.ANIMATION_RATE || animationRate;
        position = data.INIT_POSITION || position;
        speed = data.Speed || speed;
    }

    document.getElementById("output").innerHTML = `
        <p>Scale Factor: ${scaleFactor}</p>
        <p>Animation Rate: ${animationRate}</p>
        <p>Initial Position: ${position}</p>
        <p>Speed: ${speed}</p>
    `;
}

var data = {
    SCALE_FACTOR: 1/1,
    ANIMATION_RATE: 25,
    INIT_POSITION: [100, 100],
    Speed: 20000000,
}

// Uncomment one of the following lines to test the if statement in the function
//intializeData();
intializeData(data);

</script>

popcorn 1-2

%%js
class GameObject {
    constructor() {
        this.velocity = { x: 0, y: 0 };
        this.direction = '';
        this.xVelocity = 1;
        this.yVelocity = 1;
    }

    handleKeyDown({ keyCode }) {
        switch (keyCode) {
            case 73: // 'i' key
                this.direction = 'up';
                break;
            case 74: // 'j' key
                this.direction = 'left';
                break;
            case 75: // 'k' key
                this.direction = 'down';
                break;
            case 76: // 'l' key
                this.direction = 'right';
                break;
        }
    }
}

// Example usage
const gameObject = new GameObject();
console.log('Initial State:', gameObject);

gameObject.handleKeyDown({ keyCode: 73 }); // Simulate 'i' key press
console.log('After W Key Press:', gameObject);

gameObject.handleKeyDown({ keyCode: 74 }); // Simulate 'j' key press
console.log('After A Key Press:', gameObject);

gameObject.handleKeyDown({ keyCode: 75 }); // Simulate 'k' key press
console.log('After S Key Press:', gameObject);

gameObject.handleKeyDown({ keyCode: 76 }); // Simulate 'l' key press
console.log('After D Key Press:', gameObject);

popcorn 3

%%js 
let playerlevel = 10
let message = (playerlevel >= 15) ? "you met the requirement" : "You are under-leveled"
console.log(message)


<IPython.core.display.Javascript object>

homework


%%html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NPC Dialogue System</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #282c34;
            color: #d3d3d3;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        #npc {
            width: 100px;
            height: 100px;
            background-color: #c0c0c0;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
        #npc:hover {
            background-color: #a9a9a9;
        }
    </style>
</head>
<body>

<div id="npc" onclick="startDialogue()">NPC</div>

<script>
    function startDialogue() {
        const response = prompt("Choose a response:\n1. Hello!\n2. What are you doing here?\n3. Do you need help?\n4. Goodbye!");

        switch(response) {
            case '1':
                alert("NPC: Hello, traveler!");
                break;
            case '2':
                alert("NPC: I'm just wandering around, exploring.");
                break;
            case '3':
                alert("NPC: Yes, could you help me find my way?");
                break;
            case '4':
                alert("NPC: Goodbye! Safe travels!");
                break;
            default:
                alert("NPC: I didn't understand that.");
        }
    }
</script>

</body>
</html>

<!DOCTYPE html>

NPC Dialogue System
NPC