This repo is for my project for the 3rd year module Graphics programming, which I have been using HTML Canvas to design a breakout2D game to show my understanding of how you can use the canvas to design graphical programs with just HTML5/JS. The project will show my learning outcome and include technologies such as HTML Canvas, JavaScript Animation, Transformations among a few more.
The aims of the project are for me to learn and show my understanding of how HTML5 and other technologies can be used to visualize data with a small amount of code on a web page by using different technologies.
- Download a zip of repo or use
git clone
. - Open the directory in the location it has been downloaded to.
- Open
project.html
in a web browser such aschrome
. - Use the
right/left
keys on the keyboard to move the paddle. - Press the
enter
key to start the game. - Break all of the blocks to win the game.
- There is an issue where the ball is getting stuck on the bottom of the paddle buggy fashion and then releasing at a very high speed.
- Another issue I have noticed is the ball is not changing direction when it is in a collision with two blocks.
- A large part of my knowledge came from my course work however I found the MDN very usefull
- The game idea was based on the breakout game on the MDN
- I used a webapp called dillenger.io to created this documentation.