Final demonstration of the mini game
Here's a final demonstration of what I've built for the past few weeks.
It's basically a mini game that I'm going to be playing with my church community tomorrow.
The purpose is to foster team work among all. Though the game looks easy there is a twist that requires them to work together.
Each team will take turns answering quiz questions from various genres.
Correct answer will earn them 50 golds.
They can then use the gold to build bridge. The bridge will cost 50 gold initially which is the cost of one level.
The twist happened at the third level. Building one bridge will require 300 gold instead of 50 gold.
This forces them to rethink their strategy on achieving the objective.
Instead of buikding their own bridge, the key is for them to realize that all the team need to focus and build just one bridge.
Should that happen, they will be able to clear the game within 20 questions.
After the bridge have been completed, the chest will revealed a bunch of "Octophant" which is our mascot haha!
The game will end there.
My Thoughts:
It has been a great game to build! Though simple, there were indeed some challenges that I've shared here.
But apart from that, it reinforce my understanding of how Livewire works. Given more time I would love to push the limit even more by creating more animations. But with the deadline ending today. I'm happy with what I've come up with.
I'm still quite blown away with how smooth the entire development process was. (Crossing finger nothing will go wrong tomorrow)
Coding with laravel Livewire allows me to just focus on one layer instead of multiple layers (frontend and backend)
This reaaaaly speed up my development.
Thank you for those who followed along!
Going back to other projects next week! Hopefully I could share more insights!
It's basically a mini game that I'm going to be playing with my church community tomorrow.
The purpose is to foster team work among all. Though the game looks easy there is a twist that requires them to work together.
Each team will take turns answering quiz questions from various genres.
Correct answer will earn them 50 golds.
They can then use the gold to build bridge. The bridge will cost 50 gold initially which is the cost of one level.
The twist happened at the third level. Building one bridge will require 300 gold instead of 50 gold.
This forces them to rethink their strategy on achieving the objective.
Instead of buikding their own bridge, the key is for them to realize that all the team need to focus and build just one bridge.
Should that happen, they will be able to clear the game within 20 questions.
After the bridge have been completed, the chest will revealed a bunch of "Octophant" which is our mascot haha!
The game will end there.
My Thoughts:
It has been a great game to build! Though simple, there were indeed some challenges that I've shared here.
But apart from that, it reinforce my understanding of how Livewire works. Given more time I would love to push the limit even more by creating more animations. But with the deadline ending today. I'm happy with what I've come up with.
I'm still quite blown away with how smooth the entire development process was. (Crossing finger nothing will go wrong tomorrow)
Coding with laravel Livewire allows me to just focus on one layer instead of multiple layers (frontend and backend)
This reaaaaly speed up my development.
Thank you for those who followed along!
Going back to other projects next week! Hopefully I could share more insights!
The last final touch to the game! Secret of the chest! :D
Minor adjustment to improve game performance
Complete question management!
The only thing worth mentioning in the process today is refactoring of the question modal.
There are a few types of questions.
Just a question statement, MCQ, Fill in the blank...
In order to ensure the question format can be styled separately, using polymorphism, I've extracted out various question layout to different files.
example: partials/mcq, partials/just-questions
This way, if the question is in MCQ format, it will load the mcq layout.
I'm 80% done! Almost ready for a test drive!
There are a few types of questions.
Just a question statement, MCQ, Fill in the blank...
In order to ensure the question format can be styled separately, using polymorphism, I've extracted out various question layout to different files.
example: partials/mcq, partials/just-questions
This way, if the question is in MCQ format, it will load the mcq layout.
I'm 80% done! Almost ready for a test drive!
Include choose of genre, choosing of bridge, next gold price to build bridge and much more!
Though not really a challenge, but it's something worth thinking. In this game, there are lots of modal to show to user one after another.
The method I've employed is to use a boolean variable for each of the modal.
Show if it's true.
Once done showing, set variable to false and set another variable to true.
This approach doesn't seems to be the best way. But right now it works pretty well.
With the modal replicated so many times, it's time to think about how to abstract out the modal code and be reuse throughout.
Tomorrow, I will finally be getting started at managing questions and genre.
The method I've employed is to use a boolean variable for each of the modal.
Show if it's true.
Once done showing, set variable to false and set another variable to true.
This approach doesn't seems to be the best way. But right now it works pretty well.
With the modal replicated so many times, it's time to think about how to abstract out the modal code and be reuse throughout.
Tomorrow, I will finally be getting started at managing questions and genre.
Ready for Livewire and Alpine JS!
Complete first mockup and improve name board
It's really hard to find sprites that works exactly the way you need it. It's even tougher when you need to deal with multiple resolutions.
The issues with using CSS sprites technique is that you predefined a definite height and width. For the sprites. So in the case of the bridge, this is not going to work if the screen resolution changes and the bridge will not be fully connected.
To overcome this issue, I created my own "sprite" technique using absolute image tag in a container with overflow hidden and manually adjust the position of the image I want. So if the container height increased, more portion of the bridge can be seen. This way, I manage to achieve resolution friendly sprites regardless of how many levels are the wooden planks.
After adding the sand background, I realize the fonts are quite hard to read, so decided to throw in more wooden design to bring out the text. It turn out quite well I must say. Manage to find most of the standalone PNG at https://www.pngfind.com/ Thank God!
Also improved the name board. The Team heading is now sticky. So the team header will stay even when scrolling down the name list and a second team header will take over when scrolling to the next team. Felt quite empty with just names. So added robohash https://robohash.org avatars for some freshness.
I'm very happy with how the whole thing turned out. Next week. It's time to start writing the code!
The issues with using CSS sprites technique is that you predefined a definite height and width. For the sprites. So in the case of the bridge, this is not going to work if the screen resolution changes and the bridge will not be fully connected.
To overcome this issue, I created my own "sprite" technique using absolute image tag in a container with overflow hidden and manually adjust the position of the image I want. So if the container height increased, more portion of the bridge can be seen. This way, I manage to achieve resolution friendly sprites regardless of how many levels are the wooden planks.
After adding the sand background, I realize the fonts are quite hard to read, so decided to throw in more wooden design to bring out the text. It turn out quite well I must say. Manage to find most of the standalone PNG at https://www.pngfind.com/ Thank God!
Also improved the name board. The Team heading is now sticky. So the team header will stay even when scrolling down the name list and a second team header will take over when scrolling to the next team. Felt quite empty with just names. So added robohash https://robohash.org avatars for some freshness.
I'm very happy with how the whole thing turned out. Next week. It's time to start writing the code!
Add a grass sprite and a treasure chest
I added the grass to experiment with sprites using CSS. As the entire grass area is a single div, I had to create another absolute div that is full width and full height of the grass container. Then I run a loop and insert 2500 div that has a css background of the sprites.
After which made some adjustment to the z-index to ensure the treasure chest can appear at the top.
I think it's not looking too bad. I'm just hoping I'm able to find other sprites that would match with this current tile.
After which made some adjustment to the z-index to ensure the treasure chest can appear at the top.
I think it's not looking too bad. I'm just hoping I'm able to find other sprites that would match with this current tile.
Adjust top space and insert a "scoreboard"
As i'm expecting about 18 names, it's best to set a height restraints and make it scrollable. As it become clear the purpose of this scoreboard, I'll revisit and tweak again and decide if I should make the scoreboard slide right to collapse.
Draft out the design of how it will look like.
Starting from the top, Grass | River | Ground. Black represents bridge that are built. Deep Grey represents the next bridge that needs to be built. Light grey represents bridge that is yet to be build.
Before using all the fancy tools, I figured I should just use plain HTML and Tailwind to create the markup and have a feel of how it will look like and how the
Before using all the fancy tools, I figured I should just use plain HTML and Tailwind to create the markup and have a feel of how it will look like and how the
structure will be like in preparation for a more dynamic experience.
At this point, my key consideration is that will I be able to find image/sprites that conform to the size of my bridge? What if screen sizes changes, will everything mess up? Should I use background for the image instead of image source?
This basic design is still missing some elements.
1) Scoreboard
2) Mini Games Questions
There will also be another design which serve as an external controller that players will see on their mobile.
Alot more work to go!
At this point, my key consideration is that will I be able to find image/sprites that conform to the size of my bridge? What if screen sizes changes, will everything mess up? Should I use background for the image instead of image source?
This basic design is still missing some elements.
1) Scoreboard
2) Mini Games Questions
There will also be another design which serve as an external controller that players will see on their mobile.
Alot more work to go!
Technical Planning
The entire idea behind this app is players are able to build bridge to cross over the river and eventually obtain the treasure. Though the UI is going to look like a tile based game. I dont intend to use canvas to create the app. Instead I'm going to attempt to use Laravel Livewire and AlpineJS to replicate the functionality.
Planning Livewire and AlpineJS prove to be quite a challenge. But the reason why I decided to use AlpineJS too instead of just livewire is because of the animation.
If i'm just using Livewire, I wont be able to animate the "appearance" of a bridge. So instead, I'm thinking of using Alpine to bring out the bridge but use Livewire to manage the data.
This concept is personally confusing for me. But let's see how far can I go as I start developing on this app.
Planning Livewire and AlpineJS prove to be quite a challenge. But the reason why I decided to use AlpineJS too instead of just livewire is because of the animation.
If i'm just using Livewire, I wont be able to animate the "appearance" of a bridge. So instead, I'm thinking of using Alpine to bring out the bridge but use Livewire to manage the data.
This concept is personally confusing for me. But let's see how far can I go as I start developing on this app.
I love the idea of using the TALL stack. I think there is opportunity for learning as well as teaching here. As you build cool stuff for this app you can share it with the community.
- ◄ Previous
- 1
- Next ►