final

README.md

@@ -1,15 +1,26 @@
-*Due to file size limitations, only the source code and README.md are included in the submitted zip file. Please pull the full repository from the link below to access all project files*
-
-*http://git.prototyping.id/20230412/individual_project.git*
-
-*If you do not have Markdown Preview Enhanced installed, the Mermaid diagrams may not be visible in the preview. In that case, please refer to the `README.pdf` file below.*
-
 # Personal Information
 - **Name:** Chaebean Yang  
 - **ID:** 20230412  
 - **Email:** kazed0102@kaist.ac.kr  
 
-*If you do not have Markdown Preview Enhanced installed, the Mermaid diagrams may not be visible in the preview. In that case, please refer to the `README.pdf` file below.*
+
+
+# Notice
+Due to file size limitations, only the source code and README.md are included in the submitted zip file. Please pull the full repository from the link below to access all project files.
+
+To install dependencies, navigate to the project root directory and run:
+
+http://git.prototyping.id/20230412/individual_project.git
+
+```javascript
+cd svelteP5play
+npm install
+npm run dev
+```
+
+If you do not have Markdown Preview Enhanced installed, the Mermaid diagrams may not be visible in the preview. In that case, please refer to the `README.pdf` file below.
+
+If you do not have Markdown Preview Enhanced installed, the Mermaid diagrams may not be visible in the preview. In that case, please refer to the `README.pdf` file below.
 
 
 

package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "svelteP5Play-main",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}

sveltep5play/src/screens/GameClearScreen.svelte

@@ -9,6 +9,7 @@
 </script>
 
 <div class="start-screen">
+  <img src ='/assets/gameclear.png' alt="gameclear-img" class="gameclear-img">
   <h1>Game Clear</h1>
   <button on:click={handleClear}>Try Again</button>
 </div>
@@ -20,23 +21,63 @@
     justify-content: center;
     height: 100%;
     width: 100%;
-    background-color: #222;
+    background-color: #210140;
-    color: white;
+    color: #18a48e;
     padding: 20px;
+    align-items: center;
   }
 
   button {
+    position: relative;
     display: block;
-    margin: 20px auto 0;
+    margin: 0;
-    padding: 10px 20px;
+    padding: 4px;
-    font-size: 1.2rem;
+    width: fit-content;
-    width: 200px;
     cursor: pointer;
+    font-size: 1.2rem;
     text-align: center;
+    background-color: transparent;
+    color: white;
+    border: none;
+    font-family: 'Aztec';
+    justify-content: center;
+    align-items: center;
+  }
+
+  button::before,
+  button::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    width: 24px;
+    height: 24px;
+    background-image: url("/assets/obstacle.png");
+    background-size: cover;
+    opacity: 0;
+    transform: translateY(-50%);
+  }
+
+  button::before {
+    left: -30px;
+  }
+
+  button::after {
+    right: -30px;
+  }
+
+  button:hover::before,
+  button:hover::after {
+    opacity: 1;
   }
 
   h1 {
     text-align: center;
     margin: 20px;
   }
+
+  .gameclear-img {
+    width: 300px;
+    height: auto;
+    align-self: center;
+  }
 </style>

sveltep5play/src/screens/GameOverScreen.svelte

@@ -14,6 +14,7 @@
 </script>
 
 <div class="gameover-screen">
+  <img src ='/assets/gameover.png' alt="gameover-img" class="gameover-img">
   <h1>Game Over</h1>
   <div class="buttons">
     <button on:click={handleRetry}>Retry</button>
@@ -28,8 +29,8 @@
     justify-content: center;
     height: 100%;
     width: 100%;
-    background-color: #222;
+    background-color: #210140;
-    color: white;
+    color: #18a48e;
     padding: 20px;
   }
 
@@ -86,4 +87,10 @@
     text-align: center;
     margin: 20px;
   }
+
+  .gameover-img {
+    width: 600px;
+    height: auto;
+    align-self: center;
+  }
 </style>

sveltep5play/src/screens/StartScreen.svelte

@@ -10,7 +10,11 @@
 
 <div class="start-screen">
   <div class="title">
-    <h1>QUETZALCOATL</h1>
+    <div class="big">
+      <img src="/assets/quetzalcoatl.png" alt="left icon" class="title-icon left" />
+      <h1>QUETZALCOATL</h1>
+      <img src="/assets/quetzalcoatl.png" alt="right icon" class="title-icon right" />
+    </div>
     <h2>The Fifth Sun</h2>
   </div>
   <button on:click={handleStart}>Start Game</button>
@@ -23,8 +27,8 @@
     justify-content: center;
     height: 100%;
     width: 100%;
-    background-color: #26071B;
+    background-color: #210140;
-    color: #BF2A45;
+    color: #18a48e;
     padding: 40px;
   }
 
