Tyler Pinho

Overview

Breakout is a classic arcade game where you control a paddle to bounce a ball and destroy bricks. In this tutorial we’ll be recreating Breakout, a classic arcade game, using HTML5 and React. By the end, you’ll have a fully functional game using HTML5 with multiple levels, powerups, touch controls, and a local high score board.

This project is meant to teach concepts of:

How to use HTML5 for game development.
Managing complex state and game logic.
Working with the <canvas> element.
Adding touch controls for mobile devices.
Persisting data using localStorage.

1. Project Setup and Creating the Game Canvas

Step 1: Project Setup

First, let’s create a new react project. I’m using Create React App but this will work with Next.JS or any other starting template:

npx create-react-app breakout-game

Step 2: Create the Component and Canvas

Throughout the rest of the project, you’ll see us utilize references and useRef quite a bit. This is because useRef is a hook in React that provides a way to create a mutable reference to a value or a DOM element. Unlike updating the state, updating a useRef value does not trigger a re-render of the component. This makes it useful for certain scenarios where you need to persist values across renders without causing unnecessary updates. As you can imagine it would be quite buggy and inefficient to continually re-render the game more than already necessary given we will be drawing our own frames using the canvas context.

What is the purpose of `useRef`?

Mutable Object: useRef returns a mutable object with a current property. You can assign any value to current, and it will persist across renders.
No Re-renders: Changing the current property of a useRef object does not cause the component to re-render.
DOM Access: It is commonly used to directly access and manipulate DOM elements.
Persistence: Store values that persist across renders without being tied to the component's lifecycle.

Create a new component called BreakoutGame.js, this will be our main component containing the game logic and UI. We will first add in a <canvas> element along with a reference to it:


  import React, { useRef } from 'react';

const BreakoutGame = () => {
  const canvasRef = useRef(null);

  return (
    <div>
      <h1>Breakout</h1>
      <canvas ref={canvasRef} width={800} height={600} style={{ border: '1px solid black' }} />
    </div>
  );
};

export default BreakoutGame;

Step 3: Initialize the Canvas Context

Use a useEffect hook to initialize the canvas context. The canvas context is what we will mainly use to interact with and draw to the canvas:


import React, { useEffect, useRef } from 'react';

const BreakoutGame = () => {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');

    // Draw a rectangle (placeholder for now)
    ctx.fillStyle = '#0095DD';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
  }, []);

  return (
    <div>
      <h1>Breakout Game</h1>
      <canvas ref={canvasRef} width={800} height={600} style={{ border: '1px solid black' }} />
    </div>
  );
};

export default BreakoutGame;

2. Drawing the Paddle and Ball

Step 1: Define Game Constants

Add constants for the paddle, ball, and other game elements. For the purposes of this tutorial we will be doing everything within the main BreakoutGame component however, in a full game it’d likely be helpful to store these values in a constants file to allow for centralization and easier time reading/manipulating the values that define the game. We’ll be adding in more values for now we will define just these:


const PADDLE_WIDTH = 100;
const PADDLE_HEIGHT = 10;
const BALL_RADIUS = 10;
const paddleWidthRef = useRef(PADDLE_WIDTH);

Step 2: Draw the Paddle and Ball

Update the useEffect hook to draw the paddle and ball as well as create the main Draw Game Loop. The Draw Game Loop is responsible for rendering each “frame” of the game. You can think of it as the main game logic where all of the future methods we create will be called from:


useEffect(() => {
  const canvas = canvasRef.current;
  const ctx = canvas.getContext('2d');

  // Draw paddle
  const drawPaddle = () => {
    ctx.beginPath();
    ctx.rect(paddleX, canvas.height - PADDLE_HEIGHT, PADDLE_WIDTH, PADDLE_HEIGHT);
    ctx.fillStyle = '#0095DD';
    ctx.fill();
    ctx.closePath();
  };

  // Draw ball
  const drawBall = () => {
    ctx.beginPath();
    ctx.arc(ballX, ballY, BALL_RADIUS, 0, Math.PI * 2);
    ctx.fillStyle = '#0095DD';
    ctx.fill();
    ctx.closePath();
  };

  // Clear canvas and redraw
  const draw = () => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawPaddle();
    drawBall();
  };

  draw();
}, []);

