Create Atari Breakout Game with
JavaScript
Use the Left right arrow ➡️⬅️⬆️⬇️ to move the paddle across the bottom of the screen. With the paddle, hit the ball into the wall. Each time the ball hits a brick, the brick disappears and you score points.If it hit the bottom game will be over.
A player or team receives five balls per game. When you miss a ball with your paddle, the ball disappears from the screen. Press the red controller button to serve another ball until all five balls are played.
When a team or player destroys the all wall, a second brick wall automatically appears on the screen. Continue to hit the bricks of this wall and score more points. The player or team who can destroy the walls.
Video Tutorial of Atari Breakout
Atari Breakout [Source Codes]
To Create Atari Breakout with HTML,CSS and JavaScript, follow the given steps line by line:
Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be style and its extension .js
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source code by clicking download button.
First, paste the following codes into your index.html file
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>Breakout Game
- </title>
- <link rel="stylesheet" href="style.css">
- </head>
- <body>
- <canvas id="board"></canvas>
- <script src="script.js"></script>
- </body>
- </html>
Now paste the following codes into your style.css file
- body {
- text-align: center;
- }
-
- #board {
- background-color:#282A35;
- border: 8px solid skyblue;
-
Now paste the following codes into your script.js file
- let board;
- let boardWidth = 750;
- let boardHeight = 550;
- let context;
-
- let playerWidth = 90;
- let playerHeight = 10;
- let playerVelocityX = 40;
-
- let player = {
- x : boardWidth/2 - playerWidth/2,
- y : boardHeight - playerHeight - 5,
- width: playerWidth,
- height: playerHeight,
- velocityX : playerVelocityX
- }
- let ballRadius = 7;
- let ballWidth = 15;
- let ballHeight = 15;
- let ballVelocityX = 4;
- let ballVelocityY = 2;
-
- let ball = {
- x : boardWidth/2,
- y : boardHeight/2,
- width: ballWidth,
- height: ballHeight,
- velocityX : ballVelocityX,
- velocityY : ballVelocityY
- }
-
- let blockArray = [];
- let blockWidth = 50;
- let blockHeight = 10;
- let blockColumns = 12;
- let blockRows = 5;
- let blockMaxRows = 10;
- let blockCount = 0;
-
-
- let blockX = 15;
- let blockY = 45;
-
- let score = 0;
- let gameOver = false;
-
- window.onload = function() {
- board = document.getElementById("board");
- board.height = boardHeight;
- board.width = boardWidth;
- context = board.getContext("2d");
-
- context.fillStyle="skyblue";
- context.fillRect(player.x, player.y, player.width, player.height);
-
- requestAnimationFrame(update);
- document.addEventListener("keydown", movePlayer);
-
-
- createBlocks();
- }
-
- function update() {
- requestAnimationFrame(update);
-
- if (gameOver) {
- return;
- }
- context.clearRect(0, 0, board.width, board.height);
-
-
- context.fillStyle = "lightgreen";
- context.fillRect(player.x, player.y, player.width, player.height);
-
- context.fillStyle = "white";
- ball.x += ball.velocityX;
- ball.y += ball.velocityY;
- context.beginPath();
- context.arc(ball.x + ball.width / 2, ball.y + ball.height / 2, ball.width / 2, 0, 2 * Math.PI);
- context.fill();
- context.closePath();
-
-
- if (topCollision(ball, player) || bottomCollision(ball, player)) {
- ball.velocityY *= -1;
- }
- else if (leftCollision(ball, player) || rightCollision(ball, player)) {
- ball.velocityX *= -1;
- }
-
- if (ball.y <= 0) {
-
- ball.velocityY *= -1;
- }
- else if (ball.x <= 0 || (ball.x + ball.width >= boardWidth)) {
-
- ball.velocityX *= -1;
- }
- else if (ball.y + ball.height >= boardHeight) {
-
- context.font = "20px sans-serif";
- context.fillText("Game Over: Press 'Space' to Restart Again", 80, 400);
- gameOver = true;
- }
-
- //blocks
- context.fillStyle = "skyblue";
- for (let i = 0; i < blockArray.length; i++) {
- let block = blockArray[i];
- if (!block.break) {
- if (topCollision(ball, block) || bottomCollision(ball, block)) {
- block.break = true;
- ball.velocityY *= -1;
- score += 100;
- blockCount -= 1;
- }
- else if (leftCollision(ball, block) || rightCollision(ball, block)) {
- block.break = true;
- ball.velocityX *= -1;
- score += 100;
- blockCount -= 1;
- }
- context.fillRect(block.x, block.y, block.width, block.height);
- }
- }
-
-
- if (blockCount == 0) {
- score += 100*blockRows*blockColumns;
- blockRows = Math.min(blockRows + 1, blockMaxRows);
- createBlocks();
- }
-
-
- context.font = "20px sans-serif";
- context.fillText(score, 10, 25);
- }
-
- function outOfBounds(xPosition) {
- return (xPosition < 0 || xPosition + playerWidth > boardWidth);
- }
-
- function movePlayer(e) {
- if (gameOver) {
- if (e.code == "Space") {
- resetGame();
- console.log("RESET");
- }
- return;
- }
- if (e.code == "ArrowLeft") {
-
- let nextplayerX = player.x - player.velocityX;
- if (!outOfBounds(nextplayerX)) {
- player.x = nextplayerX;
- }
- }
- else if (e.code == "ArrowRight") {
- let nextplayerX = player.x + player.velocityX;
- if (!outOfBounds(nextplayerX)) {
- player.x = nextplayerX;
- }
-
- }
- }
-
- function detectCollision(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;
- }
-
- function topCollision(ball, block) {
- return detectCollision(ball, block) && (ball.y + ball.height) >= block.y;
- }
-
- function bottomCollision(ball, block) {
- return detectCollision(ball, block) && (block.y + block.height) >= ball.y;
- }
-
- function leftCollision(ball, block) {
- return detectCollision(ball, block) && (ball.x + ball.width) >= block.x;
- }
-
- function rightCollision(ball, block) {
- return detectCollision(ball, block) && (block.x + block.width) >= ball.x;
- }
-
- function createBlocks() {
- blockArray = [];
- for (let c = 0; c < blockColumns; c++) {
- for (let r = 0; r < blockRows; r++) {
- let block = {
- x : blockX + c*blockWidth + c*10,
- y : blockY + r*blockHeight + r*10,
- width : blockWidth,
- height : blockHeight,
- break : false
- }
- blockArray.push(block);
- }
- }
- blockCount = blockArray.length;
- }
-
- function resetGame() {
- gameOver = false;
- player = {
- x : boardWidth/2 - playerWidth/2,
- y : boardHeight - playerHeight - 5,
- width: playerWidth,
- height: playerHeight,
- velocityX : playerVelocityX
- }
- ball = {
- x : boardWidth/2,
- y : boardHeight/2,
- width: ballWidth,
- height: ballHeight,
- velocityX : ballVelocityX,
- velocityY : ballVelocityY
- }
- blockArray = [];
- blockRows = 3;
- score = 0;
- createBlocks();
- }
-
If you face any difficulties while creating Atari Breakout or your code is not working as expected, you can download the source code files by clicking download button.