LinkedInLearning · SunhyNguyen · Mar 13, 2025 · Mar 13, 2025 · Mar 14, 2025 · Mar 14, 2025
diff --git a/Practice_space_game/index.html b/Practice_space_game/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <title>Space Game</title>
+    <meta charset="UTF-8"/>
+    <script src="" defer></script>
+  </head>
+
+  <body>
+    <p>Image to use:</p>
+    <p>Canvas:</p>
+    <canvas id="myCanvas" width="1024" height="768" style="border:1px solid #d3d3d3">
+      Your browser does not support the HTML5 canvas tag.
+    </canvas>
+  </body>
+</html>
diff --git a/Practice_space_game/spaceArt/png/Background/backgroundColor.png b/Practice_space_game/spaceArt/png/Background/backgroundColor.png
diff --git a/Practice_space_game/spaceArt/png/Background/nebula.png b/Practice_space_game/spaceArt/png/Background/nebula.png
diff --git a/Practice_space_game/spaceArt/png/Background/speedLine.png b/Practice_space_game/spaceArt/png/Background/speedLine.png
diff --git a/Practice_space_game/spaceArt/png/Background/starBackground.png b/Practice_space_game/spaceArt/png/Background/starBackground.png
diff --git a/Practice_space_game/spaceArt/png/Background/starBig.png b/Practice_space_game/spaceArt/png/Background/starBig.png
diff --git a/Practice_space_game/spaceArt/png/Background/starSmall.png b/Practice_space_game/spaceArt/png/Background/starSmall.png
diff --git a/Practice_space_game/spaceArt/png/enemyShip.png b/Practice_space_game/spaceArt/png/enemyShip.png
diff --git a/Practice_space_game/spaceArt/png/enemyUFO.png b/Practice_space_game/spaceArt/png/enemyUFO.png
diff --git a/Practice_space_game/spaceArt/png/laserGreen.png b/Practice_space_game/spaceArt/png/laserGreen.png
diff --git a/Practice_space_game/spaceArt/png/laserGreenShot.png b/Practice_space_game/spaceArt/png/laserGreenShot.png
diff --git a/Practice_space_game/spaceArt/png/laserRed.png b/Practice_space_game/spaceArt/png/laserRed.png
diff --git a/Practice_space_game/spaceArt/png/laserRedShot.png b/Practice_space_game/spaceArt/png/laserRedShot.png
diff --git a/Practice_space_game/spaceArt/png/life.png b/Practice_space_game/spaceArt/png/life.png
diff --git a/Practice_space_game/spaceArt/png/meteorBig.png b/Practice_space_game/spaceArt/png/meteorBig.png
diff --git a/Practice_space_game/spaceArt/png/meteorSmall.png b/Practice_space_game/spaceArt/png/meteorSmall.png
diff --git a/Practice_space_game/spaceArt/png/player.png b/Practice_space_game/spaceArt/png/player.png
diff --git a/Practice_space_game/spaceArt/png/playerDamaged.png b/Practice_space_game/spaceArt/png/playerDamaged.png
diff --git a/Practice_space_game/spaceArt/png/playerLeft.png b/Practice_space_game/spaceArt/png/playerLeft.png
diff --git a/Practice_space_game/spaceArt/png/playerRight.png b/Practice_space_game/spaceArt/png/playerRight.png
diff --git a/Practice_space_game/spaceArt/png/shield.png b/Practice_space_game/spaceArt/png/shield.png
diff --git a/Practice_space_game/spaceArt/preview.jpg b/Practice_space_game/spaceArt/preview.jpg
diff --git a/Practice_space_game/spaceArt/readme.txt b/Practice_space_game/spaceArt/readme.txt
@@ -0,0 +1,8 @@
+ ---
+
+Space Shooter graphics by Kenney Vleugels (www.kenney.nl)
+
+You may use these graphics in personal and commercial projects.
+Credit (www.kenney.nl) would be nice but is not mandatory.
+
+ --
diff --git a/Practice_space_game/spaceArt/spaceArt.ai b/Practice_space_game/spaceArt/spaceArt.ai
diff --git a/Practice_space_game/spaceArt/spaceArt.svg b/Practice_space_game/spaceArt/spaceArt.svg
diff --git a/Practice_space_game/spaceArt/spaceArt.swf b/Practice_space_game/spaceArt/spaceArt.swf
diff --git a/Practice_space_game/spritesheet.png b/Practice_space_game/spritesheet.png
diff --git a/docs/02-html/Practice/images/plant1.png b/docs/02-html/Practice/images/plant1.png
diff --git a/docs/02-html/Practice/images/plant10.png b/docs/02-html/Practice/images/plant10.png
diff --git a/docs/02-html/Practice/images/plant11.png b/docs/02-html/Practice/images/plant11.png
diff --git a/docs/02-html/Practice/images/plant12.png b/docs/02-html/Practice/images/plant12.png
diff --git a/docs/02-html/Practice/images/plant13.png b/docs/02-html/Practice/images/plant13.png
diff --git a/docs/02-html/Practice/images/plant14.png b/docs/02-html/Practice/images/plant14.png
diff --git a/docs/02-html/Practice/images/plant2.png b/docs/02-html/Practice/images/plant2.png
diff --git a/docs/02-html/Practice/images/plant3.png b/docs/02-html/Practice/images/plant3.png
diff --git a/docs/02-html/Practice/images/plant4.png b/docs/02-html/Practice/images/plant4.png
diff --git a/docs/02-html/Practice/images/plant5.png b/docs/02-html/Practice/images/plant5.png
diff --git a/docs/02-html/Practice/images/plant6.png b/docs/02-html/Practice/images/plant6.png
diff --git a/docs/02-html/Practice/images/plant7.png b/docs/02-html/Practice/images/plant7.png
diff --git a/docs/02-html/Practice/images/plant8.png b/docs/02-html/Practice/images/plant8.png
diff --git a/docs/02-html/Practice/images/plant9.png b/docs/02-html/Practice/images/plant9.png
diff --git a/docs/02-html/Practice/index.html b/docs/02-html/Practice/index.html
@@ -0,0 +1,157 @@
+<!DOCTYPE html>
+
+<html lang="en">
+  <head>
+    <title>Welcome to my Virtual Terrarium</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="" />
+    <script src="" defer></script>
+  </head>
+
+  <body>
+    <h1>My Terrarium</h1>
+
+    <div id="page">
+      <div id="left-container" class="container">
+        <div class="plant-holder">
+          <img
+            class="plant"
+            id="plant1"
+            alt="A small plant"
+            src="./images/plant1.png"
+          />
+        </div>
+
+        <div class="plant-holder">
+          <img
+            class="plant"
+            id="plant2"
+            alt="A small cactus plant"
+            src="./images/plant2.png"
+          />
+        </div>
+
+        <div class="plant-holder">
+          <img
+            class="plant"
+            id="plant3"
+            alt="A small pink plant"
+            src="./images/plant3.png"
+          />
+        </div>
+
+        <div class="plant-holder">
+          <img
+            class="plant"
+            id="plant4"
+            alt="A small lush plant"
+            src="./images/plant4.png"
+          />
+        </div>
+
+        <div class="plant-holder">
+          <img
+            class="plant"
+            id="plant5"
+            alt="A long plant"
+            src="./images/plant5.png"
+          />
+        </div>
+
+        <div class="plant-holder">
+          <img
+            class="plant"
+            id="plant6"
+            alt="A plant"
+            src="./images/plant6.png"
+          />
+        </div>
+
+        <div class="plant-holder">
+          <img
+            class="plant"
+            id="plant7"
+            alt="A plant"
+            src="./images/plant7.png"
+          />
+        </div>
+      </div>
+
+      <div id="right-container" class="container">
+        <div class="plant-holder">
+          <img
+            class="plant"
+            id="plant8"
+            alt="A plant"
+            src="./images/plant8.png"
+          />
+        </div>
+
+        <div class="plant-holder">
+          <img
+            class="plant"
+            id="plant9"
+            alt="A plant"
+            src="./images/plant9.png"
+          />
+        </div>
+
+        <div class="plant-holder">
+          <img
+            class="plant"
+            id="plant10"
+            alt="A plant"
+            src="./images/plant10.png"
+          />
+        </div>
+
+        <div class="plant-holder">
+          <img
+            class="plant"
+            id="plant11"
+            alt="A plant"
+            src="./images/plant11.png"
+          />
+        </div>
+
+        <div class="plant-holder">
+          <img
+            class="plant"
+            id="plant12"
+            alt="A plant"
+            src="./images/plant12.png"
+          />
+        </div>
+
+        <div class="plant-holder">
+          <img
+            class="plant"
+            id="plant13"
+            alt="A plant"
+            src="./images/plant13.png"
+          />
+        </div>
+
+        <div class="plant-holder">
+          <img
+            class="plant"
+            id="plant14"
+            alt="A plant"
+            src="./images/plant14.png"
+          />
+        </div>
+      </div>
+
+      <div id="terrarium">
+        <div class="jar-top"></div>
+        <div class="jar-walls">
+          <div class="jar-glossy-long"></div>
+          <div class="jar-glossy-short"></div>
+          <div class="dirt"></div>
+          <div class="jar-bottom"></div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/docs/02-html/Practice/index_1.html b/docs/02-html/Practice/index_1.html
@@ -0,0 +1,157 @@
+<!DOCTYPE html>
+
+<html lang="en">
+  <head>
+    <title>Welcome to my Virtual Terrarium</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="" />
+    <script src="" defer></script>
+  </head>
+
+  <body>
+    <h1>My Terrarium</h1>
+
+    <div id="page">
+      <div id="left-container" class="container">
+        <div class="plant-holder">
+          <img
+            class="plant"
+            id="plant1"
+            alt="A small plant"
+            src="./images/plant1.png"
+          />
+        </div>
+
+        <div class="plant-holder">
+          <img
+            class="plant"
+            id="plant2"
+            alt="A small cactus plant"
+            src="./images/plant2.png"
+          />
+        </div>
+
+        <div class="plant-holder">
+          <img
+            class="plant"
+            id="plant3"
+            alt="A small pink plant"
+            src="./images/plant3.png"
+          />
+        </div>
+
+        <div class="plant-holder">
+          <img
+            class="plant"
+            id="plant4"
+            alt="A small lush plant"
+            src="./images/plant4.png"
+          />
+        </div>
+
+        <div class="plant-holder">
+          <img
+            class="plant"
+            id="plant5"
+            alt="A long plant"
+            src="./images/plant5.png"
+          />
+        </div>
+
+        <div class="plant-holder">
+          <img
+            class="plant"
+            id="plant6"
+            alt="A plant"
+            src="./images/plant6.png"
+          />
+        </div>
+
+        <div class="plant-holder">
+          <img
+            class="plant"
+            id="plant7"
+            alt="A plant"
+            src="./images/plant7.png"
+          />
+        </div>
+      </div>
+
+      <div id="right-container" class="container">
+        <div class="plant-holder">
+          <img
+            class="plant"
+            id="plant8"
+            alt="A plant"
+            src="./images/plant8.png"
+          />
+        </div>
+
+        <div class="plant-holder">
+          <img
+            class="plant"
+            id="plant9"
+            alt="A plant"
+            src="./images/plant9.png"
+          />
+        </div>
+
+        <div class="plant-holder">
+          <img
+            class="plant"
+            id="plant10"
+            alt="A plant"
+            src="./images/plant10.png"
+          />
+        </div>
+
+        <div class="plant-holder">
+          <img
+            class="plant"
+            id="plant11"
+            alt="A plant"
+            src="./images/plant11.png"
+          />
+        </div>
+
+        <div class="plant-holder">
+          <img
+            class="plant"
+            id="plant12"
+            alt="A plant"
+            src="./images/plant12.png"
+          />
+        </div>
+
+        <div class="plant-holder">
+          <img
+            class="plant"
+            id="plant13"
+            alt="A plant"
+            src="./images/plant13.png"
+          />
+        </div>
+
+        <div class="plant-holder">
+          <img
+            class="plant"
+            id="plant14"
+            alt="A plant"
+            src="./images/plant14.png"
+          />
+        </div>
+      </div>
+
+      <div id="terrarium">
+        <div class="jar-top"></div>
+        <div class="jar-walls">
+          <div class="jar-glossy-long"></div>
+          <div class="jar-glossy-short"></div>
+        </div>
+        <div class="dirt"></div>
+        <div class="jar-bottom"></div>
+      </div>
+    </div>
+  </body>
+</html>