Step 3: Reset Paddle and Ball State

We are then going to add our resetBallAndPaddle method to be outside of the Draw Loop but within the useEffect so that we only execute this method on the initial level draw but not on every subsequent drawn frame.


// Reset ball and paddle position
const resetBallAndPaddle = () => {
  ballsRef.current = [{ x: 400, y: 300, dx: 4, dy: -4 }];
  paddleXRef.current = (canvasRef.current.width - paddleWidthRef.current) / 2;
  ballSpeedRef.current = 4; 
};

3. Drawing Bricks and Level Layouts

Step 1: Define Level Layouts

Let’s create a new constant LEVELS which will be used as a rough “level editor” to allow us to design stages, specifying where bricks should be located, as well as to also use for our Stage Complete logic:


const LEVELS = [
    // Level 1: Basic layout
    [
      [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],
    ],
    // Level 2: Checkerboard pattern
    [
      [1, 0, 1, 0, 1, 0, 1],
      [0, 1, 0, 1, 0, 1, 0],
      [1, 0, 1, 0, 1, 0, 1],
      [0, 1, 0, 1, 0, 1, 0],
      [1, 0, 1, 0, 1, 0, 1],
    ],
    // Level 3: Pyramid pattern
    [
      [0, 0, 1, 1, 1, 0, 0],
      [0, 1, 1, 1, 1, 1, 0],
      [1, 1, 1, 1, 1, 1, 1],
      [0, 1, 1, 1, 1, 1, 0],
      [0, 0, 1, 1, 1, 0, 0],
    ],
  ];

Step 2: Setup Game State

We’re going to add some more constants to define how a brick is drawn to ensure that all bricks look the same as well as store a reference to the current brick layout under bricksRef which we will use to draw the level as well as to check for Stage Completion. We are also going to add in some state info for current stage, score, lives, and if the level has been initialized or not along with their references. We are using both state and references here for different purposes. Because of closures if we used state within our draw method we would only ever get the initial value for our state despite it changing outside of the draw loop. Because of this we need to use references and keep those references updated with state. We could exclusively use references here but want to highlight the interplay and differences between working with state and references.


const BRICK_ROWS = 5;
const BRICK_COLUMNS = 7;
const BRICK_WIDTH = 75;
const BRICK_HEIGHT = 20;

const canvasRef = useRef(null);
const [stage, setStage] = useState(1);
const [score, setScore] = useState(0);
const [lives, setLives] = useState(3);
const [isLevelStarted, setIsLevelStarted] = useState(false);
const [gameOver, setGameOver] = useState(false);

 const ballsRef = useRef([{ x: 400, y: 300, dx: 4, dy: -4 }]);
  const paddleXRef = useRef(400);
  const bricksRef = useRef([]);
  const powerupsRef = useRef([]);
  const paddleWidthRef = useRef(PADDLE_WIDTH);
  const ballSpeedRef = useRef(4);
  const stageRef = useRef(stage);
  const scoreRef = useRef(score);
  const livesRef = useRef(lives);
  const gameOverRef = useRef(gameOver);

// Update refs when state changes
  useEffect(() => {
    stageRef.current = stage;
  }, [stage]);
  useEffect(() => {
    scoreRef.current = score;
  }, [score]);
  useEffect(() => {
    livesRef.current = lives;
  }, [lives]);
  useEffect(() => {
    gameOverRef.current = gameOver;
  }, [gameOver]);

Step 3: Initialize and Draw Bricks

