A simple breakout game created using HTML, CSS and Javascript

Dhanush

Last update: Nov 27, 2022

Overview

BreakOut Game

This game is created using HTML, CSS and Javascript

Game Overview

The game would consist of 3 lives in order to clear out all the blocks.
Try and break all the blocks to win.
With each fall, the number of lives gets reduced. If all the lives are lost, then the game is over.
The board at the bottom has to be moved horizontally, so that the ball does not touch the ground.

Controls

Move mouse to control the paddle

Created with

Feel free to contribute for better designs and improvements ✌️ Let's play the game, drop ⭐ if you liked it.

Thanks for dropping by. 🤝

Comments

Collision detection allows ball to partially go through bricks

When watching the gif in the readme and trying out the game, I noticed that half of the ball could go through a brick before the game recognizes that it made contact, and a ball hitting a corner of a brick would not collide at all. If it's alright, I'm going to work on a PR to fix this behavior.

opened by tygee713 2
Making minor changes to HTMl for validation. Making some changes to C…

#37

Hello! I made a few changes:

1: I used https://validator.w3.org/ to validate the HTML and made some minor changes.

2: I used https://wave.webaim.org/ to make some other changes to CSS to improve the contrast between colors and font size.

(I also figured out how to make the ball change random colours, but not all of them are good contrast so I left this commented out.)
enhancement hacktoberfest

opened by adam-weiler 1
W3C Valid HTML and Accessibility

Hey; I'm wondering if I can work on making the HTML W3C Valid?

I also noticed there's some Accessibility Contrast Issues that I can try to improve as well.

opened by adam-weiler 1
Fix the ball keeps bouncing on the same points

This should fix #31 . Add a function that generates random values between -0.4 and 0.4 when the ball bounces off the sidewalls and add to vertical speed.

opened by dani0105 1
Update README.md file
Update the README.md file by including the following:

The technologies used to create the game.

Latest images/gifs of the game.

Rules of the game / How the game is played.

Features of the game.
opened by selemondev 0
Can the popups be customised?

Currently after the game is played, either lost or won the popup is just a normal prompt

Can this be customised with html or css & make it to look better
enhancement good first issue hacktoberfest

opened by DhanushNehru 3

A simple breakout game created using HTML, CSS and Javascript

Related tags

Overview

BreakOut Game

Controls

Comments

Collision detection allows ball to partially go through bricks

Making minor changes to HTMl for validation. Making some changes to C…

W3C Valid HTML and Accessibility

Fix the ball keeps bouncing on the same points

Update README.md file

Can the popups be customised?

Owner

Dhanush

This is a Tic Tac Toe game built with HTML, CSS, and JavaScript. It is a simple and fun game where two players take turns marking X and O on a 3x3 grid.

Built for fun and game activities! you can submit scores of players, create a new game, and refresh to see who is on top of the leaderboard. It was built with JavaScript, HTML, and CSS. Thanks to the central LeaderBoard API service all data is preserved

A simple leaderboard project made while a student in Microverse using API to get scores for a game, JavaScript, HTML and basic CSS

This project is a group Project created using Poke Api, HTML, CSS and JavaScript

In this project, we built a simple HTML list of To Do tasks. This simple web page was created using webpack and served by a webpack dev server.

Code Playground is a online application for testing and showcasing user-created and collaborational HTML, CSS and JavaScript code snippets

Simple Library implemented using HTML, CSS and JavaScript. This is a simple implementation of JavaScript Modules of ES6.

Keep track of your bookshelf with this dynamic list, created with HTML, CSS and populated by JavaScript.

"To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete. It is created with HTML , CSS , JS and webpack and NPM.

Social-Media-Dashboard - RESPONSIVE Dashboard for social media created with JS, HTML and CSS and with the ability to switch between DARK THEME and LIGHT THEME

Keep a track of all the tasks you need to do and Check off ones you have completed - Created using HTML, SCSS, JavaScript and Webpack.

Card IDE (CIDEr) - Design game cards using HTML/Handlebars, CSS, and tabular data

An Awesome Toggle Menu created with HTML,CSS,JQuery,font-awesome and line by line comment.

created mac OS desktop with HTML, CSS, JS 😀

This is a project based on a game Leaderboard. You can interact with an API inserting your user name and score. Built with HTML, CSS, JavaScript and WEBPACK

This is an educational and simple website that displays a list of books and allows you to add and remove books from that list built with HTML, CSS, JavaScript. The goal is to make it more organized by using modules and practice the ES6 syntax in the first Module

This project contains a leader board for a game which contains players name and list and store them on API build with HTML, CSS, JS and API

A simple to do list webpage where you can log the daily tasks you have to do, mark them as checked, modify them, reorder them and remove them. Made using HTML, CSS and JavaScript.

Simple weather app written in HTML, CSS, and JavaScript using the OpenWeather API for fetching weather and geolocation information