The site now gets a quote from my data.json file that has all the quotes saved. Firstly it gets the difficulty that user has selected (default is easy) then it gets quote array of that difficulty and selects a random quote from that to display. I also centered the text so it looks a bit better
Log in to leave a comment
Added a caret and function for the reset button. The rest of the things doesnt have a function yet but soon it will. I also kind of blocked the hidden input by disabling the arrow keys and keeping the inputs caret at the end so the user cant accidentally go back and only be where the visible caret is. Heres a video of how it looks rn. Pls excuse my bad typing lmao 
Log in to leave a comment
I finally got the typing working. It tracks each letter typed and adds a incorrect or correct class. The backspace works correctly aswell. Took long because i put three equal signs on the null check so it only checked if it was null and not undefined so it never removed the classes when using backspace lol. When i realized i removed one = and it worked again 
Log in to leave a comment
Finished the mobile layout and the desktop layout. Tried to make it as responsive as i could but hadnt worked properly with CSS for a long long time so i was a little rusty. Took a bit much time to get this layout right even tho its a simple one.
Log in to leave a comment
doing a quick devlog. i finished the dropdown menu for difficulty and mode. Also added toggle on and off function for it that toggles the visibility by adding and removing a “show” class. also started with the actual typing area. Basically the text will go over the user input and the user input will be hidden so it looks like you are typing the letters.
Log in to leave a comment
Gonna be making a typing speed tester. i started with the layout of the page. Doing the mobile first approach.
Log in to leave a comment
Soooo i made a remake of Flappy bird in HTML5 canvas. I used classes in JS for the first time ever so both of those things took a bit to learn. I watched freecodecamps videos about Canvas so i learnt about how it worked while i was making the game. Alot of errors and tries but i made it to the end. I had alot of fun and i put alot of effort into this so i hope you like it :D.
(Video filmed on ios) I added some animations to the gameover screen. Also transition fade on every state aswell as a «flash» when the bird dies. The score button now allows you to reset your best score and the share button opens up the webshare for your device. The game is done now :D
Log in to leave a comment
Added audio that works on Safari. I tried the HTML5 Audio API (new Audio()) but it caused delays and lag because safari blocks playback until the user interacts with the page. So i researched a bit and found out about the Web Audio API. With this i can preload sounds into buffers for instant playback, but audio must be unlocked with a user interaction the first time, after that sound plays very well across the browsers i tried. The audio files arent big so shouldnt take much memory.
Log in to leave a comment
Finished creating the UI and its functions. For now the score and share buttons doesnt have any function. I made the code more separated so the UI events are in a different file from the Ui render and i fixed some glitches with the bird, pipe and UI. The menu/start screen and the get ready screen aswell as the pause and unpause works. Next up are sounds and then maybe animate the Ui to pop up different times than each other but idk yet.
Log in to leave a comment
I created the game menu UI. For now only the start button works. i changed bird physics (again lol) for better flapping. I also added sparks to the scoreboard medal like it has on the original game. The game states were hell to manage so i did rework and created a central game state manager that has all the game info so i can access them in any file by just importing one thing and check if game is paused, what screen its on etc.
Log in to leave a comment
I changed the bird physics so they match the OG flappy bird game a little more by sort of “hanging” angled upwards when flapping then rotating fast downwards again. It may not look like much changed but i did ALOT of rewowrk in the code because my game file was very cluttered so i had to separate UI logic into its own file and collisions etc into the pipe file.
Log in to leave a comment
Added a “NEW BEST” with a badge and a score saved in localstorage. also added medals where you get a bronze medal at score 10, silver on score 20, gold on 50 and platinum on 100. And made the digit 1 smaller on the score so it looks better and not wide. The game is slowly finishing.✌👌
Log in to leave a comment
since i found out how to improve the quality of assets on the canvas i decided to try out one singular spritesheet instead of so many images loading on the screen etc. The spritesheet is now almost just as good as the singular images. I sat there writing coordinates for like 30 assets on the spritesheet lol. Also changed a bit of code so it uses the new coordinates. Some things broke but i fixed them :). btw it looks better ingame than this image
Log in to leave a comment
The assets i used earlier were blurry due to scaling so i had to fix their size and pixels using piskelapp.com. I recreated the number images aswell as the scoreboard then had to test it on the game again and again with different sizes. At last i added a bird flap animation and changed the canvas code so the game looks crispier.
Log in to leave a comment
added the score logic. the number 1 on the score numbers look a bit out of place ooof
Log in to leave a comment
removed and changed some code, better pipe and bird collision interaction, game over image at the end, changed the canvas height and width. Also took hella long with try and error because some assets were low quality so i tried to make it look better in the game but didnt work so im saving that for last :(((
Log in to leave a comment
I’m working on my first project! This is so exciting. I can’t wait to share more updates as I build.
Log in to leave a comment
worked on the pipe collisions. not perfect yet but it will be :D
Log in to leave a comment
fixed and improved some code and added bird class with gravity and controls. The bird rotates when flapping and falling. no collision logic yet
Log in to leave a comment
Created the pipes with random Y positions. this took longer than expected because i was learning about Classes
Log in to leave a comment
Created a canvas and made it responsive. Added the background image, ground image and bird image, the bg and ground moves in a gameloop so it looks like its going forward.
Log in to leave a comment
Made a pong game as my proper first hardware project, I learnt more about CPP and Arduino aswell as making a wiring diagram. Very fun :D
Big wiring mess lol but i added a menu and a 2 player mode. Also added a buzzer for sounds and cleaned up code. Basically done now.
Log in to leave a comment
Created the scores logic and made it a bit more challenging. When someone loses it will shoot the ball to the winners direction. Also increased ball speed and it spawns in random position on the Y axis. Might change from potentiometers to buttons as it gets tiring to play lol also will add 2 player mode sometime.
Log in to leave a comment
Fixed collision stuff and added CPU logic. The game is now playable with an opponent. The CPU is only allowed to move once the ball is on the right side which makes the game winnable.
Log in to leave a comment
Added ball and collision logic. The ball bounces
Log in to leave a comment
Found out how to move the paddle with the potentiometer. Im learning everything new so taking some time🫣
Log in to leave a comment
Set up the libraries and the oled display and drew one rectangle to test it
Log in to leave a comment