We will add in an initBricks method to load our stage each time its a new level either because its the first level being loaded or the player completed the previous stage and needs the next one. Because Stage is index 1 based for the UI we will need to add in proper error handling to ensure we don't try to load a stage that doesn’t exist. We are also creating the first game over state for when the player successfully completes all stages by trying to load a level that exceeds the level list.


// Initialize bricks based on the current stage
  const initBricks = () => {
    if (stageRef.current > LEVELS.length) {
      setGameOver(true); // No more levels, game completed
      return;
    }
    else if (isLevelStarted)
    {
        return;
    }
    
    const level = LEVELS[stageRef.current - 1]; // Get the current level design
    bricksRef.current = [];
    for (let i = 0; i < BRICK_ROWS; i++) {
      bricksRef.current[i] = [];
      for (let j = 0; j < BRICK_COLUMNS; j++) {
        bricksRef.current[i][j] = { x: 0, y: 0, status: level[i][j] };
      }
    }
    setIsLevelStarted(true);
  };

const drawBricks = () => {
      const offsetX = (canvas.width - (BRICK_COLUMNS * (BRICK_WIDTH + 10))) / 2; // Center bricks horizontally
      for (let i = 0; i < BRICK_ROWS; i++) {
        for (let j = 0; j < BRICK_COLUMNS; j++) {
          if (bricksRef.current[i][j].status === 1) {
            const brickX = j * (BRICK_WIDTH + 10) + offsetX;
            const brickY = i * (BRICK_HEIGHT + 10) + 30;
            bricksRef.current[i][j].x = brickX;
            bricksRef.current[i][j].y = brickY;
            ctx.beginPath();
            ctx.rect(brickX, brickY, BRICK_WIDTH, BRICK_HEIGHT);
            ctx.fillStyle = '#0095DD';
            ctx.fill();
            ctx.closePath();
          }
        }
      }
    };

We are then going to add our drawBricks method into our Draw Game Loop to draw the level and center it within the canvas while the initBricks will exist outside of the Draw Loop but within the useEffect.

Step 4: Draw Background

In order to not have a transparent background, at the top of our draw method after clearing the initial rectangle we will then fill the entire canvas with a solid background color.


ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw a solid background
ctx.fillStyle = '#2c3e50';
ctx.fillRect(0, 0, canvas.width, canvas.height);

4. Movement and Collision Detection

Step 1: Paddle Movement for Mouse and Mobile

Within our main Draw Game Loop we will be adding all of our movement logic to the bottom as well as handle some error handling by removing the eventListeners we need when the page or component is unmounted. If using this within a SPA-like application like within NextJS this will cause errors without removing these eventListeners.


// Paddle movement
const handleMouseMove = (e) => {
  const relativeX = e.clientX - canvas.offsetLeft;
  if (relativeX > 0 && relativeX < canvas.width) {
    paddleXRef.current = relativeX - paddleWidthRef.current / 2;
  }
};

// Paddle movement (touch)
const handleTouchMove = (e) => {
  const touch = e.touches[0]; // Get the first touch
  const relativeX = touch.clientX - canvas.offsetLeft;
  if (relativeX > 0 && relativeX < canvas.width) {
    paddleXRef.current = relativeX - paddleWidthRef.current / 2;
  }
};

// Add event listeners
document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('touchmove', handleTouchMove);

requestAnimationFrame(draw);

// Cleanup event listeners on unmount
return () => {
  document.removeEventListener('mousemove', handleMouseMove);
  document.removeEventListener('touchmove', handleTouchMove);
};

Step 2: Add Ball to Brick Collision Detection

Update the draw function to handle collisions and increase the player score. We will update the bricksRef array and mark any destroyed brick as a 0 for use within the Level Completion logic later:


