Skip to content

Commit

Permalink
changes to popcorn hacks and adding things with conditinals
Browse files Browse the repository at this point in the history
  • Loading branch information
@leila010
leila010 committed Nov 1, 2024
1 parent b252eae commit 1bbe58f
Show file tree
Hide file tree
Showing 4 changed files with 925 additions and 0 deletions.
231 changes: 231 additions & 0 deletions _notebooks/Conditions/2024-10-27-conditional_p1.ipynb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,231 @@
{
"cells": [
{
"cell_type": "raw",
"metadata": {
"vscode": {
"languageId": "raw"
}
},
"source": [
"---\n",
"comments: true\n",
"layout: post\n",
"title: JavaScript Conditional Statements\n",
"description: An introduction to JavaScript conditional statements\n",
"permalink: /csse/javascript/fundamentals/conditional-statements/p1/\n",
"categories: [JavaScript Fundamentals]\n",
"---"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Conditional Statements Part 1\n",
"\n",
"Conditional statements are used to direct the flow of the program.\n"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### if statements\n",
"\n",
"These are often used to branch conditions. This example outputs through HTML using docuemtn."
]
},
{
"cell_type": "code",
"execution_count": 1,
"metadata": {
"vscode": {
"languageId": "html"
}
},
"outputs": [
{
"data": {
"text/html": [
"\n",
"<output id=\"output\"></output>\n",
"\n",
"<script>\n",
"function intializeData(data = null) {\n",
" // Define default values\n",
" let scaleFactor = 9/16;\n",
" let animationRate = 1;\n",
" let position = [0, 0];\n",
"\n",
" // Check if data is provided\n",
" if (data) {\n",
" scaleFactor = data.SCALE_FACTOR || scaleFactor;\n",
" animationRate = data.ANIMATION_RATE || animationRate;\n",
" position = data.INIT_POSITION || position;\n",
" }\n",
"\n",
" document.getElementById(\"output\").innerHTML = `\n",
" <p>Scale Factor: ${scaleFactor}</p>\n",
" <p>Animation Rate: ${animationRate}</p>\n",
" <p>Initial Position: ${position}</p>\n",
" `;\n",
"}\n",
"\n",
"var data = {\n",
" SCALE_FACTOR: 1/1,\n",
" ANIMATION_RATE: 25,\n",
" INIT_POSITION: [100, 100]\n",
"}\n",
"\n",
"// Uncomment one of the following lines to test the if statement in the function\n",
"//intializeData();\n",
"intializeData(data);\n",
"\n",
"</script>\n"
],
"text/plain": [
"<IPython.core.display.HTML object>"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"%%html\n",
"\n",
"<output id=\"output\"></output>\n",
"\n",
"<script>\n",
"function intializeData(data = null) {\n",
" // Define default values\n",
" let scaleFactor = 9/16;\n",
" let animationRate = 1;\n",
" let position = [0, 0];\n",
"\n",
" // Check if data is provided\n",
" if (data) {\n",
" scaleFactor = data.SCALE_FACTOR || scaleFactor;\n",
" animationRate = data.ANIMATION_RATE || animationRate;\n",
" position = data.INIT_POSITION || position;\n",
" }\n",
"\n",
" document.getElementById(\"output\").innerHTML = `\n",
" <p>Scale Factor: ${scaleFactor}</p>\n",
" <p>Animation Rate: ${animationRate}</p>\n",
" <p>Initial Position: ${position}</p>\n",
" `;\n",
"}\n",
"\n",
"var data = {\n",
" SCALE_FACTOR: 1/1,\n",
" ANIMATION_RATE: 25,\n",
" INIT_POSITION: [100, 100]\n",
"}\n",
"\n",
"// Uncomment one of the following lines to test the if statement in the function\n",
"//intializeData();\n",
"intializeData(data);\n",
"\n",
"</script>"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### switch case statement\n",
"\n",
"These are often used to branch code when there are a lot of options."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"vscode": {
"languageId": "javascript"
}
},
"outputs": [
{
"data": {
"application/javascript": "\nclass GameObject {\n constructor() {\n this.velocity = { x: 0, y: 0 };\n this.direction = '';\n this.xVelocity = 1;\n this.yVelocity = 1;\n }\n\n handleKeyDown({ keyCode }) {\n switch (keyCode) {\n case 87: // 'W' key\n \n this.direction = 'up';\n break;\n case 65: // 'A' key\n \n this.direction = 'left';\n break;\n case 83: // 'S' key\n \n this.direction = 'down';\n break;\n case 68: // 'D' key\n \n this.direction = 'right';\n break;\n }\n }\n}\n\n// Example usage\nconst gameObject = new GameObject();\nconsole.log('Initial State:', gameObject);\n\ngameObject.handleKeyDown({ keyCode: 87 }); // Simulate 'W' key press\nconsole.log('After W Key Press:', gameObject);\n\ngameObject.handleKeyDown({ keyCode: 65 }); // Simulate 'A' key press\nconsole.log('After A Key Press:', gameObject);\n\ngameObject.handleKeyDown({ keyCode: 83 }); // Simulate 'S' key press\nconsole.log('After S Key Press:', gameObject);\n\ngameObject.handleKeyDown({ keyCode: 68 }); // Simulate 'D' key press\nconsole.log('After D Key Press:', gameObject);\n",
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"%%javascript\n",
"\n",
"class GameObject {\n",
" constructor() {\n",
" this.velocity = { x: 0, y: 0 };\n",
" this.direction = '';\n",
" this.xVelocity = 1;\n",
" this.yVelocity = 1;\n",
" }\n",
"\n",
" handleKeyDown({ keyCode }) {\n",
" switch (keyCode) {\n",
" case 87: // 'W' key\n",
" this.direction = 'up';\n",
" break;\n",
" case 65: // 'A' key\n",
" this.direction = 'left';\n",
" break;\n",
" case 83: // 'S' key\n",
" this.direction = 'down';\n",
" break;\n",
" case 68: // 'D' key\n",
" this.direction = 'right';\n",
" break;\n",
" }\n",
" }\n",
"}\n",
"\n",
"// Example usage\n",
"const gameObject = new GameObject();\n",
"console.log('Initial State:', gameObject);\n",
"\n",
"gameObject.handleKeyDown({ keyCode: 87 }); // Simulate 'W' key press\n",
"console.log('After W Key Press:', gameObject);\n",
"\n",
"gameObject.handleKeyDown({ keyCode: 65 }); // Simulate 'A' key press\n",
"console.log('After A Key Press:', gameObject);\n",
"\n",
"gameObject.handleKeyDown({ keyCode: 83 }); // Simulate 'S' key press\n",
"console.log('After S Key Press:', gameObject);\n",
"\n",
"gameObject.handleKeyDown({ keyCode: 68 }); // Simulate 'D' key press\n",
"console.log('After D Key Press:', gameObject);"
]
}
],
"metadata": {
"kernelspec": {
"display_name": "venv",
"language": "python",
"name": "python3"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.12.5"
}
},
"nbformat": 4,
"nbformat_minor": 2
}
135 changes: 135 additions & 0 deletions _notebooks/Conditions/2024-11-10-conditinals_hacks.ipynb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,135 @@
{
"cells": [
{
"cell_type": "raw",
"metadata": {
"vscode": {
"languageId": "raw"
}
},
"source": [
"---\n",
"comments: True\n",
"layout: post\n",
"title: conditionals lesson hacks\n",
"description: conditionals hacks\n",
"permalink: /csse/javascript/fundamentals/conditionals/hacks\n",
"type: ccc\n",
"---"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"#### <span style=\"color: #ADD8E6; text-shadow: 3px 3px 8px #4682B4; font-weight: bold; font-size: 2em;\">Popcorn Hacks:</span>\n",
"Develop a basic combat system that allows characters to engage in battles with enemies. This will help you practice using functions, conditionals, and basic game mechanics in JavaScript.\n",
"\n",
"---\n",
"##### <span style=\"color: #FF6347; text-shadow: 2px 2px 6px #8B0000; font-weight: bold; font-size: 1.5em;\">Popcorn Hack Part 1 - 1: Using <code>initializeData</code> Function</span> \n",
"\n",
"1. Add `speed` to the <code>initializeData(data = null)</code> function and give it a default value.\n",
"2. Add `seed` to the HTML output.\n",
"3. Add `speed` to the JSON data.\n",
"4. Test calling <code>initializeData</code> with no argument, and then using a `data` JSON object as an argument.\n",
"\n",
"##### <span style=\"color: #FF6347; text-shadow: 2px 2px 6px #8B0000; font-weight: bold; font-size: 1.5em;\">Popcorn Hack Part 1 - 2: Adding IJKL Key Conditions in <code>handleKeyDown</code></span> \n",
"\n",
"1. Add a `case` statement for each of the IJKL keys in the `handleKeyDown({ keyCode })` switch statement.\n",
"2. Send the key code for each IJKL key to the <code>gameObject.handleKeyDown</code> method.\n",
"3. Use <code>console.log()</code> to output `gameObject`.\n",
"\n",
"---\n",
"\n",
"##### <span style=\"color: #FF6347; text-shadow: 2px 2px 6px #8B0000; font-weight: bold; font-size: 1.5em;\">Popcorn Hack 2: Creating a Simple Attack System</span>\n",
"1. Add a <code>boolean</code> variable named <code>canAttack</code>, and set it to <code>false</code>.\n",
"2. Use an <code>if</code> statement to check if the player can attack.\n",
"3. If <code>canAttack</code> is <code>false</code>, output \"Can't attack.\"\n",
"4. Use <code>Math.random()</code> to determine if the player is allowed to attack. (Tip: Use ChatGPT for help with <code>Math.random()</code> if needed!)\n",
"5. This will pick a random number to decide if the attack can happen.\n",
"6. Use <code>console.log()</code> for all outputs.\n",
"\n",
"---\n",
"\n",
"##### <span style=\"color: #FF6347; text-shadow: 2px 2px 6px #8B0000; font-weight: bold; font-size: 1.5em;\">Popcorn Hack 3: Level Requirement Check</span>\n",
"1. Use the <code>ternary operator</code> to create an output if the player meets the level requirements.\n",
"2. If not, output a message telling the player they are under-leveled.\n",
"3. Use <code>console.log()</code> to print your output."
]
},
{
"cell_type": "raw",
"metadata": {
"vscode": {
"languageId": "raw"
}
},
"source": [
"%%"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"<!-- Homework Section with Enhanced Glowing Title -->\n",
"\n",
"### <span style=\"color: #78C0E0; text-shadow: 0 0 10px #1E3D59, 0 0 20px #1E3D59; font-weight: bold; font-size: 2em;\">Homework:</span>\n",
"\n",
"#### <span style=\"color: #FFA07A; text-shadow: 0 0 8px #3C3C3C, 0 0 15px #3C3C3C; font-weight: bold; font-size: 1.5em;\">Objectives</span>\n",
"\n",
"<span style=\"font-size: 1.2em; color: #E5E5E5; line-height: 1.8;\">\n",
" <br><strong style=\"color: #FFD700;\">Option 1:</strong> <span style=\"color: #C0C0C0;\">Create a simple combat system.</span>\n",
" <ul style=\"color: #D3D3D3; margin-left: 20px; list-style-type: circle;\">\n",
" <li>Allow characters to fight enemies.</li>\n",
" <li>Use basic functions and conditionals in JavaScript.</li>\n",
" <li>Focus on making it easy to understand how battles work.</li>\n",
" </ul>\n",
"\n",
" <br>\n",
" <strong style=\"color: #FFD700;\">Option 2:</strong> <span style=\"color: #C0C0C0;\">Make a dialogue system for your NPC (Non-Player Character).</span>\n",
" <ul style=\"color: #D3D3D3; margin-left: 20px; list-style-type: circle;\">\n",
" <li>Use the <code style=\"color: #7FFFD4;\">prompt()</code> function to ask the player for a response (choose a number from 1 to 4).</li>\n",
" <li>This dialogue should appear when the player gets close to the NPC and presses a button.</li>\n",
" </ul>\n",
"</span>\n",
"\n",
"### <span style=\"color: #FFA07A; text-shadow: 1px 1px 6px #3C3C3C; font-weight: bold;\">Additional Tips:</span>\n",
"- <span style=\"color: #FFD700;\">**For Option 1:**</span>\n",
" <ul style=\"color: #D3D3D3; margin-left: 20px; list-style-type: square;\">\n",
" <li>Start by writing down what the characters and enemies will be. Create simple names and attributes (like health).</li>\n",
" <li>Use <code style=\"color: #7FFFD4;\">console.log()</code> to print out what's happening at each step. This will help you understand the flow of your code.</li>\n",
" <li>Look for example code online to see how others have created combat systems. Don't be afraid to borrow ideas!</li>\n",
" </ul>\n",
"\n",
"- <span style=\"color: #FFD700;\">**For Option 2:**</span>\n",
" <ul style=\"color: #D3D3D3; margin-left: 20px; list-style-type: square;\">\n",
" <li>Plan out the dialogue options before you start coding. Write them down in a list.</li>\n",
" <li>Use comments in your code to remind yourself what each part does. For example, <code style=\"color: #7FFFD4;\">// Ask the player for a response</code>.</li>\n",
" <li>Test your code frequently. After writing a few lines, run it to see if it works before adding more.</li>\n",
" </ul>"
]
}
],
"metadata": {
"kernelspec": {
"display_name": "venv",
"language": "python",
"name": "python3"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.10.12"
}
},
"nbformat": 4,
"nbformat_minor": 2
}
Loading

0 comments on commit 1bbe58f

Please sign in to comment.