How it was – Documentation

Monday,15.01.2024

Introduction from Markus Seidl
I’m a complete beginner in Javascript so I started with the game design part
researched about art style for player character, enemy and obstacles
researched about screen sizes for the game (which screen sizes for player, enemy, obstacle, game screen)
started to create spritesheets (player, enemy, obstacle) and game screen design
chosen designstyle: Pixelart
- watching tutorial for pixelart on the program Procreate (Ipad):
  https://www.youtube.com/watch?v=vwgacGe-ei0&t=74s

Tuesday, 16.01.2024

watched Javascript tutorials on Youtube
- JavaScript Side Scroller Game Tutorial:
  https://www.youtube.com/watch?v=7JtLHJbm0kA
- Learn JavaScript - Full Course for Beginners
  https://www.youtube.com/watch?v=PkZNo7MFNFg

Wednesday, 17.01.2024

created example background with Chat GPT
started to program with WebStorm and built the basic code from the tutorial »JavaScript Side Scroller Game Tutorial«
- each object has it’s own class (player, enemy, crystal, background)

Thursday, 18.01.2024

coded moving background (total size 8000x400 – game screen 800x400) and implemented player spritesheet (run) and first version of the enemy spritesheet in my code
implemented logic of player to moving background:
- if end of background is reached then show win text
implemented logic of player with enemy’s and crystal’s
- if player collides with enemy/crystal then show game over text
implemented start screen text (before game starts to run)

Friday, 19.01.2024

created ground for game on Procreate and edited in Photoshop
implemented ground in game
tried to implement second and third level. This task took the whole day without success :(

Monday, 22.01.2024

tried again to implement a level… again without any success. At this point in the afternoon, I was really frustrated so I changed my focus to the design area and painted a new game background on Procreate/Photoshop and recolored the enemy’s appearance in Photoshop

Tuesday, 23.01.2024

tried again to implement another level with the help of Chat GPT. I could finally do it! But as soon this problem got solved the next problem came up. The second level (blue) was moving way faster than the first level red and the result of the console was showing same speeds for each level. I couldn’t find the problem. But with the help from Florian I could debug it. The problem was that I started another game loop in my restart function. My motivation was back!
drew the final screens (800x400 images) on Procreate (used font »Chalkduster«) and replaced them in the code with the current text screens (start screen, level change screen, game over screen and win screen)
edited the general game background in Photoshop and implemented it in the CSS file

Wednesday, 24.01.2024

fine tuning intervals of enemy’s
- Level 1 Red: only red enemy’s
- Level 2 Blue: blue enemy’s and blue crystal’s
started to create ePortfolio in Mahara (making screenshots, creating gif’s of my spritesheets, rewrited game and story synopsis)

Thursday, 25.01.2024

created Pitch presentation of the game and uploaded it on MS teams
checked again the code of all files as preparation for final exam talk on 30.01.2024
uploaded game on FHSTP Cloud

Friday, 26.01.2024

Pitch presentation :)

Personal conclusion

Designing the game's various screens was a great experience, as my passion is truly in art and design. I discovered that crafting pixel characters is quite challenging – it's tougher than it seems! The coding part, particularly with JavaScript, posed the greatest challenge. It introduced me to an entirely new approach to problem-solving and logical thinking. Over these 10 days, there were times when I felt really frustrated, but I'm determined not to give up. Learning new skills takes time, and I'm committed to do this journey.

Documentation of Creative Code Lab 1 WS 23 (Game "Lost Soul")

Kopieren bestätigen