const collisionDetection = () => {
  balls.forEach((ball) => {
    for (let i = 0; i < BRICK_ROWS; i++) {
      for (let j = 0; j < BRICK_COLUMNS; j++) {
        const brick = bricks[i][j];
        if (brick.status === 1) {
          if (
            ball.x > brick.x &&
            ball.x < brick.x + BRICK_WIDTH &&
            ball.y > brick.y &&
            ball.y < brick.y + BRICK_HEIGHT
          ) {
            ball.dy = -ball.dy;
            brick.status = 0;
            setScore((prevScore) => prevScore + 1);
          }
        }
      }
    }
  });
};

Step 3: Add Ball Movement and Collisions With Walls and Paddle

Update the draw function to handle ball movement. Worth noting this is the second place we will be updating the Game Over state but for when the player fails and loses a ball/life:


ballsRef.current.forEach((ball) => {
  ball.x += ball.dx * (ballSpeedRef.current / 4);
  ball.y += ball.dy * (ballSpeedRef.current / 4);

  // Wall collision
  if (ball.x + ball.dx > canvas.width - BALL_RADIUS || ball.x + ball.dx < BALL_RADIUS) {
    ball.dx = -ball.dx;
  }
  if (ball.y + ball.dy < BALL_RADIUS) {
    ball.dy = -ball.dy;
  } else if (ball.y + ball.dy > canvas.height - BALL_RADIUS) {
    if (ball.x > paddleXRef.current && ball.x < paddleXRef.current + paddleWidthRef.current) {
      ball.dy = -ball.dy;
    } else {
      // Remove the ball if it hits the bottom
      ballsRef.current = ballsRef.current.filter((b) => b !== ball);
      if (ballsRef.current.length === 0) {
        setLives((prevLives) => {
          if (prevLives === 1) {
            setGameOver(true);
            return 0;
          }
          return prevLives - 1;
        });
        if (livesRef.current === 0) {
          setGameOver(true);
        } else {
          resetBallAndPaddle();
        }
      }
    }
  }
});

5. Tracking Level Completion, Score, and Lives

Step 1: Check if Stage is Complete

Add logic to progress to the next level when all bricks are destroyed:


const checkStageCompletion = () => {
  if (bricksRef.current.every((row) => row.every((brick) => brick.status === 0))) {
    if (stageRef.current <= LEVELS.length) {
      setIsLevelStarted(false);
      setStage((prevStage) => prevStage + 1); // Move to the next stage
      resetBallAndPaddle(); // Reset ball and paddle
    } else {
      setGameOver(true); // Game completed
    }
  }
};

Step 2: Check and Update Draw Method

At this point your Draw Method and UseEffect Loop should be updated to use all of the individual methods we’ve created up until now. It should be updated to look roughly like this:


useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    const draw = () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // Draw a solid background
      ctx.fillStyle = '#2c3e50';
      ctx.fillRect(0, 0, canvas.width, canvas.height);

      drawBricks();
      drawBalls();
      drawPaddle();
      collisionDetection();
      checkStageCompletion();
      ballMovementAndCollision();

      // Add event listeners
      document.addEventListener('mousemove', handleMouseMove);
      document.addEventListener('touchmove', handleTouchMove);

      requestAnimationFrame(draw);

      // Cleanup event listeners on unmount
      return () => {
        document.removeEventListener('mousemove', handleMouseMove);
        document.removeEventListener('touchmove', handleTouchMove);
      };
    };

    initBricks();
    resetBallAndPaddle();

    const animationFrameId = requestAnimationFrame(draw);

    // Cleanup on unmount
    return () => {
      cancelAnimationFrame(animationFrameId);
    };
  }, [stage, lives, gameOver]);

We will want to update this draw method though to not continue running once the game has completed either through completing all the stages or losing all of your lives. We also want error handling in the case we run this on a SPA or other page where the canvas may be disposed of, so we will add the following check to the start of our draw method:

Step 3: Add a button to reset the game


const resetGame = () => {
  setStage(1);
  setScore(0);
  setLives(3);
  setGameOver(false);
  setIsLevelStarted(false);
  bricksRef.current = [];
  powerupsRef.current = [];
  paddleWidthRef.current = PADDLE_WIDTH;
  resetBallAndPaddle();
  initBricks();
};

