Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/thoughtfool/pocket-squatch

A simple game concept to practice design and logic principles within the 2D world. This was a project that was developed in close partnership with my school-age daughter. She is the inspirational project-manager and creative-director that helped guide the development process.
https://github.com/thoughtfool/pocket-squatch

functional-programming handlebarsjs javascript-game keyframes-animation mongoosejs

Last synced: about 1 month ago
JSON representation

A simple game concept to practice design and logic principles within the 2D world. This was a project that was developed in close partnership with my school-age daughter. She is the inspirational project-manager and creative-director that helped guide the development process.

Awesome Lists containing this project

README

        

# Pocket Squatch

A simple game concept to practice design and logic principles within the 2D world.

![pocket-squatch-banner](assets/pocket-squatch-banner.PNG)

---

## The Challenge(s)

![Experimental-Badge](https://img.shields.io/badge/Experimental-Conceptual-informational?style=flat&logo=""&logoColor=white&color=green) ![Daughter-Driven-Development-Badge](https://img.shields.io/badge/DDD-Daughter%20Driven%20Development-informational?style=flat&logo=""&logoColor=white&color=pink)

Create a 2-D game where the player's avatar `transforms` based on a timer representing the `time of day`. Also, if the player is in possession of a magical totem, the avatar will have other transforming abilities. Use css keyframes to animate all sprites.

Another challenge is to create a _Block-Builder_ that allows the player to create new levels. The player will select from a color palette and drag the mouse over the screen, dropping colored boxes. Then when the player saves and loads the new level.

The _Level-Builder_ will simplify the blocks. This is done by reducing the number of blocks that are similar in color and are adjacent to each other. The individual blocks will merge to form one larger block. Each color also has it's own logic for use in the game (e.g., green blocks are grass and the avatar cannot pass through them).

:bulb: _This was a project that was developed in close partnership with my school-age daughter. She is the inspirational `project manager` and `creative director` that helped guide the development process._

---

### CHALLENGE ACCEPTED! (1 of 2)

###### Make a 2-D game where the player's avatar transforms based on time of day

![pocket-squatch-gameplay](assets/pocket-squatch-gameplay.gif)
https://pocketsquatch.herokuapp.com/

---

### CHALLENGE ACCEPTED! (2 of 2)

###### Make a Builder for constructing game levels

![pocket-squatch-level-builder](assets/pocket-squatch-level-builder.gif)
https://pocketsquatch.herokuapp.com/levels/block-builder/ids

---

### Technology & Tools

![Javascript](https://img.shields.io/badge/Code-Javascript-informational?style=flat&logo=Javascript&logoColor=white&color=7c11f7) ![Node](https://img.shields.io/badge/Code-Node-informational?style=flat&logo=Node.js&logoColor=white&color=7c11f7) ![ExpressJS](https://img.shields.io/badge/Code-ExpressJS-informational?style=flat&logo=Express&logoColor=white&color=7c11f7) ![Handlebars](https://img.shields.io/badge/Code-Handlebars-informational?style=flat&logo=handlebars&logoColor=white&color=7c11f7) ![Webpack](https://img.shields.io/badge/Code-Webpack-informational?style=flat&logo=Webpack&logoColor=white&color=7c11f7) ![Bash](https://img.shields.io/badge/Shell-Bash-informational?style=flat&logo=GNU-Bash&logoColor=white&color=7c11f7) ![VSCode](https://img.shields.io/badge/Editor-VSCode-informational?style=flat&logo=visual-studio-code&logoColor=white&color=7c11f7)

---

### Future Plans

- add enemy threats based on level objects
- add more complex levels with rewards
- use more refined animation for sprites
- make responsive and fix UI layout