Skip to content

Commit beb4963

Browse files
JustinQ-DNHSJustinQ-DNHS
committed
2 parents 65e7249 + 483cf96 commit beb4963

File tree

1 file changed

+50
-98
lines changed

1 file changed

+50
-98
lines changed

‎_notebooks/CSSE/javascript/fundamentals/2024-09-30-data-types-operations.ipynb‎

Lines changed: 50 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -63,24 +63,13 @@
6363
},
6464
{
6565
"cell_type": "code",
66-
"execution_count": 2,
66+
"execution_count": null,
6767
"metadata": {
6868
"vscode": {
6969
"languageId": "javascript"
7070
}
7171
},
72-
"outputs": [
73-
{
74-
"data": {
75-
"application/javascript": "\n/* Primitive Data Types\nThese are data types that store a single value.\n*/\n\n// Number: Represents numerical values, such as health and speed\nlet health = 100; // Integer\nlet playerSpeed = 5.75; // Float representing the player's speed\n\nconsole.log(\"Health (Number):\", health, \"Type:\", typeof health);\nconsole.log(\"Player Speed (Number):\", playerSpeed, \"Type:\", typeof playerSpeed);\n\n// String: Represents text, such as the user's name or keypress\nlet userName = \"Hero123\"; // User name\nlet keyPress = 'a'; // Keypress\n\nconsole.log(\"User Name (String):\", userName, \"Type:\", typeof userName);\nconsole.log(\"Key Press (String):\", keyPress, \"Type:\", typeof keyPress);\n\n// Compare single character to its ASCII value\nlet asciiValue = keyPress.charCodeAt(0);\nconsole.log(\"ASCII Value of Key Press:\", asciiValue, \"Type:\", typeof asciiValue);\nconsole.log(\"Is Key Press 'a' (ASCII 97)?\", asciiValue === 97);\n\n// Boolean: Represents true/false values, such as isAlive\nlet isAlive = true;\n\nconsole.log(\"Is Alive (Boolean):\", isAlive, \"Type:\", typeof isAlive);\n\n// Undefined: Represents a variable that has been declared but not yet assigned a value\nlet questReward;\n\nconsole.log(\"Quest Reward (Undefined):\", questReward, \"Type:\", typeof questReward);\n\n// Null: Represents the intentional absence of any object value, such as an empty inventory slot\nlet inventorySlot = null;\n\nconsole.log(\"Inventory Slot (Null):\", inventorySlot, \"Type:\", typeof inventorySlot);\n\n// Symbol: Represents a unique and immutable value, often used as unique identifiers for game objects\nlet uniqueID = Symbol('playerID');\n\nconsole.log(\"Unique ID (Symbol):\", uniqueID, \"Type:\", typeof uniqueID);\n\n// BigInt: Represents very large integers, such as the total time played in milliseconds\nlet totalTimePlayed = 1234567890123456789012345678901234567890n;\n\nconsole.log(\"Total Time Played (BigInt):\", totalTimePlayed, \"Type:\", typeof totalTimePlayed);\n\n/* Reference Data Types\nThese are data types that store references to memory locations.\n*/\n\n// Object: Represents a collection of key-value pairs, such as player attributes or game settings\nlet playerAttributes = {\n name: \"Hero123\",\n health: 100,\n mana: 50\n};\n\nconsole.log(\"Player Attributes (Object):\", playerAttributes, \"Type:\", typeof playerAttributes);\n\n// Array: Represents an ordered collection of values, such as a list of high scores or inventory items\nlet highScores = [1500, 1200, 900, 600, 300];\n\nconsole.log(\"High Scores (Array):\", highScores, \"Type:\", typeof highScores);\n\n// Function: Represents a block of code designed to perform a specific task, such as attacking an enemy or saving the game\nfunction attackEnemy() {\n console.log(\"Enemy attacked!\");\n}\n\nconsole.log(\"Attack Enemy (Function):\", attackEnemy, \"Type:\", typeof attackEnemy);\nattackEnemy();\n",
76-
"text/plain": [
77-
"<IPython.core.display.Javascript object>"
78-
]
79-
},
80-
"metadata": {},
81-
"output_type": "display_data"
82-
}
83-
],
72+
"outputs": [],
8473
"source": [
8574
"%%js\n",
8675
"\n",
@@ -221,81 +210,13 @@
221210
},
222211
{
223212
"cell_type": "code",
224-
"execution_count": 3,
213+
"execution_count": null,
225214
"metadata": {
226215
"vscode": {
227216
"languageId": "html"
228217
}
229218
},
230-
"outputs": [
231-
{
232-
"data": {
233-
"text/html": [
234-
"\n",
235-
"<p>This example uses data types, operators, and functions to scale a block based on a user-defined width.</p>\n",
236-
"\n",
237-
"<!-- Input definitions -->\n",
238-
"<div>\n",
239-
" <label for=\"width\">Enter Width (1280, 1920, 2560, 3840):</label>\n",
240-
" <input type=\"number\" id=\"width\" name=\"width\" min=\"1280\" max=\"3840\" step=\"640\" value=\"1280\">\n",
241-
" <button onclick=\"submitScale()\">Submit</button>\n",
242-
"</div>\n",
243-
"\n",
244-
"<!-- Document Object Model (DOM) output locations -->\n",
245-
"<div id=\"output\"></div>\n",
246-
"<div id=\"error\"></div>\n",
247-
"\n",
248-
"<!-- Block display -->\n",
249-
"<div id=\"block\" style=\"width: 64px; height: 36px; background-color: red;\"></div>\n",
250-
"\n",
251-
"<script>\n",
252-
"\n",
253-
" // Function to validate and output the scale value\n",
254-
" function submitScale() {\n",
255-
" const BLOCK_SCALE_FACTOR = 20;\n",
256-
" const ASPECT_RATIO = 9 / 16;\n",
257-
" let block = document.getElementById('block');\n",
258-
" let width = parseInt(document.getElementById('width').value);\n",
259-
" \n",
260-
" // Restrict sizes to common HD resolutions\n",
261-
" if (width === 1280 || width === 1920 || width === 2560 || width === 3840) {\n",
262-
" // Calculate height based on 16:9 aspect ratio\n",
263-
" let height = Math.round(width * ASPECT_RATIO);\n",
264-
" \n",
265-
" // Calculate block size as 1/20th of the scale dimensions\n",
266-
" let blockSize = Math.min(width, height) / BLOCK_SCALE_FACTOR;\n",
267-
" \n",
268-
" // Set/clear error messages when the value is valid\n",
269-
" document.getElementById('error').innerHTML = \"\";\n",
270-
" // Output the scale value to the console\n",
271-
" document.getElementById('output').innerHTML = \"Scale set to: \" + width + \" x \" + height + \" (Block size: \" + blockSize + \"px)\";\n",
272-
" \n",
273-
" // Adjust the size of the block\n",
274-
" block.style.width = blockSize + \"px\";\n",
275-
" block.style.height = blockSize * ASPECT_RATIO + \"px\";\n",
276-
" } else {\n",
277-
" // Set/clear output messages when there is an error\n",
278-
" document.getElementById('output').innerHTML = \"\";\n",
279-
" // Output an error message to the console\n",
280-
" // Output an error message to the HTML page\n",
281-
" document.getElementById('error').innerHTML = \"Invalid HD resolution: \" + width;\n",
282-
"\n",
283-
" // Clear the block size\n",
284-
" block.style.width = \"0px\";\n",
285-
" block.style.height = \"0px\";\n",
286-
" }\n",
287-
" console.error(\"HD resolution:\", block.style.width, \"x\", block.style.height);\n",
288-
" }\n",
289-
"</script>\n"
290-
],
291-
"text/plain": [
292-
"<IPython.core.display.HTML object>"
293-
]
294-
},
295-
"metadata": {},
296-
"output_type": "display_data"
297-
}
298-
],
219+
"outputs": [],
299220
"source": [
300221
"%%html \n",
301222
"\n",
@@ -319,7 +240,7 @@
319240
"\n",
320241
" // Function to validate and output the scale value\n",
321242
" function submitScale() {\n",
322-
" const BLOCK_SCALE_FACTOR = 20;\n",
243+
" const BLOCK_SCALE_DIVISOR = 20;\n",
323244
" const ASPECT_RATIO = 9 / 16;\n",
324245
" let block = document.getElementById('block');\n",
325246
" let width = parseInt(document.getElementById('width').value);\n",
@@ -330,7 +251,7 @@
330251
" let height = Math.round(width * ASPECT_RATIO);\n",
331252
" \n",
332253
" // Calculate block size as 1/20th of the scale dimensions\n",
333-
" let blockSize = Math.min(width, height) / BLOCK_SCALE_FACTOR;\n",
254+
" let blockSize = Math.min(width, height) / BLOCK_SCALE_DIVISOR;\n",
334255
" \n",
335256
" // Set/clear error messages when the value is valid\n",
336257
" document.getElementById('error').innerHTML = \"\";\n",
@@ -365,9 +286,18 @@
365286
"Make a code cell that changes block into a square, versus HD resolution"
366287
]
367288
},
289+
{
290+
"cell_type": "markdown",
291+
"metadata": {},
292+
"source": [
293+
"## Placing a Block\n",
294+
"\n",
295+
"Often in gaming you will want to position on element in relationship to another."
296+
]
297+
},
368298
{
369299
"cell_type": "code",
370-
"execution_count": 4,
300+
"execution_count": 1,
371301
"metadata": {
372302
"vscode": {
373303
"languageId": "html"
@@ -382,8 +312,8 @@
382312
"\n",
383313
"<!-- Input definitions -->\n",
384314
"<div>\n",
385-
" <label for=\"width\">Enter Width (1280, 1920, 2560, 3840):</label>\n",
386-
" <input type=\"number\" id=\"width\" name=\"width\" min=\"1280\" max=\"3840\" step=\"640\" value=\"1280\">\n",
315+
" <label for=\"widthCanvas\">Enter Width (1280, 1920, 2560, 3840):</label>\n",
316+
" <input type=\"number\" id=\"widthCanvas\" name=\"widthCanvas\" min=\"1280\" max=\"3840\" step=\"640\" value=\"1280\">\n",
387317
" <button onclick=\"submitScaleImg()\">Submit</button>\n",
388318
"</div>\n",
389319
"\n",
@@ -397,22 +327,24 @@
397327
"<script>\n",
398328
" // Function to validate and output the scale value\n",
399329
" function submitScaleImg() {\n",
330+
" const BLOCK_SCALE_DIVISOR = 20;\n",
331+
" const ASPECT_RATIO = 9 / 16;\n",
400332
" const SCALE_DOWN_FACTOR = 0.5;\n",
401333
" let canvas = document.getElementById('canvas');\n",
402334
" let c = canvas.getContext('2d');\n",
403-
" let width = parseInt(document.getElementById('width').value);\n",
335+
" let width = parseInt(document.getElementById('widthCanvas').value);\n",
404336
" \n",
405337
" // Restrict sizes to common HD resolutions\n",
406338
" if (width === 1280 || width === 1920 || width === 2560 || width === 3840) {\n",
407339
" // Calculate height based on 16:9 aspect ratio\n",
408340
" let height = Math.round(width * ASPECT_RATIO);\n",
409341
" \n",
410342
" // Set the canvas dimensions\n",
411-
" canvas.width = width;\n",
412-
" canvas.height = height;\n",
343+
" canvas.width = width * SCALE_DOWN_FACTOR;\n",
344+
" canvas.height = height * SCALE_DOWN_FACTOR;\n",
413345
" \n",
414346
" // Calculate block size as 1/20th of the scale dimensions and scale down by 50%\n",
415-
" let blockSize = Math.min(width, height) / BLOCK_SCALE_FACTOR * SCALE_DOWN_FACTOR;\n",
347+
" let blockSize = Math.min(width, height) / BLOCK_SCALE_DIVISOR;\n",
416348
" \n",
417349
" // Set/clear error messages when the value is valid\n",
418350
" document.getElementById('errorMsg').innerHTML = \"\";\n",
@@ -461,8 +393,8 @@
461393
"\n",
462394
"<!-- Input definitions -->\n",
463395
"<div>\n",
464-
" <label for=\"width\">Enter Width (1280, 1920, 2560, 3840):</label>\n",
465-
" <input type=\"number\" id=\"width\" name=\"width\" min=\"1280\" max=\"3840\" step=\"640\" value=\"1280\">\n",
396+
" <label for=\"widthCanvas\">Enter Width (1280, 1920, 2560, 3840):</label>\n",
397+
" <input type=\"number\" id=\"widthCanvas\" name=\"widthCanvas\" min=\"1280\" max=\"3840\" step=\"640\" value=\"1280\">\n",
466398
" <button onclick=\"submitScaleImg()\">Submit</button>\n",
467399
"</div>\n",
468400
"\n",
@@ -476,22 +408,24 @@
476408
"<script>\n",
477409
" // Function to validate and output the scale value\n",
478410
" function submitScaleImg() {\n",
411+
" const BLOCK_SCALE_DIVISOR = 20;\n",
412+
" const ASPECT_RATIO = 9 / 16;\n",
479413
" const SCALE_DOWN_FACTOR = 0.5;\n",
480414
" let canvas = document.getElementById('canvas');\n",
481415
" let c = canvas.getContext('2d');\n",
482-
" let width = parseInt(document.getElementById('width').value);\n",
416+
" let width = parseInt(document.getElementById('widthCanvas').value);\n",
483417
" \n",
484418
" // Restrict sizes to common HD resolutions\n",
485419
" if (width === 1280 || width === 1920 || width === 2560 || width === 3840) {\n",
486420
" // Calculate height based on 16:9 aspect ratio\n",
487421
" let height = Math.round(width * ASPECT_RATIO);\n",
488422
" \n",
489423
" // Set the canvas dimensions\n",
490-
" canvas.width = width;\n",
491-
" canvas.height = height;\n",
424+
" canvas.width = width * SCALE_DOWN_FACTOR;\n",
425+
" canvas.height = height * SCALE_DOWN_FACTOR;\n",
492426
" \n",
493427
" // Calculate block size as 1/20th of the scale dimensions and scale down by 50%\n",
494-
" let blockSize = Math.min(width, height) / BLOCK_SCALE_FACTOR * SCALE_DOWN_FACTOR;\n",
428+
" let blockSize = Math.min(width, height) / BLOCK_SCALE_DIVISOR;\n",
495429
" \n",
496430
" // Set/clear error messages when the value is valid\n",
497431
" document.getElementById('errorMsg').innerHTML = \"\";\n",
@@ -525,6 +459,24 @@
525459
" }\n",
526460
"</script>"
527461
]
462+
},
463+
{
464+
"cell_type": "markdown",
465+
"metadata": {},
466+
"source": [
467+
"### Popcorn Hack 3\n",
468+
"\n",
469+
"Try to place a square in every corner.\n"
470+
]
471+
},
472+
{
473+
"cell_type": "markdown",
474+
"metadata": {},
475+
"source": [
476+
"### Turtle / Fish HW\n",
477+
"\n",
478+
"Make the Turtle and Fish start on screen in different locations (ie Fish Center/Left, Turtle Center/Right)"
479+
]
528480
}
529481
],
530482
"metadata": {

0 commit comments

Comments
 (0)