You can then update your actual component to display the button to reset the game when a game over is reached


<div>
  <h1>Breakout - Stage {stage}.</h1>
  <p>Score: {score} | Lives: {lives}</p>
  <canvas ref={canvasRef} width={800} height={600} style={{ border: "1px solid black", position: "relative" }} />
  {gameOver && (
    <div>
      <p>Game Over! Refresh or click to play again.</p>
      <button onClick={resetGame}>Try Again</button>
    </div>
  )}
</div>

6. Implementing Powerups

Step 1: Define Powerup Types

First we will define several types of powerups and essentially use an enum to make referencing powerup types easier. Our three powers are going to end up temporarily increasing the size of the paddle, temporarily slowing down ball and powerup movement speed, or it will split the ball into multiple balls. The expand paddle and slow ball powerups are simple and just manipulate one of our constants for a set period of time so their code is pretty basic. The split ball is more complex in that normally you’d have a challenge of having to decide when a ball collides beneath the paddle to decide whether to end the level or continue. However, because we created the ballsRef as an array from the start all we need to do is add a new ball to the array and our previous ball collision logic is smart enough to remove the ball and if no balls would exist after then remove a life. Because of that the code we need to add in to support powerups is pretty easy.


const POWERUP_TYPES = {
  EXPAND_PADDLE: 'expand_paddle',
  SLOW_BALL: 'slow_ball',
  SPLIT_BALL: 'split_ball',
};

const applyPowerup = (powerup) => {
  switch (powerup.type) {
    case POWERUP_TYPES.EXPAND_PADDLE:
      paddleWidthRef.current = PADDLE_WIDTH * 1.5;
      setTimeout(() => (paddleWidthRef.current = PADDLE_WIDTH), 5000); // Reset after 5 seconds
      break;
    case POWERUP_TYPES.SLOW_BALL:
      ballSpeedRef.current = 2;
      setTimeout(() => (ballSpeedRef.current = 4), 5000); // Reset after 5 seconds
      break;
    case POWERUP_TYPES.SPLIT_BALL:
      if (ballsRef.current.length < 4) {
        const newBall = { ...ballsRef.current[0], dx: -ballsRef.current[0].dx }; // Create a new ball with opposite direction
        ballsRef.current.push(newBall);
      }
      break;
    default:
      break;
  }
};

const getPowerupColor = (type) => {
  switch (type) {
    case POWERUP_TYPES.EXPAND_PADDLE:
      return 'green';
    case POWERUP_TYPES.SLOW_BALL:
      return 'blue';
    case POWERUP_TYPES.SPLIT_BALL:
      return 'purple';
    default:
      return 'black';
  }
};

Step 2: Spawn and Move Powerups

Add logic to spawn powerups when bricks are destroyed by updating the collision detection with bricks to have a small chance to spawn a powerup.


if (Math.random() < 0.2) {
  const powerupType = Object.values(POWERUP_TYPES)[Math.floor(Math.random() * 3)];
  powerups.push({
    x: brick.x + BRICK_WIDTH / 2,
    y: brick.y + BRICK_HEIGHT / 2,
    type: powerupType,
    color: getPowerupColor(powerupType),
  });
}

const drawPowerups = () => {
  powerupsRef.current.forEach((powerup) => {
    ctx.beginPath();
    ctx.rect(powerup.x, powerup.y, 20, 20);
    ctx.fillStyle = powerup.color;
    ctx.fill();
    ctx.closePath();
  });
};

// Powerup movement and collision
powerupsRef.current.forEach((powerup, index) => {
  powerup.y += 2; // Move powerup down
  if (
    powerup.y + 20 > canvas.height - PADDLE_HEIGHT &&
    powerup.x > paddleXRef.current &&
    powerup.x < paddleXRef.current + paddleWidthRef.current
  ) {
    applyPowerup(powerup);
    powerupsRef.current.splice(index, 1); // Remove powerup after collection
  }
});

