i'm trying

johyunjihyunji · Oct 13, 2024 · 230c53d · 230c53d
1 parent c2b5719
commit 230c53d
Show file tree

Hide file tree

Showing 12 changed files with 101 additions and 33 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/index.html b/index.html
@@ -10,6 +10,7 @@
   <body>
     <main>
     </main>
+    <script src="star.js"></script>
     <script src="sketch.js"></script>
   </body>
 </html>
diff --git a/leftFrame.png b/leftFrame.png
diff --git a/rightFrame.png b/rightFrame.png
diff --git a/sketch.js b/sketch.js
@@ -1,43 +1,67 @@
-let stillFrame
-let speed = 5 
-let rightDirection = true
-let curPos = 30
-let frameCount = 0
+let stillFrame, runningGif;
+let speed = 5;
+let direction = 0; // -1 for left, 0 for still, 1 for right
+let curPos;
+
+let stars = [];
+const numStars = 100;
+let starImages;
 
 function preload() {
-  stillFrame = loadImage('stillFrame.png')
-  rightFrame = loadImage('rightFrame.png')
-  leftFrame = loadImage('leftFrame.png') 
+    stillFrame = loadImage('./static/stillFrame.png');
+    runningGif = loadImage("./static/runFrame.gif");
+    yellowStarImage = loadImage('./static/yellow_star.png');
+    pinkStarImage = loadImage('./static/pink_star.png');
 }
 
 function setup() {
-  createCanvas(600, 200)
-  curFrame = stillFrame;
+    //canvas = createCanvas(900, 600);
+    canvas = createCanvas(windowWidth, windowHeight);
+    centerCanvas();
+    imageMode(CENTER);
+    curPos = width / 2;
+
+    // Create stars for background
+    for (let i = 0; i < numStars; i++) {
+        stars.push(new Star());
+    }
+    starImages = [pinkStarImage, yellowStarImage];
+}
+
+function centerCanvas() {
+    let x = (windowWidth - width) / 2;
+    let y = (windowHeight - height) / 2;
+    canvas.position(x, y);
 }
+
 function draw() {
-  background('#87CEEB')
-
-  let moving = false
-
-  if (keyIsDown(RIGHT_ARROW)) {
-    curPos += speed
-    rightDirection = true
-    moving = true
-  } else if (keyIsDown(LEFT_ARROW)) {
-    curPos -= speed
-    rightDirection = false
-    moving = true
-  }
-
-  push()
-  if (moving) {
-    if (rightDirection) {
-      image(rightFrame, curPos, height - rightFrame.height - 30)
+    background('#010101');
+
+    // Check for key presses
+    if (keyIsDown(RIGHT_ARROW)) {
+        direction = 1;
+    } else if (keyIsDown(LEFT_ARROW)) {
+        direction = -1;
+    } else {
+        direction = 0;
+    }
+
+    // Move and display stars
+    updateAndDisplayStars(stars, direction !== 0, -direction, starImages);
+
+    // Calculate y position to place the bottom of the image at the bottom of the canvas
+    let yPos = height - (stillFrame.height * 0.4/ 2);
+
+    // Display character
+    push();
+    if (direction !== 0) {
+        // Running
+        translate(curPos, yPos - 30);
+        scale(direction, 1); // Flip horizontally if moving left
+        image(runningGif, 0, 0, runningGif.width * 0.37, runningGif.height * 0.37);
     } else {
-      image(leftFrame, curPos, height - leftFrame.height - 30)
+        // Standing still
+        image(stillFrame, curPos, yPos - 30, stillFrame.width * 0.37, stillFrame.height * 0.37);
     }
-  } else {
-    image(stillFrame, curPos, height - stillFrame.height - 5)
-  }
-  pop()
+    pop();
 }
diff --git a/star.js b/star.js
@@ -0,0 +1,43 @@
+class Star {
+    constructor() {
+        this.x = random(10, width);
+        this.y = random(10, height);
+        this.size = random(15, 40);
+        this.speed = random(1, 3);
+    }
+
+    move(direction) {
+        // Move stars in the opposite direction of character movement
+        if (direction > 0) {
+            this.x += this.speed;
+        } else {
+            this.x -= this.speed;
+        }
+
+        // Wrap around the screen
+        if (this.x > width) this.x = 0;
+        if (this.x < 0) this.x = width;
+    } 
+
+    render(starImages) {
+        if (starImages && starImages.length > 0) {
+            let starIndex = floor(random(starImages.length));
+            let starImage = starImages[starIndex];
+            if (starImage) {
+                push();
+                imageMode(CENTER);
+                image(starImage, this.x, this.y, this.size, this.size);
+                pop();
+            }
+        }
+    }
+}
+
+function updateAndDisplayStars(stars, moving, direction, starImages) {
+    for (let sparklestar of stars) {
+        if (moving) {
+            sparklestar.move(direction);
+        }
+        sparklestar.render(starImages);
+    }
+}
diff --git a/static/.DS_Store b/static/.DS_Store
diff --git a/static/pink_star.png b/static/pink_star.png
diff --git a/static/runFrame.gif b/static/runFrame.gif
diff --git a/static/stillFrame.png b/static/stillFrame.png
diff --git a/static/yellow_star.png b/static/yellow_star.png
diff --git a/stillFrame.png b/stillFrame.png
-Original file line number
+Diff line change
@@ Expand Up / @@ -10,6 +10,7 @@ @@
       <body>
         <main>
         </main>
+        <script src="star.js"></script>
         <script src="sketch.js"></script>
       </body>
     </html>