MATCH THAT NUMBER is a typing game written using the p5.js library. where the player needs to try and match the number that projects out from the game board by typing the correct key on the keyboard before the next number comes up. You score by getting a match. You "strike" by typing the wrong number. Three strikes, and you're out. GAME OVER.
There were three main goals for this project. The first, and most important, was to reinforce, practice, and work towards fluency in core JavaScript concepts.
The second was to do so in a way that matched my strengths and sensibilities p5.js, as defined on the first line of its website, is: "a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else!" More about the history of the library and its predecssor, Processing, here.
The third motivation was to stretch myself and create something I was both excited for and scared of (because it was ambitious).
This is build 0.7. The software works, but there are a few intended features that are not there. Read more under the Roadmap heading.
This project is written using the p5.js library and primarily coded using its online code editor, which allows a user to be "up and running" trying sketches—which is how p5.js programs are referred to—in seconds.
p5.js has its own functions, order of operations, and rules, but it is built on JavaScript, so JavaScript still works within it and outside it.
Below is the original seed idea for how this project would look in its web presence. The current version is a single page. See plans for extension under Roadmap.
Tachyons CSS framework.
The motto on its homepage is:
"Create fast loading, highly readable, and 100% responsive interfaces with as little css as possible." Tachyons styles HTML elements using classes and its own CSS components.
The color scheme for the project is Combination 6 (Grenadine Pink and Deep Indigo) from Wada Sanzo's Dictionary of Color Combinations.
- Implement buttons on DOM that interact with the game sketch. In lieu of typing. Also mobile-friendlier.
- Fix random color generator so that on each 'hit' or match, a different color flashes up.
- After playing multiple times, modify game to 20 rounds & change win and lose amounts.
- Fix CSS bugs and work towards matching layout and design.
- Create and style new pages to match the original wireframe concept.
- More to be added...
Let people know how they can contribute into your project. A contributing guideline will be a big plus.
To learn p5.js I used the LinkedIn Learning platform and Chicago Public Library's subscription to the service. I'm so grateful for both.
Daniel Schiffman is the educator and developer behind The Coding Train. I looked at many of his resources and watched some of his demonstrations.
Kevin Workman of Happy Coding had a very useful page that demonstrated how to place my p5 game sketch onto my webpage by using the DOM and manipulating the setup() function within my p5 sketch.
I also referred to the Reference section on p5.js's website often, especially when creating a random color variable that I used to give the user feedback on successful matches while playing the game.
Thank you Ben Fry and Casey Reas, the creators of Processing, a Java-based Library upon which p5.js is based. Read more about its history here
As mentioned above, design thinking and execution were simplified and expedited with the aid of Tachyons and Wada Sanzo's Dictionary of Color Combinations, or better, the site that Dain Kim makes the book's color harmonies available to anyone, anywhere through the internet.
2023 © Copyright: Andrew Doak mrandrewdoak@gmail.com