Breakout is a block busting game, where each level increase the challenge through increase of ball speed and more hits required to clear a level. Each block is colour coded so that each time it is hit, the block changes colour and then eventually breaks.
Using a canvas and CSS styling on a basic HTML page, I have created a completely Java Script based version of it, that could be used on sites as a break from massive amounts of information, or just as a fun, addictive game.
Breakout, the original game was released in 1976, quickly becoming a cult classic and the basis for the creation of a multitude of similar games.
[https://en.wikipedia.org/wiki/Breakout_(video_game)] "The game was a worldwide commercial success. It was among the top five highest-grossing arcade video games of 1976 in the U.S. and Japan, and among the top three in both countries for 1977."
Above is a basic wireframe design of how I wanted the website to look.
I have organised the files into specific folders; 'css', 'javascript' & 'media' relevent to each type of file. As stated earlier, the project consists of HTML, CSS and Javascript. Each written in their own files. I have not used Phaser or anything else to write this code, it is of my own writing.
- index.html - This is the loading page and where the game, instructions and leaderboard are displayed.
- breakout.css - This is where the styling for the game was originally, and I had a separate style sheet for the HTML. It made no sense to keep them separate, so I combined them.
- breakout.js - The functions and build of the game is in this file. I kept it as a single file, to improve loading times.
- background.jpg - One of my background choices for the site. I found this to be too busy for the game and caused a distraction.
- background1.jpg - Another background that I found and decided would be too busy for the game.
- CSS Validator.png
- HTML Validator.png
- ResponsiveMockup.png
- Wireframe.png
-
- Any age group, though a particular appeal to those who remember the basic game styles.
- Use to build hand-eye co-ordination
- A Gamer or casual player.
-
- A clear & concise game that is quick to load and easy to play.
- A level system that increases in difficulty each level passed.
- A webpage and game that functions as expected. All buttons behave as they should and controls act as required.
- A scoring system that allows a quick and easy way to view and track scores.
-
-
- "What is this game?"
- "How do I control this?"
-
- "Are my scores still here?"
- "Can I beat my scores from last time?"
-
- "Can I play this on any device?"
-
-
- Is the game self explanatory, is it easy to identify as a game?
- Are the methods of controlling the game clear and easy to read?
- Is the Scoreboard accessible and easy to read?
- Are the scores saved and will they update?
- Is the game and web page responsive in design?
- Does the background cause a distraction and allow all text to be easily viewed?
-
- There is a title and easily recognisable game title both on the webpage and the tab on the browser.
- The instuctions are constantly visible and in a large clear font and colour.
- The score board needs to load on page load and then again at game over.
- The score board need to update with new high scores as well as store and recall on each load.
- Use Bootstrap or CSS design to create a responsive design.
- Check the backgrounds and have people test the game, asking specifically if the background is distracting.
-
- #FFC107 Orange (1 hit left)
- #00BCD4 Cyan (2 hits left)
- #E91E63 Pink/Red (3 or more hits left)
-
- #808080 - The ball colour
- #D3D3D3 - The paddle colour
- #000000 - Background
I have used 'Google Inter' as my main font with Arial as a back up as they are both in the Sans Serif family. Using the font across the entire site has helps to keep everything simplistic and aesthetically pleasing.
Using a picture for a backgorund made everything too distracting. I have changed it to be a Radial Gradient background: radial-gradient(circle, rgba(0,17,36,0.9248291571753986) 50%, rgba(121,9,35,1) 80%, rgba(0,212,255,1) 90%) I used this colour scheme and positioning, to allow for the canvas and instructions to stay easily readable and the background to remain aesthetically pleasing.
To test this site and game, I used the usual CSS, HTML and Lighthouse checks. I also asked several peers to test the game for me. I have summurised the responses and added my solutions.
CSS Validation:
HTML Validation:
Light House Desktop Results:
Light House Mobile Results
HTML, CSS & Javascript for the design and creation of the site and game.
-
- Log in (or sign up) to Github.
- Go to the repository for this project, rhcompbuilds/CIMilestone2/
- Click the Fork button in the top right corner.
-
- Log in (or sign up) to GitHub.
- Go to the repository for this project, rhcompbuilds/CIMilestone2/ (These are private, so you will only be able to do this with my permission)
- Click on the code button, select whether you would like to clone with HTTPS, SSH or GitHub CLI and copy the link shown.
- Open the terminal in your code editor and change the current working directory to the location you want to use for the cloned directory.
- Type 'git clone' into the terminal and then paste the link you copied in step 3. Press enter.
So far, the only issue I have found is that the 'Play Again' Button covers the leaderboard. To correct this, I will move the button into the stats area of the game, so it is completely removed from the canvas.
- I have played these and emulated versions of these for years. I have enjoyed creating a similar game with this design.
- Spencer has provided me with great feedback and supported me with advice on layout and the Markdown language, by providing a reference guide.
- Thank you for your help and support.
- Amazing support and understanding throughout these last few weeks. Thank you for your help and support.
- Thank you for taking the time to test and evaluate my game verbally. It was a big help.