@@ -71,7 +75,24 @@
   }
 
   .title {
-    margin: 0;
+    margin: 4px;
+  }
+
+  .big {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    margin-bottom: 20px;
+  }
+
+  .title-icon {
+    width: 64px; 
+    height: auto;
+  }
+
+  .title-icon.left {
+    transform: scaleX(-1);
   }
 
   h1 {
@@ -83,5 +104,8 @@
   h2 {
     text-align: center;
     margin: 0;
+    color: #eef251;
+    font-size: 2.4rem;
   }
-</style>
+</style>
+

sveltep5play/src/sketch.js

@@ -30,7 +30,7 @@ export function createSketch(p, onGameData) {
   //game state variables
   let life = 3;
   let score = 0;
-  let speed = 8;
+  let speed = 7;
   let obstacles = [];
   let obstacleInterval = 100;
   let walls = [];
@@ -86,7 +86,7 @@ export function createSketch(p, onGameData) {
     newY = p.constrain(newY, 0, p.floor(p.height / cellSize) - 1);
 
     //overlap check
-    const overlap = [...snake, ...walls, ...items].some(seg => seg.x == newX && seg.y == newY);
+    const overlap = [...snake, ...walls].some(seg => seg.x == newX && seg.y == newY);
     if (overlap) return;
 
     obstacles = [{x: newX, y: newY, hit: null, time: p.frameCount}];
@@ -141,7 +141,7 @@ export function createSketch(p, onGameData) {
     updateGameData();
 
     let grow = growNext;
-    growNext = false;
+    growNext = 0;
 
     const head = snake[0];
     const tail = snake[snake.length - 1];
@@ -173,7 +173,7 @@ export function createSketch(p, onGameData) {
         x: tail.x + dirTail.x,
         y: tail.y + dirTail.y
       };
-      
+
       if(dirHead.x !== 0 || dirHead.y !== 0) {
         snake.unshift(newHead);
 
@@ -199,25 +199,27 @@ export function createSketch(p, onGameData) {
           return true;
         });
 
-        if(growNext > 0) {
+        if(!growNext) snake.pop();
-          growNext -= 1;
+        growNext = false;
-        }
+      }
-        else {
+      else if (dirTail.x !== 0 || dirTail.y !== 0) {
-          snake.pop();
+        snake.push(newTail);
+        if (!growNext) {
+          snake.shift();
+          growNext = false;
         }
       }
-    }
       
-    //collision test
+      //collision test
-    if (snake.length >= 2) {
+      if (snake.length >= 2) {
-      const updatedHead = snake[0];
+        const updatedHead = snake[0];
-      const updatedTail = snake[snake.length - 1];
+        const updatedTail = snake[snake.length - 1];
-      if (updatedHead.x == updatedTail.x && updatedHead.y == updatedTail.y) {
+        if (updatedHead.x == updatedTail.x && updatedHead.y == updatedTail.y) {
-        gameState = "over";
+          gameState = "over";
-        return;
+          return;
+        }
       }
     }
-    
 
     ////GET ITEMS////
 
@@ -410,40 +412,42 @@ export function createSketch(p, onGameData) {
 
   //operating snake
   p.keyPressed = () => {
-    const key = p.key.toLowerCase();
+    // Head
-
     if (p.keyCode === p.LEFT_ARROW && !(dirHead.x === 1 && dirHead.y === 0)) {
       dirHead = {x: -1, y: 0};
+      dirTail = {x: 0, y: 0}; // stop tail
     }
     if (p.keyCode === p.RIGHT_ARROW && !(dirHead.x === -1 && dirHead.y === 0)) {
       dirHead = {x: 1, y: 0};
+      dirTail = {x: 0, y: 0};
     }
     if (p.keyCode === p.UP_ARROW && !(dirHead.x === 0 && dirHead.y === 1)) {
       dirHead = {x: 0, y: -1};
+      dirTail = {x: 0, y: 0};
     }
     if (p.keyCode === p.DOWN_ARROW && !(dirHead.x === 0 && dirHead.y === -1)) {
       dirHead = {x: 0, y: 1};
+      dirTail = {x: 0, y: 0};
+    }
+
+    // Tail
+    if (p.key === 'a' && !(dirTail.x === 1 && dirTail.y === 0)) {
+      dirTail = {x: -1, y: 0};
+      dirHead = {x: 0, y: 0}; // stop head
+    }
+    if (p.key === 'd' && !(dirTail.x === -1 && dirTail.y === 0)) {
+      dirTail = {x: 1, y: 0};
+      dirHead = {x: 0, y: 0};
+    }
+    if (p.key === 'w' && !(dirTail.x === 0 && dirTail.y === 1)) {
+      dirTail = {x: 0, y: -1};
+      dirHead = {x: 0, y: 0};
+    }
+    if (p.key === 's' && !(dirTail.x === 0 && dirTail.y === -1)) {
+      dirTail = {x: 0, y: 1};
+      dirHead = {x: 0, y: 0};
     }
   };
-   
-  function handleKeyDown(e) {
-    const key = e.key.toLowerCase();
-  
-    if (key === 'a' && !(dirTail.x === 1 && dirTail.y === 0)) {
-      dirTail = {x: -1, y: 0};
-    }
-    if (key === 'd' && !(dirTail.x === -1 && dirTail.y === 0)) {
-      dirTail = {x: 1, y: 0};
-    }
-    if (key === 'w' && !(dirTail.x === 0 && dirTail.y === 1)) {
-      dirTail = {x: 0, y: -1};
-    }
-    if (key === 's' && !(dirTail.x === 0 && dirTail.y === -1)) {
-      dirTail = {x: 0, y: 1};
-    }
-  }
-  
-  window.addEventListener('keydown', handleKeyDown);
 }