We will need to add the drawPowerups method to our draw method stack as well as the powerup movement code to ensure it gets executed.

7. Implementing a Local High Score Board

As a bit of final polish we’ll add in a local high score board for the player that is persistent between sessions. We will store the high score in localStorage and load/update it via hooks reading the score state. There are good and bad reasons to use localStorage over cookies and different browsers will treat the security and readability of these values different from one another. However, localStorage is generally preferred in enterprise software when possible due to cookie and header size issues potentially causing 431 errors within the network stack. For our purposes either is fine but we’re choosing localStorage for the principle.


const [highScore, setHighScore] = useState(0);

//Load High Score
useEffect(() => {
  const savedHighScore = localStorage.getItem('breakoutHighScore');
  if (savedHighScore) {
    setHighScore(parseInt(savedHighScore, 10));
  }
}, []);

//Update High Score
 useEffect(() => {
    if (score > highScore) {
      setHighScore(score);
      localStorage.setItem('breakoutHighScore', score.toString());
    }
  }, [score, highScore]);

You can then update the HTML layout to display the high score as follows:


<div>
  <h1>Breakout - Stage {stage}.</h1>
  <p>Score: {score} | Lives: {lives} | High Score: {highScore}</p>
  <canvas ref={canvasRef} width={800} height={600} style={{ border: "1px solid black", position: "relative" }} />
  {gameOver && (
    <div>
      <p>Game Over! Refresh or click to play again.</p>
      <button onClick={resetGame}>Try Again</button>
    </div>
  )}
</div>

8. Handling Mobile Screen Sizes

Even though our game is finished at this point, along with being fully functional on Desktop and Tablet devices, if you would publish this website or try to play the game from a mobile device or with another device with a smaller screen size than 800x600 you’d see that the game hangs off the screen essentially making it unplayable or forcing the user to scroll the page horizontally as well as do a touch swipe. The solve for this is to dynamically scale our game’s canvas to work across any device.

There are many techniques to this depending on the level of fidelity you want as well as the amount of time you want to dedicate to making the game look and feel good at those more niche resolutions. For today we’ll go with a simple scalar using the screen size. We’ll define two new constants with the rest of the game’s constants.


const STAGE_WIDTH = Math.min(window.outerWidth * .8, 800);
const STAGE_HEIGHT = Math.min(window.outerHeight * .8, 600);

The "window" is a global object automatically provided within all HTML pages within web browsers. It represents the browser's window or tab where your web page is displayed. The window object provides many methods and properties to interact with the browser itself; however, be aware that in Server Side Rendering (SSR) the window will be unavailable as its only present on the browser. From its API we’re going to specifically use the outerWidth and outerHeight because it’ll represent the size of the full window to compare against our default resolution and choose whichever is the smallest of the two.

Now that our stage is scaling properly, we’ll need to scale other UI elements like the bricks and position of elements like the ball. The bricks are defaulted to by 75px wide and 20px tall within a 800px by 600px scaled stage. We can use the ratio of these to determine the new constant values and update the reset methods to also use it:


const BRICK_WIDTH = STAGE_WIDTH/11;
const BRICK_HEIGHT = STAGE_HEIGHT/30;

The ball’s starting point can also be determined using a similar method. It was defaulted to be in the middle of the stage using the hard-coded constants as well but now we can use our scaled stage width and height.


const ballsRef = useRef([{ x: STAGE_WIDTH/2, y: STAGE_HEIGHT/2, dx: 4, dy: -4 }]);
const paddleXRef = useRef(STAGE_WIDTH/2);

const resetBallAndPaddle = () => {
  ballsRef.current = [{ x: STAGE_WIDTH/2, y: STAGE_HEIGHT/2, dx: 4, dy: -4 }]; // Reset to one ball
  paddleXRef.current = (canvasRef.current.width - paddleWidthRef.current) / 2;
  ballSpeedRef.current = 4; // Reset ball speed
};

