Skip to content

Commit

Permalink
changes to homework
Browse files Browse the repository at this point in the history
  • Loading branch information
@leila010
leila010 committed Nov 1, 2024
1 parent 894e8bc commit 3cf47c5
Show file tree
Hide file tree
Showing 2 changed files with 492 additions and 0 deletions.
241 changes: 241 additions & 0 deletions _notebooks/Mathematic_Expressions/2024-10-31-impliment_in_rpg.ipynb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,241 @@
{
"cells": [
{
"cell_type": "raw",
"metadata": {
"vscode": {
"languageId": "raw"
}
},
"source": [
"---\n",
"layout: post\n",
"title: Javascript Mathematical Operations\n",
"description: Popcorn hack 2\n",
"categories: [JavaScript]\n",
"comments: True\n",
"---"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## How can we implement this into our game?\n",
"We can use this to interact with npcs in our game, such as a monster that you are attacking. Here is an example where the main character attack the npc:\n",
"```javascript\n",
"let mainCharacterHealth = 100;\n",
"let npcHealth = 80;\n",
"// Main character attacks NPC\n",
"let attackDamage = 15;\n",
"npcHealth -= attackDamage; // Subtract damage from NPC's health\n",
"console.log(\"NPC Health: \" + npcHealth); // Output: NPC Health: 65\n",
"// NPC counter-attacks the main character\n",
"let npcAttackDamage = 12;\n",
"mainCharacterHealth -= npcAttackDamage; // Subtract damage from main character's health\n",
"console.log(\"Main Character Health: \" + mainCharacterHealth); // Output: Main Character Health: 88"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Popcorn Hack Two\n",
" \n",
" ## Problem: Monster Attack Button\n",
"When the button is clicked, a monster is attacked. However, the current code doesn't track the monster's health or reduce its health when attacked. Your task is to fill in the missing lines to give the monster **100 health** initially and **deal 10 damage** to the monster with each button click.\n",
"### Instructions:\n",
"- Set the monster's health to **100** when the page loads.\n",
"- Each time the button is clicked, reduce the monster's health by **10**.\n",
"- Display the monster's remaining health in the console after each click.\n",
"### Hints:\n",
"- Look for the comment that says `// Set \"monsterHealth\" to 100` and initialize the monster's health there.\n",
"- Find the placeholder `XXXX` in the code and replace it with the correct operator to reduce the monster's health.\n",
"You will need to use an operator that **subtracts** 10 from the current health value."
]
},
{
"cell_type": "code",
"execution_count": 1,
"metadata": {
"vscode": {
"languageId": "javascript"
}
},
"outputs": [
{
"data": {
"text/html": [
"\n",
"<div id=\"gameContainer\" style=\"margin-top: 20px;\">\n",
" <!-- The game will be appended here -->\n",
"</div>\n",
"\n",
"<script type=\"text/javascript\">\n",
" // Ensure the game is created only once\n",
" if (!document.getElementById('monsterHealth')) {\n",
" // Create a heading for the game\n",
" const h1 = document.createElement('h1');\n",
" h1.textContent = 'Monster Battle';\n",
" document.getElementById('gameContainer').appendChild(h1);\n",
"\n",
" // Create a paragraph for the monster's health\n",
" const healthPara = document.createElement('p');\n",
" healthPara.innerHTML = 'Monster Health: <span id=\"monsterHealth\">100</span>';\n",
" document.getElementById('gameContainer').appendChild(healthPara);\n",
"\n",
" // Create the Attack button\n",
" const attackButton = document.createElement('button');\n",
" attackButton.id = 'attackButton';\n",
" attackButton.textContent = 'Attack';\n",
" attackButton.style.padding = '10px 20px';\n",
" attackButton.style.fontSize = '16px';\n",
" attackButton.style.cursor = 'pointer';\n",
" document.getElementById('gameContainer').appendChild(attackButton);\n",
"\n",
" // Create a message display paragraph\n",
" const messagePara = document.createElement('p');\n",
" messagePara.id = 'message';\n",
" messagePara.style.marginTop = '20px';\n",
" messagePara.style.fontWeight = 'bold';\n",
" document.getElementById('gameContainer').appendChild(messagePara);\n",
"\n",
" // Set \"monsterHealth\" to 100 with variable\n",
" let monsterHealth = 100;\n",
"\n",
" // Function to handle attack\n",
" function attackMonster() {\n",
" // Reduce monster's health by 10\n",
" let damage = 10;\n",
" monsterHealth -= damage;\n",
"\n",
" // Update the displayed health\n",
" document.getElementById('monsterHealth').textContent = monsterHealth;\n",
"\n",
" // Check if monster's health is 0 or less\n",
" if (monsterHealth <= 0) {\n",
" document.getElementById('message').textContent = \"You defeated the monster!\";\n",
" \n",
" // Reset monster's health after defeating\n",
" setTimeout(() => {\n",
" monsterHealth = 100;\n",
" document.getElementById('monsterHealth').textContent = monsterHealth;\n",
" document.getElementById('message').textContent = \"\";\n",
" }, 2000); // Wait 2 seconds before resetting\n",
" } else {\n",
" // Clear the message if the monster is not yet defeated\n",
" document.getElementById('message').textContent = \"\";\n",
" }\n",
" }\n",
"\n",
" // Attach the attack function to the button\n",
" document.getElementById('attackButton').addEventListener('click', attackMonster);\n",
" }\n",
"</script>\n"
],
"text/plain": [
"<IPython.core.display.HTML object>"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"from IPython.display import display, HTML\n",
"\n",
"html_code = \"\"\"\n",
"<div id=\"gameContainer\" style=\"margin-top: 20px;\">\n",
" <!-- The game will be appended here -->\n",
"</div>\n",
"\n",
"<script type=\"text/javascript\">\n",
" // Ensure the game is created only once\n",
" if (!document.getElementById('monsterHealth')) {\n",
" // Create a heading for the game\n",
" const h1 = document.createElement('h1');\n",
" h1.textContent = 'Monster Battle';\n",
" document.getElementById('gameContainer').appendChild(h1);\n",
"\n",
" // Create a paragraph for the monster's health\n",
" const healthPara = document.createElement('p');\n",
" healthPara.innerHTML = 'Monster Health: <span id=\"monsterHealth\">100</span>';\n",
" document.getElementById('gameContainer').appendChild(healthPara);\n",
"\n",
" // Create the Attack button\n",
" const attackButton = document.createElement('button');\n",
" attackButton.id = 'attackButton';\n",
" attackButton.textContent = 'Attack';\n",
" attackButton.style.padding = '10px 20px';\n",
" attackButton.style.fontSize = '16px';\n",
" attackButton.style.cursor = 'pointer';\n",
" document.getElementById('gameContainer').appendChild(attackButton);\n",
"\n",
" // Create a message display paragraph\n",
" const messagePara = document.createElement('p');\n",
" messagePara.id = 'message';\n",
" messagePara.style.marginTop = '20px';\n",
" messagePara.style.fontWeight = 'bold';\n",
" document.getElementById('gameContainer').appendChild(messagePara);\n",
"\n",
" // Set \"monsterHealth\" to 100 with variable\n",
" let monsterHealth = 100;\n",
"\n",
" // Function to handle attack\n",
" function attackMonster() {\n",
" // Reduce monster's health by 10\n",
" let damage = 10;\n",
" monsterHealth -= damage;\n",
"\n",
" // Update the displayed health\n",
" document.getElementById('monsterHealth').textContent = monsterHealth;\n",
"\n",
" // Check if monster's health is 0 or less\n",
" if (monsterHealth <= 0) {\n",
" document.getElementById('message').textContent = \"You defeated the monster!\";\n",
" \n",
" // Reset monster's health after defeating\n",
" setTimeout(() => {\n",
" monsterHealth = 100;\n",
" document.getElementById('monsterHealth').textContent = monsterHealth;\n",
" document.getElementById('message').textContent = \"\";\n",
" }, 2000); // Wait 2 seconds before resetting\n",
" } else {\n",
" // Clear the message if the monster is not yet defeated\n",
" document.getElementById('message').textContent = \"\";\n",
" }\n",
" }\n",
"\n",
" // Attach the attack function to the button\n",
" document.getElementById('attackButton').addEventListener('click', attackMonster);\n",
" }\n",
"</script>\n",
"\"\"\"\n",
"\n",
"# Display the HTML and JavaScript in the notebook\n",
"display(HTML(html_code))\n"
]
}
],
"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 3cf47c5

Please sign in to comment.