Neon Brick Breaker – A Classic Arcade Game with a Modern Twist
Are you a fan of classic arcade games? Neon Brick Breaker is a modernized version of the legendary brick-breaking game, packed with exciting features, stunning neon visuals, and smooth gameplay. Whether you're a casual gamer or a hardcore arcade enthusiast, this game offers endless fun and challenges to keep you engaged!
About Neon Brick Breaker
Neon Brick Breaker is a browser-based game that brings a fresh, neon-themed look to the beloved arcade classic. The objective is simple—control the paddle, bounce the ball, and break all the bricks before the ball falls off the screen. However, the increasing difficulty and unpredictable ball movement make it an addictive challenge.
Key Features
✅ Modern Neon Graphics – Experience a visually striking neon aesthetic that makes the game even more immersive.
✅ Smooth & Responsive Controls – Enjoy precise paddle movement and realistic ball physics.
✅ Challenging Levels – The game gets progressively harder, testing your reflexes and strategy.
✅ Auto-Play Mode – Want to sit back and watch? Enable the Auto-Play option and let AI take control!
✅ Interactive UI – A clean, user-friendly interface with a responsive game canvas for all screen sizes.
How to Play
-
Move the paddle – Use your mouse or touch controls to move the paddle left and right.
-
Keep the ball in play – Prevent the ball from falling and aim to break all the bricks.
-
Break all the bricks – Some bricks may require multiple hits to break.
-
Enable Auto-Play – Want to see the game play itself? Simply toggle the Auto-Play mode.
Why Play Neon Brick Breaker?
???? Classic Gameplay with a Modern Touch – Combines the nostalgia of old-school arcade games with fresh, neon-themed visuals.
⚡ Fast-Paced & Addictive – Test your reaction speed and strategic thinking as levels get harder.
???? No Downloads Required – Play directly in your browser without any installations.
Play Now!
Neon Brick Breaker is the perfect game for arcade lovers who enjoy simple yet challenging gameplay. Whether you want to kill time or improve your reflexes, this game offers endless entertainment. Ready to put your skills to the test? Click Play Now and start breaking bricks!
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neon Brick Breaker</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="gameCanvas"></canvas>
<div id="overlay">
<h2 id="message"></h2>
<button id="button" onclick="resetGame()"></button>
</div>
<label id="autoPlayLabel">
<input type="checkbox" id="autoPlayToggle"> Auto-Play
</label>
<script src="script.js"> </script>
</body>
</html>
CSS Code
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #121212;
font-family: Arial, sans-serif;
overflow: hidden;
touch-action: none;
width: 100vw;
height: 100vh;
position: fixed; /* Prevents bouncing on iOS */
}
canvas {
display: block;
background: #1e1e1e;
width: 100vw;
height: 100vh;
border: min(5px, 2vw) solid #ff0044;
box-shadow: 0 0 20px #ff0044, 0 0 40px #00ffcc inset;
}
#overlay {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.8);
background: rgba(0, 0, 0, 0.95);
color: white;
padding: min(30px, 5vw);
border-radius: min(10px, 2vw);
text-align: center;
display: none;
box-shadow: 0 0 25px #ff0044;
transition: opacity 0.3s, transform 0.3s;
width: min(90vw, 400px);
z-index: 1000;
}
#overlay.active {
display: block;
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
#overlay h2 {
font-size: min(26px, 5vw);
margin-bottom: min(20px, 4vw);
text-shadow: 0 0 10px #ff0044;
}
#overlay button {
padding: min(12px, 3vw) min(20px, 4vw);
font-size: min(18px, 4vw);
cursor: pointer;
background: #ff0044;
border: none;
color: white;
border-radius: min(5px, 1vw);
transition: 0.3s;
box-shadow: 0 0 15px #ff0044;
width: min(200px, 80%);
}
#overlay button:hover {
background: #cc0033;
}
#autoPlayLabel {
position: fixed;
top: min(10px, 2vh);
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
color: white;
font-size: min(14px, 3.5vw);
background: rgba(0, 0, 0, 0.5);
padding: min(10px, 2vw);
border-radius: min(5px, 1vw);
cursor: pointer;
z-index: 100;
}
@media (max-width: 768px) {
.paddle {
width: min(120px, 30vw);
height: min(15px, 4vw);
}
#autoPlayLabel {
top: auto;
bottom: min(10px, 2vh);
}
}
@media (max-height: 500px) {
#overlay {
padding: 15px;
}
#overlay h2 {
font-size: 20px;
margin-bottom: 10px;
}
#overlay button {
padding: 8px 15px;
font-size: 16px;
}
}
JavaScript Code
// Function to get the current level from localStorage
function getCurrentLevel() {
let storedLevel = localStorage.getItem("clearedLevels");
if (storedLevel) {
return parseInt(storedLevel) + 1; // Set current level to cleared +1
} else {
setInitialLevel(); // Initialize if not found
return 1;
}
}
// Function to set up the initial level if localStorage is empty
function setInitialLevel() {
localStorage.setItem("clearedLevels", "0"); // Start from level 1
}
// Function to update the level when a level is completed
function updateLevel() {
let currentCleared = parseInt(localStorage.getItem("clearedLevels")) || 0;
localStorage.setItem("clearedLevels", currentCleared + 1);
}
// Usage Example
// let currentLevel = getCurrentLevel();
// console.log("Current Level:", currentLevel);
// Call updateLevel() when a level is completed
// updateLevel(); // Uncomment this to update when a level is finished
let autoPlay = false;
const autoPlayToggle = document.getElementById("autoPlayToggle");
let currentLevel = getCurrentLevel();
// Listen for checkbox change
autoPlayToggle.addEventListener("change", function () {
autoPlay = this.checked;
if (autoPlay) {
movePaddle();
}
});
const levelPattern = [
// Level 1: Simple rows
// {
// pattern: [
// [1,1,1,1,1,1,1,1,1,1,1,1],
// [1,1,1,1,1,1,1,1,1,1,1,1],
// [1,1,1,1,1,1,1,1,1,1,1,1]
// ],
// speedMultiplier: 1
// },
// Level 2: Pyramid pattern
{
pattern: [
[0,0,0,0,1,1,1,1,0,0,0,0],
],
speedMultiplier: 1.2
},
// Level 3: Checkerboard pattern
{
pattern: [
[1,0,1,0,1,0,1,0,1,0,1,0],
],
speedMultiplier: 1.4
},
// Level 4: Fortress pattern
{
pattern: [
[1,0,0,0,0,1,1,0,0,0,0,1],
],
speedMultiplier: 1.6
}
];
document.getElementById("autoPlayToggle").addEventListener("change", function() {
autoPlay = this.checked;
if (autoPlay) {
movePaddle();
}
});
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
// function resizeCanvas() {
// let height = Math.min(window.innerHeight * 0.9, window.visualViewport ? window.visualViewport.height * 0.9 : 600);
// canvas.width = window.innerWidth;
// canvas.height = height;
// // canvas.height = Math.min(window.innerHeight * 0.9, 600); // Adjust height dynamically
// // resizeGameElements(); // Resize elements based on new dimensions
// }
function resizeCanvas() {
const isMobile = window.innerWidth < 768; // Detect mobile devices
const screenWidth = window.innerWidth;
const screenHeight = window.innerHeight;
if (isMobile) {
// Mobile: Full width, 65% height
canvas.width = screenWidth;
canvas.height = Math.floor(screenHeight * 0.65);
// Centering horizontally
canvas.style.position = "absolute";
canvas.style.top = "50%";
canvas.style.left = "50%";
canvas.style.transform = "translate(-50%, -50%)";
canvas.style.border = "3px solid red"; // Keep the red boundary
canvas.style.maxWidth = "100%";
canvas.style.maxHeight = "65vh"; // Maintain 65% height
} else {
// Laptop/Desktop: 90% of screen size
canvas.width = Math.floor(screenWidth * 0.9);
canvas.height = Math.floor(screenHeight * 0.9);
// Centering
canvas.style.position = "absolute";
canvas.style.top = "50%";
canvas.style.left = "50%";
canvas.style.transform = "translate(-50%, -50%)";
canvas.style.border = "3px solid red"; // Ensure red boundary
}
document.body.style.overflow = "hidden"; // Prevent scrolling
}
// Run on load & resize
window.addEventListener("resize", resizeCanvas);
window.addEventListener("load", resizeCanvas);
resizeCanvas();
window.addEventListener("resize", resizeCanvas);
const paddle = {
width: 120,
height: 15,
x: canvas.width / 2 - 60,
y: canvas.height - 90,
speed: 8,
dx: 0,
cornerRadius: 7.5 // Half of height for full rounding
};
const ball = {
x: canvas.width / 2,
y: paddle.y - 20,
radius: 10,
baseSpeed: 4,
maxSpeed: 6,
speed: 4,
dx: 0,
dy: 0
};
const brickTypes = [
{
color: "#FF6B6B", // Red
minHealth: 1,
maxHealth: 2
},
{
color: "#4ECDC4", // Teal
minHealth: 1,
maxHealth: 3
},
{
color: "#45B7D1", // Blue
minHealth: 1,
maxHealth: 2
},
{
color: "#FDCB6E", // Yellow
minHealth: 1,
maxHealth: 3
}
];
const brickPattern = [
// Level 1: Simple rows to get started
{
pattern: [
[1,1,1,1,1,1,1,1,1,1,1,1],
[1,1,1,1,1,1,1,1,1,1,1,1],
[1,1,1,1,1,1,1,1,1,1,1,1]
],
speedMultiplier: 1
},
// Level 2: Pyramid
{
pattern: [
[0,0,0,0,1,1,1,1,0,0,0,0],
[0,0,0,1,1,1,1,1,1,0,0,0],
[0,0,1,1,1,1,1,1,1,1,0,0],
[0,1,1,1,1,1,1,1,1,1,1,0],
[1,1,1,1,1,1,1,1,1,1,1,1]
],
speedMultiplier: 1.1
},
// Level 3: Checkerboard
{
pattern: [
[1,0,1,0,1,0,1,0,1,0,1,0],
[0,1,0,1,0,1,0,1,0,1,0,1],
[1,0,1,0,1,0,1,0,1,0,1,0],
[0,1,0,1,0,1,0,1,0,1,0,1]
],
speedMultiplier: 1.2
},
// Level 4: Double Diamond
{
pattern: [
[0,0,0,1,1,1,1,1,1,0,0,0],
[0,0,1,0,0,0,0,0,0,1,0,0],
[0,1,0,0,0,0,0,0,0,0,1,0],
[1,0,0,0,0,0,0,0,0,0,0,1],
[0,1,0,0,0,0,0,0,0,0,1,0],
[0,0,1,0,0,0,0,0,0,1,0,0],
[0,0,0,1,1,1,1,1,1,0,0,0]
],
speedMultiplier: 1.3
},
// Level 5: Fortress
{
pattern: [
[1,1,1,1,1,1,1,1,1,1,1,1],
[1,0,0,0,0,1,1,0,0,0,0,1],
[1,0,1,1,0,1,1,0,1,1,0,1],
[1,0,1,1,0,1,1,0,1,1,0,1],
[1,0,0,0,0,1,1,0,0,0,0,1],
[1,1,1,1,1,1,1,1,1,1,1,1]
],
speedMultiplier: 1.4
},
// Level 6: Cross Pattern
{
pattern: [
[1,0,0,0,1,1,1,1,0,0,0,1],
[0,1,0,0,1,1,1,1,0,0,1,0],
[0,0,1,0,1,1,1,1,0,1,0,0],
[0,0,0,1,1,1,1,1,1,0,0,0],
[1,1,1,1,1,1,1,1,1,1,1,1],
[0,0,0,1,1,1,1,1,1,0,0,0],
[0,0,1,0,1,1,1,1,0,1,0,0],
[0,1,0,0,1,1,1,1,0,0,1,0],
[1,0,0,0,1,1,1,1,0,0,0,1]
],
speedMultiplier: 1.5
},
// Level 7: Wave Pattern
{
pattern: [
[1,0,0,0,0,1,1,0,0,0,0,1],
[0,1,0,0,1,0,0,1,0,0,1,0],
[0,0,1,1,0,0,0,0,1,1,0,0],
[0,0,0,1,0,0,0,0,1,0,0,0],
[0,0,1,1,0,0,0,0,1,1,0,0],
[0,1,0,0,1,0,0,1,0,0,1,0],
[1,0,0,0,0,1,1,0,0,0,0,1]
],
speedMultiplier: 1.6
},
// Level 8: Heart Shape
{
pattern: [
[0,1,1,0,0,0,0,0,0,1,1,0],
[1,1,1,1,0,0,0,0,1,1,1,1],
[1,1,1,1,1,0,0,1,1,1,1,1],
[1,1,1,1,1,1,1,1,1,1,1,1],
[0,1,1,1,1,1,1,1,1,1,1,0],
[0,0,1,1,1,1,1,1,1,1,0,0],
[0,0,0,1,1,1,1,1,1,0,0,0],
[0,0,0,0,1,1,1,1,0,0,0,0],
[0,0,0,0,0,1,1,0,0,0,0,0]
],
speedMultiplier: 1.7
},
// Level 9: Maze
{
pattern: [
[1,1,1,1,1,1,1,1,1,1,1,1],
[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,1,1,1,1,1,1,1,1,0,1],
[1,0,1,0,0,0,0,0,0,1,0,1],
[1,0,1,0,1,1,1,1,0,1,0,1],
[1,0,1,0,1,0,0,1,0,1,0,1],
[1,0,1,0,1,1,0,1,0,1,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],
[1,1,1,1,1,1,1,1,1,1,1,1]
],
speedMultiplier: 1.8
},
// Level 10: Space Invader
{
pattern: [
[0,0,1,0,0,0,0,0,0,1,0,0],
[0,0,0,1,0,0,0,0,1,0,0,0],
[0,0,1,1,1,1,1,1,1,1,0,0],
[0,1,1,0,1,1,1,1,0,1,1,0],
[1,1,1,1,1,1,1,1,1,1,1,1],
[1,0,1,1,1,1,1,1,1,1,0,1],
[1,0,1,0,0,0,0,0,0,1,0,1],
[0,0,0,1,1,0,0,1,1,0,0,0]
],
speedMultiplier: 1.9
},
// Level 11: Spiral
{
pattern: [
[1,1,1,1,1,1,1,1,1,1,1,1],
[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,1,1,1,1,1,1,1,1,0,1],
[1,0,1,0,0,0,0,0,0,1,0,1],
[1,0,1,0,1,1,1,1,0,1,0,1],
[1,0,1,0,1,0,0,1,0,1,0,1],
[1,0,1,0,1,1,1,1,0,1,0,1],
[1,0,1,0,0,0,0,0,0,1,0,1],
[1,0,1,1,1,1,1,1,1,1,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],
[1,1,1,1,1,1,1,1,1,1,1,1]
],
speedMultiplier: 2.0
},
// Level 12: Double Helix
{
pattern: [
[1,0,0,0,1,0,0,1,0,0,0,1],
[0,1,0,1,0,0,0,0,1,0,1,0],
[0,0,1,0,0,0,0,0,0,1,0,0],
[0,1,0,1,0,0,0,0,1,0,1,0],
[1,0,0,0,1,0,0,1,0,0,0,1],
[0,1,0,1,0,0,0,0,1,0,1,0],
[0,0,1,0,0,0,0,0,0,1,0,0],
[0,1,0,1,0,0,0,0,1,0,1,0],
[1,0,0,0,1,0,0,1,0,0,0,1]
],
speedMultiplier: 2.1
},
// Level 13: Tetris Shapes
{
pattern: [
[1,1,0,0,1,1,1,0,0,1,1,0],
[1,1,0,0,0,1,0,0,0,1,1,0],
[0,0,0,0,0,1,0,0,0,0,0,0],
[0,1,1,0,0,0,0,0,1,1,1,0],
[0,1,1,0,0,0,0,0,0,1,0,0],
[1,1,0,0,1,1,0,0,0,1,0,0],
[1,1,0,1,1,1,0,0,0,1,0,0]
],
speedMultiplier: 2.2
},
// Level 14: Castle
{
pattern: [
[1,0,1,0,1,0,1,0,1,0,1,0],
[1,1,1,1,1,1,1,1,1,1,1,1],
[0,1,1,1,1,1,1,1,1,1,1,0],
[0,1,0,0,0,1,1,0,0,0,1,0],
[0,1,0,1,0,1,1,0,1,0,1,0],
[0,1,0,0,0,1,1,0,0,0,1,0],
[0,1,1,1,1,1,1,1,1,1,1,0],
[0,0,1,1,1,1,1,1,1,1,0,0]
],
speedMultiplier: 2.3
},
// Level 15: Butterfly
{
pattern: [
[1,0,0,0,0,1,1,0,0,0,0,1],
[1,1,0,0,1,1,1,1,0,0,1,1],
[1,1,1,1,1,0,0,1,1,1,1,1],
[0,1,1,1,0,0,0,0,1,1,1,0],
[0,0,1,0,0,1,1,0,0,1,0,0],
[0,1,1,1,0,0,0,0,1,1,1,0],
[1,1,1,1,1,0,0,1,1,1,1,1],
[1,1,0,0,1,1,1,1,0,0,1,1],
[1,0,0,0,0,1,1,0,0,0,0,1]
],
speedMultiplier: 2.4
},
// Level 16: Circuit Board
{
pattern: [
[1,1,1,0,0,1,1,0,0,1,1,1],
[1,0,0,0,0,1,1,0,0,0,0,1],
[1,0,1,1,1,1,1,1,1,1,0,1],
[0,0,1,0,0,0,0,0,0,1,0,0],
[0,0,1,0,1,1,1,1,0,1,0,0],
[1,1,1,0,1,0,0,1,0,1,1,1],
[0,0,1,0,1,1,1,1,0,1,0,0],
[0,0,1,0,0,0,0,0,0,1,0,0],
[1,0,1,1,1,1,1,1,1,1,0,1],
[1,0,0,0,0,1,1,0,0,0,0,1],
[1,1,1,0,0,1,1,0,0,1,1,1]
],
speedMultiplier: 2.5
},
// Level 17: DNA Structure
{
pattern: [
[1,0,0,1,0,0,1,0,0,1,0,0],
[0,1,0,0,1,0,0,1,0,0,1,0],
[0,0,1,0,0,1,1,0,0,1,0,0],
[1,0,0,1,0,0,0,0,1,0,0,1],
[0,1,0,0,1,0,0,1,0,0,1,0],
[0,0,1,0,0,1,1,0,0,1,0,0],
[1,0,0,1,0,0,0,0,1,0,0,1]
],
speedMultiplier: 2.5
},
// Level 18: Pinwheel
{
pattern: [
[1,1,1,0,0,0,0,0,0,1,1,1],
[1,1,0,0,0,0,0,0,1,1,1,1],
[1,0,0,0,0,0,0,1,1,1,1,1],
[0,0,0,0,0,0,1,1,1,0,0,0],
[0,0,0,0,0,1,1,1,0,0,0,0],
[0,0,0,0,1,1,1,0,0,0,0,0],
[0,0,0,1,1,1,0,0,0,0,0,0],
[1,1,1,1,1,0,0,0,0,0,1,1]
],
speedMultiplier: 2.6
},
// Level 19: Honeycomb
{
pattern: [
[0,1,1,0,1,1,0,1,1,0,1,1],
[1,1,0,1,1,0,1,1,0,1,1,0],
[1,0,0,1,0,0,1,0,0,1,0,0],
[0,1,1,0,1,1,0,1,1,0,1,1],
[1,1,0,1,1,0,1,1,0,1,1,0],
[1,0,0,1,0,0,1,0,0,1,0,0],
[0,1,1,0,1,1,0,1,1,0,1,1]
],
speedMultiplier: 2.7
},
// Level 20: Star Constellation
{
pattern: [
[1,0,0,1,0,1,1,0,1,0,0,1],
[0,1,0,0,1,0,0,1,0,0,1,0],
[0,0,1,0,0,1,1,0,0,1,0,0],
[1,0,0,1,1,0,0,1,1,0,0,1],
[0,1,0,1,0,1,1,0,1,0,1,0],
[1,0,1,0,1,1,1,1,0,1,0,1]
],
speedMultiplier: 2.8
},
// Level 21: Labyrinth
{
pattern: [
[1,1,1,1,1,1,1,1,1,1,1,1],
[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,1,1,1,1,1,1,1,1,0,1],
[1,0,1,0,0,0,0,0,0,0,0,1],
[1,0,1,0,1,1,1,1,1,1,1,1],
[1,0,1,0,0,0,0,0,0,0,0,1],
[1,0,1,1,1,1,1,1,1,1,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],
[1,1,1,1,1,1,1,1,1,1,1,1]
],
speedMultiplier: 2.9
},
// Level 22: Binary Code
{
pattern: [
[1,0,1,0,1,0,1,0,1,0,1,0],
[0,1,0,1,0,1,0,1,0,1,0,1],
[1,1,0,0,1,1,0,0,1,1,0,0],
[0,0,1,1,0,0,1,1,0,0,1,1],
[1,0,1,0,1,0,1,0,1,0,1,0],
[1,1,0,0,1,1,0,0,1,1,0,0]
],
speedMultiplier: 3.0
},
// Level 23: Dragon Scale
{
pattern: [
[0,1,1,1,0,0,0,1,1,1,0,0],
[1,1,1,1,1,0,1,1,1,1,1,0],
[1,1,0,1,1,1,1,1,0,1,1,1],
[1,0,0,0,1,1,1,0,0,0,1,1],
[0,0,0,1,1,1,0,0,0,1,1,1],
[0,0,1,1,1,0,0,0,1,1,1,0],
[0,1,1,1,0,0,0,1,1,1,0,0]
],
speedMultiplier: 3.1
},
// Level 24: Pixel Art Face
{
pattern: [
[0,0,1,1,1,1,1,1,1,1,0,0],
[0,1,1,1,1,1,1,1,1,1,1,0],
[1,1,0,0,1,1,1,1,0,0,1,1],
[1,1,0,0,1,1,1,1,0,0,1,1],
[1,1,1,1,1,1,1,1,1,1,1,1],
[1,1,0,1,1,1,1,1,1,0,1,1],
[0,1,1,0,0,0,0,0,0,1,1,0],
[0,0,1,1,1,1,1,1,1,1,0,0]
],
speedMultiplier: 3.2
},
// Level 25: Tribal Pattern
{
pattern: [
[1,0,1,0,1,1,1,1,0,1,0,1],
[1,1,0,1,0,1,1,0,1,0,1,1],
[1,0,1,0,1,0,0,1,0,1,0,1],
[0,1,0,1,0,0,0,0,1,0,1,0],
[1,0,1,0,1,0,0,1,0,1,0,1],
[1,1,0,1,0,1,1,0,1,0,1,1],
[1,0,1,0,1,1,1,1,0,1,0,1]
],
speedMultiplier: 3.3
},
// Level 26: Pyramid Maze
{
pattern: [
[1,1,1,1,1,1,1,1,1,1,1,1],
[0,1,1,1,1,0,0,1,1,1,1,0],
[0,0,1,1,0,0,0,0,1,1,0,0],
[0,0,0,1,1,0,0,1,1,0,0,0],
[0,0,1,1,1,1,1,1,1,1,0,0],
[0,1,1,0,0,1,1,0,0,1,1,0],
[1,1,1,1,1,1,1,1,1,1,1,1]
],
speedMultiplier: 3.4
},
// Level 27: Circuit Matrix
{
pattern: [
[1,0,1,1,0,1,1,0,1,1,0,1],
[1,0,0,1,0,0,0,0,1,0,0,1],
[1,1,0,1,1,1,1,1,1,0,1,1],
[0,1,0,0,0,1,1,0,0,0,1,0],
[1,1,0,1,1,1,1,1,1,0,1,1],
[1,0,0,1,0,0,0,0,1,0,0,1],
[1,0,1,1,0,1,1,0,1,1,0,1]
],
speedMultiplier: 3.5
},
// Level 28: Double Cross
{
pattern: [
[1,0,0,0,1,1,1,1,0,0,0,1],
[0,1,0,0,1,1,1,1,0,0,1,0],
[0,0,1,0,1,1,1,1,0,1,0,0],
[0,0,0,1,1,1,1,1,1,0,0,0],
[1,1,1,1,1,0,0,1,1,1,1,1],
[1,1,1,1,0,0,0,0,1,1,1,1],
[1,1,1,1,1,0,0,1,1,1,1,1],
[0,0,0,1,1,1,1,1,1,0,0,0]
],
speedMultiplier: 3.6
},
// Level 29: Crystal Formation
{
pattern: [
[0,0,0,0,1,1,1,1,0,0,0,0],
[0,0,0,1,1,1,1,1,1,0,0,0],
[0,0,1,1,0,1,1,0,1,1,0,0],
[0,1,1,0,0,1,1,0,0,1,1,0],
[1,1,0,0,1,1,1,1,0,0,1,1],
[1,1,1,1,1,0,0,1,1,1,1,1],
[1,1,0,0,1,1,1,1,0,0,1,1],
[0,1,1,0,0,1,1,0,0,1,1,0],
[0,0,1,1,0,0,0,0,1,1,0,0]
],
speedMultiplier: 3.7
},
// Level 30: Final Boss
{
pattern: [
[1,1,1,1,1,1,1,1,1,1,1,1],
[1,1,0,0,1,1,1,1,0,0,1,1],
[1,0,1,1,0,1,1,0,1,1,0,1],
[1,0,1,1,1,0,0,1,1,1,0,1],
[1,1,0,1,1,1,1,1,1,0,1,1],
[1,1,1,0,1,1,1,1,0,1,1,1],
[1,0,1,1,1,0,0,1,1,1,0,1],
[1,0,1,1,0,1,1,0,1,1,0,1],
[1,1,0,0,1,1,1,1,0,0,1,1],
[1,1,1,1,1,1,1,1,1,1,1,1]
],
speedMultiplier: 4.0
}
]
function normalizeSpeed(baseSpeed) {
return baseSpeed * (window.innerWidth / 800); // Normalize based on 800px reference width
}
function preventWallSticking() {
if (Math.abs(ball.dx) < 0.5) {
ball.dx = (Math.random() > 0.5 ? 1 : -1) * 2; // Ensure a non-zero dx
}
if (Math.abs(ball.dy) < 0.5) {
ball.dy = (Math.random() > 0.5 ? 1 : -1) * 2; // Ensure a non-zero dy
}
}
function isLastLevel() {
return currentLevel === brickPattern.length;
}
let totalBricks = brickPattern[currentLevel - 1].pattern.flat().filter(brick => brick !== 0).length; // Count all non-zero bricks
let brickRowCount = brickPattern[currentLevel-1].pattern.length;
let brickColumnCount = brickPattern[currentLevel-1].pattern[0].length;
let bricks = [];
function createBricks() {
bricks = [];
brickRowCount = brickPattern[currentLevel - 1].pattern.length;
brickColumnCount = brickPattern[currentLevel - 1].pattern[0].length;
const brickWidth = Math.floor(canvas.width / brickColumnCount);
const brickHeight = Math.floor(canvas.height / (brickRowCount * 3));
// for (let r = 0; r < brickRowCount; r++) {
// bricks[r] = [];
// for (let c = 0; c < brickColumnCount; c++) {
const brickType = brickTypes[Math.floor(Math.random() * brickTypes.length)];
// bricks[r][c] = {
// x: c * brickWidth,
// y: r * brickHeight + 50,
// width: brickWidth,
// height: brickHeight,
// status: 1,
// type: brickType,
// health: Math.floor(Math.random() *
// (brickType.maxHealth - brickType.minHealth + 1)) + brickType.minHealth
// };
// }
// }
// console.log('brickPattern.length',brickPattern[currentLevel].length);
let randomType = brickTypes[Math.floor(Math.random() * brickTypes.length)]; // Random brick type
let randomHealth = randomType.health; // Assign health based on type
const currentPattern = brickPattern[currentLevel - 1].pattern;
for (let r = 0; r < brickRowCount; r++) {
bricks[r] = [];
for (let c = 0; c < brickColumnCount; c++) {
if (currentPattern[r][c] === 1) {
bricks[r][c] = {
x: c * brickWidth,
y: r * brickHeight + 50,
width: brickWidth,
height: brickHeight,
status: 1,
type: brickType, // Assign random type
health: Math.floor(Math.random() *
(brickType.maxHealth - brickType.minHealth + 1)) + brickType.minHealth
};
} else {
bricks[r][c] = { status: 0 }; // Empty space where no brick is placed
}
}
}
}
createBricks();
let score = 0;
let lives = 3;
let gameRunning = false;
let gameFinish = false;
// let random =
// function drawPaddle() {
// ctx.fillStyle = "#00ffcc";
// ctx.fillRect(paddle.x, paddle.y, paddle.width, paddle.height);
// }
function drawPaddle() {
// Save the current context state
ctx.save();
// Create paddle path with rounded corners
ctx.beginPath();
const radius = paddle.height / 2;
ctx.moveTo(paddle.x + radius, paddle.y);
ctx.lineTo(paddle.x + paddle.width - radius, paddle.y);
ctx.quadraticCurveTo(paddle.x + paddle.width, paddle.y, paddle.x + paddle.width, paddle.y + radius);
ctx.lineTo(paddle.x + paddle.width, paddle.y + paddle.height - radius);
ctx.quadraticCurveTo(paddle.x + paddle.width, paddle.y + paddle.height, paddle.x + paddle.width - radius, paddle.y + paddle.height);
ctx.lineTo(paddle.x + radius, paddle.y + paddle.height);
ctx.quadraticCurveTo(paddle.x, paddle.y + paddle.height, paddle.x, paddle.y + paddle.height - radius);
ctx.lineTo(paddle.x, paddle.y + radius);
ctx.quadraticCurveTo(paddle.x, paddle.y, paddle.x + radius, paddle.y);
ctx.closePath();
// Create gradient
const gradient = ctx.createLinearGradient(
paddle.x, paddle.y,
paddle.x, paddle.y + paddle.height
);
gradient.addColorStop(0, '#00ffcc');
gradient.addColorStop(0.5, '#00ccaa');
gradient.addColorStop(1, '#00aa88');
// Add shadow for glow effect
ctx.shadowColor = '#00ffcc';
// ctx.shadowBlur = 15;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
// Fill paddle with gradient
ctx.fillStyle = gradient;
ctx.fill();
// Add metallic shine effect
ctx.beginPath();
ctx.moveTo(paddle.x + radius, paddle.y + 3);
ctx.lineTo(paddle.x + paddle.width - radius, paddle.y + 3);
ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
ctx.lineWidth = 2;
ctx.stroke();
// Add bottom shadow
ctx.beginPath();
ctx.moveTo(paddle.x + radius, paddle.y + paddle.height - 3);
ctx.lineTo(paddle.x + paddle.width - radius, paddle.y + paddle.height - 3);
ctx.strokeStyle = 'rgba(0, 0, 0, 0.3)';
ctx.lineWidth = 2;
ctx.stroke();
// Restore the context state
ctx.restore();
}
function drawBall() {
ctx.beginPath();
ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
ctx.fillStyle = "#ff0044";
ctx.fill();
ctx.closePath();
}
function drawBricks() {
drawRedBoundary();
// brickRowCount = brickPattern[currentLevel-1].pattern.length;
// brickColumnCount = brickPattern[currentLevel-1].pattern[0].length;
console.log("brickRowCount,brickColumnCount",brickRowCount, brickColumnCount)
for (let r = 0; r < brickRowCount; r++) {
for (let c = 0; c < brickColumnCount; c++) {
let brick = bricks[r][c];
if (brick.status === 1) {
// Change color based on health
let color = "#FDCB6E"; // Default for health = 1
if (brick.health === 3) {
color = "#FF6B6B";
} else if (brick.health === 2) {
color = "#4ECDC4";
}
ctx.fillStyle = color;
ctx.fillRect(brick.x, brick.y, brick.width, brick.height);
// Draw health number
//ctx.fillStyle = "#000";
//ctx.font = "12px Arial";
//ctx.textAlign = "center";
//ctx.fillText(brick.health, brick.x + brick.width / 2, brick.y + brick.height / 2 + 4);
// Brick border
ctx.strokeStyle = "#fff";
ctx.strokeRect(brick.x, brick.y, brick.width, brick.height);
}
}
}
}
// let bounceLeft = true; // Start with bouncing to the left
// function movePaddle() {
// if (!autoPlay) return;
// // Move the paddle to make the ball bounce left or right alternately
// let offset = bounceLeft ? -paddle.width / 4 : paddle.width / 4;
// paddle.x = ball.x - paddle.width / 2 + offset;
// // Ensure the paddle stays within canvas bounds
// if (paddle.x < 0) paddle.x = 0;
// if (paddle.x + paddle.width > canvas.width) paddle.x = canvas.width - paddle.width;
// }
let lastDy = ball.dy; // Store the previous dy value
let randomOffset = 0; // Store offset value
let offsetUpdated = false; // Ensure offset updates only once per bounce
function getRandomOffset() {
return Math.random() * 20 - 5; // Random offset between -10 and 10
}
function movePaddle() {
if (!autoPlay) return;
// Check if ball changes direction from up (-Y) to down (+Y)
if (ball.dy > 0 && lastDy <= 0 && !offsetUpdated) {
randomOffset = getRandomOffset(); // Update offset only once per bounce
offsetUpdated = true; // Prevent continuous updates
}
// Reset flag when the ball moves up again
if (ball.dy < 0) {
offsetUpdated = false;
}
// Apply the offset when ball is falling
paddle.x = ball.x - paddle.width / 2 + randomOffset;
// Ensure the paddle stays within canvas bounds
if (paddle.x < 0) paddle.x = 0;
if (paddle.x + paddle.width > canvas.width) paddle.x = canvas.width - paddle.width;
lastDy = ball.dy; // Update lastDy
}
// Update ball bounce logic
function checkBallCollision() {
// Ball collides with paddle
if (
ball.y + ball.radius >= paddle.y &&
ball.x >= paddle.x &&
ball.x <= paddle.x + paddle.width
) {
y = -ball.dy; // Reverse vertical direction (bounce upwards)
// **Alternate ball's horizontal direction**
ball.dx = bounceLeft ? -Math.abs(ball.dx) : Math.abs(ball.dx);
// **Move paddle slightly for next bounce**
let offset = bounceLeft ? -paddle.width / 4 : paddle.width / 4;
paddle.x = ball.x - paddle.width / 2 + offset;
// Ensure paddle stays within canvas boundaries
if (paddle.x < 0) paddle.x = 0;
if (paddle.x + paddle.width > canvas.width) paddle.x = canvas.width - paddle.width;
// **Toggle bounce direction for next hit**
bounceLeft = !bounceLeft;
}
}
function moveBall() {
if (!gameRunning) return;
ball.x += ball.dx;
ball.y += ball.dy;
// Ball collision with walls (left and right)
if (ball.x - ball.radius < 0 || ball.x + ball.radius > canvas.width) {
ball.dx *= -1;
ball.x += ball.dx; // Slightly shift position to prevent getting stuck
preventWallSticking();
// Add a small random variation to prevent infinite loops
ball.dx += (Math.random() - 0.5) * 0.6;
// Ensure the ball does not get stuck moving only vertically
if (Math.abs(ball.dx) < 1) {
ball.dx = (ball.dx < 0 ? -1 : 1) * (Math.random() * 2 + 1);
}
}
// Ball collision with top
if (ball.y - ball.radius < 0) {
ball.dy *= -1;
ball.y += ball.dy; // Slightly shift position to prevent sticking
}
// Ball collision with paddle
if (
ball.y + ball.radius > paddle.y &&
ball.x > paddle.x &&
ball.x < paddle.x + paddle.width
) {
let deltaX = ball.x - (paddle.x + paddle.width / 2);
ball.dx = deltaX * 0.2;
ball.dx += (Math.random() - 0.5) * 0.4;
ball.dy = -Math.abs(ball.dy);
ball.speed = Math.min(ball.speed + 0.1, ball.maxSpeed);
}
// Ball falls below paddle
if (ball.y + ball.radius > canvas.height) {
lives--;
if (lives === 0) {
showOverlay("Game Over!", "Replay!");
// gameFinish = tru
return;
}
resetBall();
}
// Ball collision with bricks
for (let r = 0; r < brickRowCount; r++) {
for (let c = 0; c < brickColumnCount; c++) {
let brick = bricks[r][c];
if (brick.status === 1) {
if (
ball.x + ball.radius > brick.x &&
ball.x - ball.radius < brick.x + brick.width &&
ball.y + ball.radius > brick.y &&
ball.y - ball.radius < brick.y + brick.height
) {
brick.health--;
if (brick.health <= 0) {
brick.status = 0;
score++;
}
// Detect collision direction
let hitFromLeft = ball.x < brick.x;
let hitFromRight = ball.x > brick.x + brick.width;
let hitFromTop = ball.y < brick.y;
let hitFromBottom = ball.y > brick.y + brick.height;
let horizontalOverlap = ball.x > brick.x && ball.x < brick.x + brick.width;
let verticalOverlap = ball.y > brick.y && ball.y < brick.y + brick.height;
if (horizontalOverlap) {
ball.dy *= -1; // Flip vertical movement if hit from top or bottom
} else if (verticalOverlap) {
ball.dx *= -1; // Flip horizontal movement if hit from left or right
}
ball.dx += (Math.random() - 0.5) * 0.3; // Add randomness to prevent infinite loops
// Win condition check
// if (bricksPattern.every(row => row.every(brick => brick === 0))) {
if (score === totalBricks) {
if (isLastLevel()) {
showOverlay("Congratulations! Game Completed! ????", "Play Again");
setInitialLevel();
gameFinish = true;
// Reset to first level for next game
currentLevel = 1;
} else {
showOverlay("Level Complete! ????", "Next Level");
updateLevel();
gameFinish = true;
currentLevel++;
// totalBricks = brickPattern[currentLevel - 1].pattern.flat().filter(brick => brick !== 0).length;
}
return;
// showOverlay("You Win! ????", "Next:)");
// gameFinish = true;
// currentLevel = currentLevel + 1;
// totalBricks = brickPattern[currentLevel - 1].pattern.flat().filter(brick => brick !== 0).length; // Count all non-zero bricks
// return;
}
}
}
}
}
}
// Responsive Ball, Paddle, and Bricks
function resizeGameElements() {
let scaleFactor = window.innerWidth / 800; // Base size at 800px width
paddle.width = Math.max(80 * scaleFactor, 80); // Prevent too small
paddle.height = Math.max(10 * scaleFactor, 10);
paddle.y = canvas.height - Math.max(40 * scaleFactor, 60);
paddle.speed = Math.max(6 * scaleFactor, 4);
ball.radius = Math.max(6 * scaleFactor, 6);
ball.baseSpeed = normalizeSpeed(4);
ball.maxSpeed = normalizeSpeed(4);
createBricks(); // Recalculate brick sizes
}
window.addEventListener("resize", () => {
resizeCanvas();
resizeGameElements();
});
// resizeGameElements();
function drawScoreLives() {
// ctx.font = "20px Arial";
const isMobile = window.innerWidth < 768; // Detect mobile
const fontSize = isMobile ? Math.floor(window.innerWidth * 0.05) : 24; // 5% of screen width for mobile, 32px for desktop
ctx.font = `${fontSize}px Arial`;
ctx.fillStyle = "#fff";
ctx.shadowColor = "black";
ctx.shadowBlur = 5;
ctx.fillText("Level: " + currentLevel + " Score: " + score , 60, 30);
ctx.fillText("Lives: " + (lives < 0 ? 0 : lives), canvas.width - 140, 30);
ctx.shadowBlur = 0;
}
function drawRedBoundary() {
ctx.fillStyle = "red";
ctx.fillRect(0, canvas.height - 1.5, canvas.width, 5); // Make sure it's at the visible bottom
}
function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawPaddle();
drawBricks();
drawScoreLives();
if (!gameRunning) {
ball.x = paddle.x + paddle.width / 2;
ball.y = paddle.y - ball.radius - 2;
drawBall();
} else {
moveBall();
drawBall();
}
movePaddle();
requestAnimationFrame(update);
}
function resetBall() {
gameRunning = false;
ball.dx = 0;
ball.dy = 0;
ball.speed = ball.baseSpeed;
}
function showOverlay(message, button) {
const overlay = document.getElementById("overlay");
document.getElementById("message").innerText = message;
document.getElementById("button").innerText = button;
overlay.classList.add("active");
gameRunning = false;
}
function resetGame() {
gameFinish = false;
document.getElementById("overlay").classList.remove("active");
score = 0;
lives = 3;
// Update brick counts for new level
brickRowCount = brickPattern[currentLevel - 1].pattern.length;
brickColumnCount = brickPattern[currentLevel - 1].pattern[0].length;
totalBricks = brickPattern[currentLevel - 1].pattern.flat().filter(brick => brick !== 0).length;
createBricks();
resetBall();
}
// Handle touch events for mobile
function handleTouch(e) {
if (!autoPlay) {
e.preventDefault();
const rect = canvas.getBoundingClientRect();
const touchX = e.touches[0].clientX - rect.left;
paddle.x = touchX - paddle.width / 2;
// Keep paddle within canvas bounds
if (paddle.x < 0) paddle.x = 0;
if (paddle.x + paddle.width > canvas.width) paddle.x = canvas.width - paddle.width;
}
}
// Add touch event listeners
canvas.addEventListener('touchstart', (e) => {
if (!gameRunning && (bricks.length != 0)) {
gameRunning = true;
ball.dy = -ball.speed;
ball.dx = Math.random() * 4 - 2;
}
handleTouch(e);
});
canvas.addEventListener('touchmove', handleTouch);
canvas.addEventListener('touchend', (e) => e.preventDefault());
// Listen for "A" key press to toggle auto mode
document.addEventListener("keydown", function (event) {
if (event.key.toLowerCase() === "a") {
autoPlay = !autoPlay; // Toggle autoPlay
autoPlayToggle.checked = autoPlay; // Sync checkbox state
if (autoPlay) {
movePaddle();
}
}
});
document.addEventListener("keydown", (e) => {
if ((e.key === "Enter" || e.key === " ") && !gameRunning && (lives != 0) && !gameFinish) {
document.getElementById("overlay").classList.remove("active");
gameRunning = true;
ball.dy = -ball.speed;
ball.dx = (Math.random() * 4 - 2);
}
});
canvas.addEventListener("click", () => {
// console.log('bricks.length', bricks.length);
// if((bricksPattern.every(row => row.every(brick => brick === 0)))){return;}
if (!gameRunning && (lives != 0) && !gameFinish) {
gameRunning = true;
ball.dy = -ball.speed;
ball.dx = Math.random() * 4 - 2;
}
});
document.addEventListener("mousemove", (e) => {
if (!autoPlay) {
// console.log('bricks.length', bricks.length);
let rect = canvas.getBoundingClientRect();
paddle.x = e.clientX - rect.left - paddle.width / 2;
if (paddle.x < 0) paddle.x = 0;
if (paddle.x + paddle.width > canvas.width) paddle.x = canvas.width - paddle.width;
}
});
update();
PHP Code
NO Need
FAQ (Frequently Asked Questions)
❓ What is Neon Brick Breaker?
Neon Brick Breaker is a classic arcade game where you control a paddle to bounce a ball and break bricks. The goal is to clear all bricks without letting the ball fall off the screen.
❓ How do I play Neon Brick Breaker?
Simply move the paddle left and right to keep the ball in play. Break all the bricks to complete levels. You can also enable Auto-Play mode to let the AI play for you!
❓ Is Neon Brick Breaker free to play?
Yes! Neon Brick Breaker is 100% free to play directly in your web browser. No downloads or installations are required.
❓ Can I play Neon Brick Breaker on mobile?
Absolutely! The game is fully responsive and works on desktops, tablets, and smartphones.
❓ Does Neon Brick Breaker have different levels?
Yes! The game gets progressively more challenging as you advance, making it more exciting and fun.
Our Comment
✅ Neon Brick Breaker is an addictive arcade game that combines nostalgia with a modern neon look.
✅ The SEO strategy here includes high-ranking keywords, engaging meta tags, and a structured FAQ section.
✅ Make sure to interlink related game pages on your blog to boost rankings.
✅ Share the blog post on social media and gaming forums to drive organic traffic.
✅ Add structured data (Schema Markup) for games to improve your chances of getting featured snippets.