Brick Breaker

Developer
Jeff Scott Ward
Size
3,547 Kb
Views
87,032
  1. Brick Breaker Previews
  2. Brick Breaker HTML Codes
  3. Brick Breaker CSS Codes
  4. Brick Breaker JS Codes

How do I make an brick breaker?

Work in progress.... What is a brick breaker? How do you make a brick breaker? This script and codes were developed by Jeff Scott Ward on 28 August 2022, Sunday.

Brick Breaker Previews
IQ Test

Brick Breaker - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Brick Breaker</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @keyframes fall { 0% { opacity: 1; transform: translateY(0); display: block; } 100% { opacity: 0; transform: translateY(100px); display: none; }
}
.bricks { list-style: none;
}
.bricks .brick { position: relative; top: 0; background: #04BFBF; width: 60px; height: 20px; display: inline-block; border-radius: 5px; box-shadow: inset 0px 0px 20px black;
}
.bricks .brick:hover { cursor: pointer;
}
.bricks .brick.fall { animation: fall 0.8s ease-in-out 1; animation-direction: normal; animation-fill-mode: forwards;
}
#ball { width: 10px; height: 10px; background: black; border-radius: 50%; position: absolute; bottom: 10%; left: 50%; margin-left: -5px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<ul class="bricks"> <li class="brick"></li> <li class="brick"></li> <li class="brick"></li> <li class="brick"></li> <li class="brick"></li> <li class="brick"></li> <li class="brick"></li> <li class="brick"></li> <li class="brick"></li> <li class="brick"></li> <li class="brick"></li> <li class="brick"></li> <li class="brick"></li> <li class="brick"></li> <li class="brick"></li> <li class="brick"></li> <li class="brick"></li> <li class="brick"></li> <li class="brick"></li> <li class="brick"></li> <li class="brick"></li> <li class="brick"></li> <li class="brick"></li> <li class="brick"></li> <li class="brick"></li> <li class="brick"></li> <li class="brick"></li> <li class="brick"></li> <li class="brick"></li> <li class="brick"></li> <li class="brick"></li> <li class="brick"></li> <li class="brick"></li> <li class="brick"></li> <li class="brick"></li> <li class="brick"></li> <li class="brick"></li> <li class="brick"></li> <li class="brick"></li> <li class="brick"></li> <li class="brick"></li> <li class="brick"></li> <li class="brick"></li> <li class="brick"></li> <li class="brick"></li> <li class="brick"></li> <li class="brick"></li> <li class="brick"></li> <li class="brick"></li> <li class="brick"></li>
</ul>
<div id="ball"></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Brick Breaker - Script Codes CSS Codes

@keyframes fall { 0% { opacity: 1; transform: translateY(0); display: block; } 100% { opacity: 0; transform: translateY(100px); display: none; }
}
.bricks { list-style: none;
}
.bricks .brick { position: relative; top: 0; background: #04BFBF; width: 60px; height: 20px; display: inline-block; border-radius: 5px; box-shadow: inset 0px 0px 20px black;
}
.bricks .brick:hover { cursor: pointer;
}
.bricks .brick.fall { animation: fall 0.8s ease-in-out 1; animation-direction: normal; animation-fill-mode: forwards;
}
#ball { width: 10px; height: 10px; background: black; border-radius: 50%; position: absolute; bottom: 10%; left: 50%; margin-left: -5px;
}

Brick Breaker - Script Codes JS Codes

(function() { var collides; $(function() { return $('.brick').click(function() { $(this).addClass('fall'); return $('.brick').index([Math.random * 10]).addClass('fall'); }); }); collides = function(a, b) { return a.x < b.x + b.width && a.x + a.width > b.x && a.y < b.y + b.height && a.y + a.height > b.y; };
}).call(this);
Brick Breaker - Script Codes
Brick Breaker - Script Codes
Home Page Home
Developer Jeff Scott Ward
Username jeffscottward
Uploaded August 28, 2022
Rating 3
Size 3,547 Kb
Views 87,032
Do you need developer help for Brick Breaker?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jeff Scott Ward (jeffscottward) Script Codes
Name
Panning Wall Tiles
Sprite Animation
Impress JS Algorhytmic Generator
A Pen by Jeff Scott Ward
Iso-Metric Snake
Object Oriented SASS Framework
Pure CSS Responsive Slider
XBOX 360 UI
Lab 49 Logo Animated
Trader Phone APP UI
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!