20230412/individual_project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

final

Browse Source
This commit is contained in:
Chaebean Yang 2025-05-11 21:16:23 +09:00
parent 55c3d57129
commit 0771b46da3
7 changed files with 152 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
README.md
View File

@ -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.

BIN
README.pdf
View File

Binary file not shown.

6
package-lock.json generated Normal file
View File

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

53
sveltep5play/src/screens/GameClearScreen.svelte
View File

@ -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;
color: white;
background-color: #210140;
color: #18a48e;
padding: 20px;
align-items: center;
}
button {
position: relative;
display: block;
margin: 20px auto 0;
padding: 10px 20px;
font-size: 1.2rem;
width: 200px;
margin: 0;
padding: 4px;
width: fit-content;
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>

11
sveltep5play/src/screens/GameOverScreen.svelte
View File

@ -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;
color: white;
background-color: #210140;
color: #18a48e;
padding: 20px;
}
@ -86,4 +87,10 @@
text-align: center;
margin: 20px;
}
.gameover-img {
width: 600px;
height: auto;
align-self: center;
}
</style>

34
sveltep5play/src/screens/StartScreen.svelte
View File

@ -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;
color: #BF2A45;
background-color: #210140;
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>

82
sveltep5play/src/sketch.js
View File

@ -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) {
growNext -= 1;
}
else {
snake.pop();
if(!growNext) snake.pop();
growNext = false;
}
else if (dirTail.x !== 0 || dirTail.y !== 0) {
snake.push(newTail);
if (!growNext) {
snake.shift();
growNext = false;
}
}
}
//collision test
if (snake.length >= 2) {
const updatedHead = snake[0];
const updatedTail = snake[snake.length - 1];
if (updatedHead.x == updatedTail.x && updatedHead.y == updatedTail.y) {
gameState = "over";
return;
//collision test
if (snake.length >= 2) {
const updatedHead = snake[0];
const updatedTail = snake[snake.length - 1];
if (updatedHead.x == updatedTail.x && updatedHead.y == updatedTail.y) {
gameState = "over";
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);
}