Skip to content

Latest commit

 

History

History
82 lines (48 loc) · 5.21 KB

README.en.md

File metadata and controls

82 lines (48 loc) · 5.21 KB
Leia este documento em português
dino-jump

Dino Jump Game

Project version: 0.1

Introduction

Hello! As a beginner who finished covering the fundamentals of HTML, CSS, and JS, I still don't feel confident enough to start creating my own portfolio page, so I decided to try something simpler first to gather some experience. And that was my idea, create a jumping game based on Google Chrome's dino game. 😂

This is my first "big" project, where I try to develop all from scratch with only my knowledge of HTML, CSS, and JS, using a minimum of tutorials when necessary. Like the repository description says, the primary objective of this project is to practice and learn more about CSS and DOM, more specifically, some advanced CSS properties like @keyframes and how the manipulation of elements with JavaScript really works.

All the assets I'm using in this project are free to download and can be found here.

If you want, you can check the game by clicking here (be aware that's still very bugged).

Below I list the bugs and errors of the current version, as well as the following steps to be taken after fixing these issues.


Issues to be fixed:

  • The character animations don't stop/freeze after the "Game-Over". If you press the jump key, it starts running again. The correct would be you won't be able to do anything until restart the game;

  • Probably because I'm using GIFs for the character when you hold the jump key, this makes the char perform two correct jumps, but then the toggle condition between run and jump GIFs breaks, locking the char on the ground and repeating the first frame of the GIF until you release the key;

  • Any hit with the rock that doesn't occur by the ground will not execute the 'death' animation. It will be stuck in the run animation;

  • Pressing the jump key after the 'death' animation will reset the char to the run animation;

  • In all my attempts to create a "Restart" screen with CSS, I couldn't make it appear over the background screen, even declaring a z-index for each element, so I did a simple and provisory button to do it reloading the page for now.


Project's next steps:

  • Set a specific keyboard key to execute the jump;

  • Add a "Start Game" screen for the game doesn't auto-start when you open the page;

  • Add a "Restart" screen for the "Game-Over" and set the R key for also do it in the middle of the gameplay;

  • Create a Scoring system;

  • Add a condition to gradually increase the game speed based on the player's points;

  • Make a game screen with adaptative width because I made the current screen for a minimized window;

  • Add sounds for the jump, points, UI buttons, and add a background music.

    *This one is a "Maybe" because I don't have the slightest idea how to do it with JS, and it looks like something complex, so I will let it for the project's end.

That's it! If you are interested in doing a similar project and want to use this repository as a base, feel free to do so!

And if you have any tips to help me, send me a message. It will be very helpful and welcome! 😀

References and Tutorials:

[Youtube] Como criar um jogo SIMPLES usando JavaScript e HTML | JavaScript para iniciantes - Tutorial made by @manualdodev.

*Audio in pt-br only.

[Article] How to Play and Pause CSS Animations with CSS Custom Properties made by @madsstoumann.


[Article] Creating an infinite CSS background image loop made by @MrConerMurphy.

By the end of this project, I intend to turn this README file into a full-written and detailed step-by-step tutorial to help other beginners interested in creating a similar project.

Leia este documento em português