Overview
Overview
Phantom Pneuma is a web mini-game built with JavaScript, HTML, & CSS. In the game, you play as a supernatural detective trying to identify the threat you encountered.
Phantom Pneuma is a web mini-game built with JavaScript, HTML, & CSS. In the game, you play as a supernatural detective trying to identify the threat you encountered.
Timeline
Timeline
Nov 27 2024 - Dec 18 2024
Nov 27 2024 - Dec 18 2024
Project
Project
Relevant Coursework - Advanced Web and Application Development
Relevant Coursework - Advanced Web and Application Development
Role
Role
Web Developer
Web Developer
Tool
Tool
VS Code
VS Code
Figma
Figma
Skills
Skills
HTML + CSS
HTML + CSS
JavaScript
JavaScript
"I'm gonna beat your game!"
- A friend of mine
"I'm gonna beat your game!"
- A friend of mine
Overview
WHat is phantom pneuma?
In Phantom Pneuma, you play as a supernatural detective, trying to collect evidences to identify the threat you're facing. If you run out of time or lose all your health, you'll be consumed by the darkness.
The game is heavily inspired by some of my favorite psychological horror titles like Phasmophobia and Demonologist, you play as a paranormal investigator entering haunted locations.
Overview
WHat is phantom pneuma?
In Phantom Pneuma, you play as a supernatural detective, trying to collect evidences to identify the threat you're facing. If you run out of time or lose all your health, you'll be consumed by the darkness.
The game is heavily inspired by some of my favorite psychological horror titles like Phasmophobia and Demonologist, you play as a paranormal investigator entering haunted locations.
Overview
WHat is phantom pneuma?
In Phantom Pneuma, you play as a supernatural detective, trying to collect evidences to identify the threat you're facing. If you run out of time or lose all your health, you'll be consumed by the darkness.
The game is heavily inspired by some of my favorite psychological horror titles like Phasmophobia and Demonologist, you play as a paranormal investigator entering haunted locations.
Gameplay
How to Play?
In Phantom Pneuma, you play as a supernatural detective, collecting evidence to identify the threat you’re facing. If you run out of time or lose all your life, you'll be consumed by the darkness.
Gameplay
How to Play?
In Phantom Pneuma, you play as a supernatural detective, collecting evidence to identify the threat you’re facing. If you run out of time or lose all your life, you'll be consumed by the darkness.
Gameplay
How to Play?
In Phantom Pneuma, you play as a supernatural detective, collecting evidence to identify the threat you’re facing. If you run out of time or lose all your life, you'll be consumed by the darkness.
Here are your basic stats of your character, once you run out of health, you lose. As the game progresses, the game will get harder, fewer tools and less time.
01
If you run out of time, you lose the round as well.
02
You start off with 5 tools at the beginning. If you use them all, you won’t be able to use any more until the next round.
03
Mark the evidence in the book and identify the treat you are facing.
04
Pick between Killer, ghost and alien, if you get it right you will get a point.
05
Hope you're lucky enough to survive another round!
06
Here are your basic stats of your character, once you run out of health, you lose.
01
If you run out of time, you lose the round.
02
You start off with 5 tools at the beginning. If you use them all, you won’t be able to use any more until the next round.
03
Mark the evidence in the book and identify the treat you are facing.
04
Pick between Killer, ghost and alien, if you get it right you will get a point.
05
Hope you're lucky enough to survive another round!
06
Here are your basic stats of your character, once you run out of health, you lose. As the game progresses, the game will get harder, fewer tools and less time.
01
If you run out of time, you lose the round as well.
02
You start off with 5 tools at the beginning. If you use them all, you won’t be able to use anymore until the next round.
03
Mark the evidence in the book and identify the treat you are facing.
04
Pick between Killer, ghost and alien, if you get it right you will get a point.
05
Hope you're lucky enough to survive another round!
06
Design
Design Process
Building a game without planning is going to be tough, so I started by creating a game flow, then moved on to Figma to start thinking of how the game will look and function.
Design
Design Process
Building a game without planning is going to be tough, so I started by creating a game flow, then moved on to Figma to start thinking of how the game will look and function.
Design
Design Process
Building a game without planning is going to be tough, so I started by creating a game flow, then moved on to Figma to start thinking of how the game will look and function.
GameFlow
GameFlow
Creating a brief game flow helped me figure out the game logic, making it much easier to code later once everything’s mapped out.
Creating a brief game flow helped me figure out the game logic, making it much easier to code later once everything’s mapped out.
Creating a brief game flow helped me figure out the game logic, making it much easier to code later once everything’s mapped out.
WireFrame
WireFrame
It’s easier to visualize the game layout with a wireframe, showing which parts players can interact with.
It’s easier to visualize the game layout with a wireframe, showing which parts players can interact with.
It’s easier to visualize the game layout with a wireframe, showing which parts players can interact with.
Hi-Fi Mockup
Hi-Fi Mockup
Creating a hi-fi mockup to finalize my UI elements before starting to code my CSS.
Creating a hi-fi mockup to finalize my UI elements before starting to code my CSS.
Creating a hi-fi mockup to finalize my UI elements before starting to code my CSS.
Development
Working on the code
During development, I encountered numerous issues, some of the obvious ones being the game wasn’t able to generate random treats correctly for each round, it kept showing the same setup every round unless I fully reloaded the page. I also ran into problems where the win and lose condition logic wasn’t set up properly. My level design wasn’t working as intended because I messed up the order of the if-else statements.
Despite all these challenges, I’m glad I managed to get the game into a playable state.
Development
Working on the code
During development, I encountered numerous issues, some of the obvious ones being the game wasn’t able to generate random treats correctly for each round, it kept showing the same setup every round unless I fully reloaded the page. I also ran into problems where the win and lose condition logic wasn’t set up properly. My level design wasn’t working as intended because I messed up the order of the if-else statements.
Despite all these challenges, I’m glad I managed to get the game into a playable state.
Development
Working on the code
During development, I encountered numerous issues, some of the obvious ones being the game wasn’t able to generate random treats correctly for each round, it kept showing the same setup every round unless I fully reloaded the page. I also ran into problems where the win and lose condition logic wasn’t set up properly. My level design wasn’t working as intended because I messed up the order of the if-else statements.
Despite all these challenges, I’m glad I managed to get the game into a playable state.
Final Product
Final Product
If you want to try out the game, feel free to click on the link below. I’d love to hear your feedback on it.
If you want to try out the game, feel free to click on the link below. I’d love to hear your feedback on it.
If you want to try out the game, feel free to click on the link below. I’d love to hear your feedback on it.
Reflection
things to improve~
Lack of difficulty progression
This is my first time creating a web game, so it’s definitely not perfect. I invited my friends to try out my game, and most of them enjoyed playing it and would love to see more content added to it. Some of them pointed out issues they encountered during the gameplay. The current version only has around 5 levels, and the game doesn’t get harder after reaching level 20, so they’d like to see more variation and challenge after that point.
Some rounds are relying on luck
They also ran into situations where all the evidence pointed to two different targets, leaving them to take a lucky guess between the two without any other choices. They said they’re not fans of relying on luck to win the game.
Missing keyboard shortcuts
Some also suggested adding keyboard shortcuts to toggle the evidence book, so they wouldn’t have to use the mouse to open and close it every time.
Reflection
things to improve~
Lack of difficulty progression
This is my first time creating a web game, so it’s definitely not perfect. I invited my friends to try out my game, and most of them enjoyed playing it and would love to see more content added to it. Some of them pointed out issues they encountered during the gameplay. The current version only has around 5 levels, and the game doesn’t get harder after reaching level 20, so they’d like to see more variation and challenge after that point.
Some rounds are relying on luck
They also ran into situations where all the evidence pointed to two different targets, leaving them to take a lucky guess between the two without any other choices. They said they’re not fans of relying on luck to win the game.
Missing keyboard shortcuts
Some also suggested adding keyboard shortcuts to toggle the evidence book, so they wouldn’t have to use the mouse to open and close it every time.
Reflection
things to improve~
Lack of difficulty progression
This is my first time creating a web game, so it’s definitely not perfect. I invited my friends to try out my game, and most of them enjoyed playing it and would love to see more content added to it. Some of them pointed out issues they encountered during the gameplay. The current version only has around 5 levels, and the game doesn’t get harder after reaching level 20, so they’d like to see more variation and challenge after that point.
Some rounds are relying on luck
They also ran into situations where all the evidence pointed to two different targets, leaving them to take a lucky guess between the two without any other choices. They said they’re not fans of relying on luck to win the game.
Missing keyboard shortcuts
Some also suggested adding keyboard shortcuts to toggle the evidence book, so they wouldn’t have to use the mouse to open and close it every time.
Summary
Summary
Overall, it’s been a valuable lesson and hands-on experience creating a web game, and I’ll definitely take what I’ve learned into my next project.
Overall, it’s been a valuable lesson and hands-on experience creating a web game, and I’ll definitely take what I’ve learned into my next project.
Overall, it’s been a valuable lesson and hands-on experience creating a web game, and I’ll definitely take what I’ve learned into my next project.
Reflections
Next Project
Phantom Pneuma
A web mini-game where you play as a supernatural detective
Reflections
Next Project
Phantom Pneuma
A web mini-game where you play as a supernatural detective
Reflections
Next Project
Phantom Pneuma
A web mini-game where you play as a supernatural detective