This project symbolizes the beginning of our relationship with github as a platform to code and get work done.The project is supposed to help us get started with github as well as learn how to use it and code more efficiently. For our first github project we’ve created a CSS game. What the game does:
-
a welcome screen is displayed to the user for a couple of seconds before it is animated out of the screen after a delay.
-
target animations start playing in random orders, and the user can see them jumping up and down from behind a grass wall.
-
the user can click the targets (checkboxes). This will make them freeze in their current position, and they will change emoji so the user can easily see what targets are hit.
-
when a target is hit, a counter at the top of the screen will increment, so the user knows how many targets are left to shoot.
-
when all targets are hit, a css selector will become active, and display a victory page to the user. On this page there will be a button you can press to play again. This button refreshes the page, and the game resets.
The game is designed to have a minute break from daily work. User have to focus and concentrate to hit the targets and when that is done, user goes back to what he was doing before the game.
The game is also a good example on how to make a super simple but functional game using nothing but HTML and to reset the game is created with JavaScript. The elements in the game are also something that can be used to make a variety of other games if you just have a little creativity. So not only can the game be a break from daily tasks, but it is also something that can be used as inspiration and a foundation for others to try and make a simple game themselves without too much coding knowledge.
Learning how to use github has a huge advantage in our future as developers/programmers. It is a highly efficient platform and excellent for working in group projects all over the world. With github you can compare, add, discuss and propose new ideas in front of the whole team whenever you want to. Github’s control system allows you to keep track of the past changes regardless of who made them. It also allows you to work on the same code base giving room for experimentation as well as trial and error. The platform has a large community and is a free platform which makes it easy to grow and develop your own skills completely free of charge.
To get started with coding you can always start with creating your own github account. By setting up an account and downloading the app gives you the freedom to explore the site yourself and challenge yourself in a new environment. With endless possibilities and functions it is easy for beginners to get started with a project, just create a repository, make changes, commit changes and push the changes. The game itself is fairly easy to understand by breaking down the code into parts and studying each function.
As for github there’s tons of guides and information online teaching you how to use github. The game we’ve created is a basic game only requiring css. With the technology and spread of digital media it is also possible to find guides and information as well as other people/AI’s to help you.
We firstly created the whole game, and then we created a github classroom to final tune and fix the game where it needed fixing, and to finish elements that were not done yet. For us this was the most effective and best way to work, as we could do the main coding while in the same room, and then we could do the smaller changes, and fixes through github when we are not together.
The game is created only using HTML and CSS inside vscode. we were not allowed to use alot of js, this why The only bit of JavaScript is the function that refreshes the website.
Github uses “Git” as an open source projects type technology allowing everyone to create and contribute to projects. In github you can use Javascript, HTML, CSS and many more. Who maintains and contributes to the project With github, anyone can contribute to a project. Projects can be maintained and contributed to by individuals, organizations and groups of people with shared interests.
BEM: We didn´t use BEM in this project, because we didn´t have containers inside each others or childs. With the scrollytelling task in the next assignment, the BEM will be used. SASS or CSS Variables: CSS variables were used to have control on our colors and height for the targets to go up in the viewport. We used Google chrome, and got the result we wanted. We haven´t learned how to make it compatible with multiple browsers, therefor we haven´t prioritized this function.