index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="style.css" />
  <title>Breakout!</title>
</head>

<body unselectable="on" onselectstart="return false;">

  <div id="win" class="win">
    <h2>You WIN !!!</h2>
    <p id="scoreId"></p>
    <button id="close-btn" class="btn noselect close-btn">OK</button>
  </div>

  <h1 id="title" class="noselect">Breakout!</h1>
  <button id="rules-btn" class="btn rules-btn noselect">?</button>
  <div id="rules" class="rules">
    <div class="rules-info">
      <h2>Created by Ivan Khizhnyak</h2>
    </div>

    <div class="rules-info">
      <h3>How To Play:</h3>
      <p>
        Use your right and left keys to move the paddle to bounce the ball up
        and break the blocks.
        For phones: sensor to controll the paddle
      </p>
      <p>If you miss the ball, your score and the blocks will reset.</p>
    </div>

    <div class="rules-info">
      <label for="">
      Screen buttons:
      <input id="scrnBtnsCheck" class="checkbox" type="checkbox" checked>
      </label>
      
    </div>
    <button id="close-btn" class="btn noselect close-btn">OK</button>

  </div>

  <canvas id="canvas" class="noselect" width="800" height="600"></canvas>
  <div id="btn-grup" class="btn-grup">
    <button unselectable="on" onselectstart="return false;" id="leftBtn" class="btn noselect" ontouchend="btnUp()"
      ontouchstart="btnDown('left')">←</button>
    <button unselectable="on" onselectstart="return false;" id="rightBtn" class="btn noselect" ontouchend="btnUp()"
      ontouchstart="btnDown('right')">→</button>
  </div>


  <script src="script.js"></script>
</body>

</html>

<!-- 1. Create canvas context 
2. Create and draw ball 
3. Create and draw paddle 
4. Create bricks 
5. Draw score 
6. Add update() - Animate - requestAnimationFrame(cb) 
7. Move paddle 
8. Keyboard event handlers to move paddle 
9. Move ball 
10. Add wall bounderies 
11. Increase score when bricks break
12. Lose - redraw bricks, reset score -->