const resetGame = () => {
    setStage(1);
    setScore(0);
    setLives(3);
    setGameOver(false);
    setIsLevelStarted(false);
    bricksRef.current = [];
    powerupsRef.current = [];
    paddleWidthRef.current = PADDLE_WIDTH;
    resetBallAndPaddle();
    initBricks();
  };

Lastly we’ll update the canvas element to also utilize the new constants as follows:


<div>
  <h1>Breakout - Stage {stage}.</h1>
  <p>Score: {score} | Lives: {lives} | High Score: {highScore}</p>
  <canvas ref={canvasRef} width={STAGE_WIDTH} height={STAGE_HEIGHT} style={{ border: "1px solid black", position: "relative" }} />
  {gameOver && (
    <div>
      <p>Game Over! Refresh or click to play again.</p>
      <button onClick={resetGame}>Try Again</button>
    </div>
  )}
</div>

9. Final Code

Congratulations! You’ve built a fully functional Breakout game using React and HTML5. This project demonstrated how to:

Use React for game development.
Work with the <canvas> element.
Manage complex state and game logic via states and references.
Add touch controls for mobile devices.
Persist data using localStorage.

The complete source code for the Breakout game can be downloaded below:

Download Breakout Repo

Tyler Pinho

React | JavaScript | HTML |

Breakout Tutorial: Recreating Breakout in HTML5/React

Overview

1. Project Setup and Creating the Game Canvas

Step 1: Project Setup

Step 2: Create the Component and Canvas

What is the purpose of `useRef`?

Step 3: Initialize the Canvas Context

2. Drawing the Paddle and Ball

Step 1: Define Game Constants

Step 2: Draw the Paddle and Ball

Step 3: Reset Paddle and Ball State

3. Drawing Bricks and Level Layouts

Step 1: Define Level Layouts

Step 2: Setup Game State

Step 3: Initialize and Draw Bricks

Step 4: Draw Background

4. Movement and Collision Detection

Step 1: Paddle Movement for Mouse and Mobile

Step 2: Add Ball to Brick Collision Detection

Step 3: Add Ball Movement and Collisions With Walls and Paddle

5. Tracking Level Completion, Score, and Lives

Step 1: Check if Stage is Complete

Step 2: Check and Update Draw Method

Step 3: Add a button to reset the game

6. Implementing Powerups

Step 1: Define Powerup Types

Step 2: Spawn and Move Powerups

7. Implementing a Local High Score Board

8. Handling Mobile Screen Sizes

9. Final Code

React | JavaScript | HTML |

Breakout Tutorial: Recreating Breakout in HTML5/React

Overview

1. Project Setup and Creating the Game Canvas

Step 1: Project Setup

Step 2: Create the Component and Canvas

What is the purpose of useRef?

Step 3: Initialize the Canvas Context

2. Drawing the Paddle and Ball

Step 1: Define Game Constants

Step 2: Draw the Paddle and Ball

Step 3: Reset Paddle and Ball State

3. Drawing Bricks and Level Layouts

Step 1: Define Level Layouts

Step 2: Setup Game State

Step 3: Initialize and Draw Bricks

Step 4: Draw Background

4. Movement and Collision Detection

Step 1: Paddle Movement for Mouse and Mobile

Step 2: Add Ball to Brick Collision Detection

Step 3: Add Ball Movement and Collisions With Walls and Paddle

5. Tracking Level Completion, Score, and Lives

Step 1: Check if Stage is Complete

Step 2: Check and Update Draw Method

Step 3: Add a button to reset the game

6. Implementing Powerups

Step 1: Define Powerup Types

Step 2: Spawn and Move Powerups

7. Implementing a Local High Score Board

8. Handling Mobile Screen Sizes

9. Final Code

What is the purpose of `useRef`?