Brick Breaker Game HTML Canvas JavaScript

Open In Editor Publish Your Code

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Shooter Pro UI</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: 'Segoe UI', sans-serif;
      background: #121212;
      color: #eee;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 100vh;
    }
    header {
      width: 100%;
      background: #1e1e1e;
      padding: 15px;
      text-align: center;
      font-size: 24px;
      color: #fff;
      box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    }
    #gameArea {
      position: relative;
      width: 90%;
      max-width: 600px;
      aspect-ratio: 5/4;
      border: 2px solid #444;
      background: url('https://cdn.pixabay.com/photo/2020/10/01/18/45/stars-5616976_960_720.jpg') center / cover no-repeat;
      overflow: hidden;
      margin-top: 20px;
    }
    canvas {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
    }
    .ui-panel {
      margin-top: 15px;
      width: 90%;
      max-width: 600px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .ui-panel div {
      font-size: 18px;
    }
    button.start-btn {
      padding: 10px 20px;
      font-size: 18px;
      background: #0a84ff;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background 0.3s;
    }
    button.start-btn:hover {
      background: #0060c8;
    }
    #leaderboard {
      margin-top: 20px;
      width: 90%;
      max-width: 600px;
      background: #1e1e1e;
      color: #ddd;
      padding: 10px;
      border-radius: 5px;
    }
    #leaderboard h3 { margin-bottom: 5px; }
    #leaderboard ol { padding-left: 20px; }
    /* mobile touch control indicator */
    .touch-info {
      margin-top: 10px;
      font-size: 14px;
      color: #aaa;
    }
  </style>
</head>
<body>
  <header>Shooter Pro with Sound & Leaderboard</header>
  <div id="gameArea">
    <canvas id="shooterCanvas"></canvas>
  </div>
  <div class="ui-panel">
    <div>Score: <span id="score">0</span></div>
    <div>High Score: <span id="highScore">0</span></div>
    <button id="startBtn" class="start-btn">เริ่มเกม</button>
  </div>
  <div class="touch-info">บนมือถือ: แตะที่จอด้านที่ต้องการเลื่อนฐานยิง / แตะกลางจอเพื่อยิง</div>
  <div id="leaderboard">
    <h3>Leaderboard (Top 5)</h3>
    <ol id="leaderboardList">
      
    </ol>
  </div>

<audio id="sfxShoot" src="https://assets.mixkit.co/sfx/preview/mixkit-short-laser-gun-shot-622.mp3"></audio>
  <audio id="sfxHit" src="https://assets.mixkit.co/sfx/preview/mixkit-arcade-game-explosion-784.mp3"></audio>
  <audio id="sfxGameOver" src="https://assets.mixkit.co/sfx/preview/mixkit-arcade-retro-game-over-470.mp3"></audio>

let width, height;
    function resizeCanvas() {
      width = canvas.clientWidth;
      height = canvas.clientHeight;
      canvas.width = width;
      canvas.height = height;
    }
    window.addEventListener('resize', resizeCanvas);
    resizeCanvas();

// Game variables
    let score = 0;
    let highScore = parseInt(localStorage.getItem('shooterHighScore')) || 0;
    let playerX, playerWidth = 60, playerHeight = 15;
    let bullets = [];
    let targets = [];
    let gameRunning = false;
    let animationFrame;
    const sfxShoot = document.getElementById('sfxShoot');
    const sfxHit = document.getElementById('sfxHit');
    const sfxGameOver = document.getElementById('sfxGameOver');

// Leaderboard
    let leaderboard = JSON.parse(localStorage.getItem('shooterLeaderboard')) || [];

function startGame() {
      score = 0;
      document.getElementById('score').textContent = score;
      document.getElementById('highScore').textContent = highScore;
      playerX = width/2 - playerWidth/2;
      bullets = [];
      spawnTargets();
      gameRunning = true;

loop();

// Event listeners
      window.addEventListener('mousemove', mouseMoveHandler);
      window.addEventListener('touchmove', touchMoveHandler);
      window.addEventListener('click', shootHandler);
      window.addEventListener('touchstart', shootHandler);

document.getElementById('startBtn').disabled = true;
    }

function clampPlayer() {
      if (playerX < 0) playerX = 0;
      if (playerX + playerWidth > width) playerX = width - playerWidth;
    }

function shootHandler(e) {
      if (!gameRunning) return;
      // ยิง
      sfxShoot.currentTime = 0;
      sfxShoot.play();
      bullets.push({
        x: playerX + playerWidth / 2,
        y: height - playerHeight - 10,
        radius: 5,
        speedY: 5
      });
    }

function update() {
      // move bullets
      bullets = bullets.filter(b => b.y > 0);
      bullets.forEach(b => b.y -= b.speedY);

// move targets
      targets.forEach(t => {
        t.x += t.speedX * t.direction;
        if (t.x + t.size > width || t.x < 0) {
          t.direction *= -1;
        }
      });

// check collisions
      bullets.forEach((b, bi) => {
        targets.forEach((t, ti) => {
          if (b.x > t.x && b.x < t.x + t.size && b.y < t.y + t.size && b.y > t.y) {
            // hit
            sfxHit.currentTime = 0;
            sfxHit.play();
            score += 1;
            document.getElementById('score').textContent = score;
            // remove target & bullet
            targets.splice(ti, 1);
            bullets.splice(bi, 1);
          }
        });
      });

// if targets cleared → next wave
      if (targets.length === 0) {
        spawnTargets();
      }
    }

function draw() {
      ctx.clearRect(0, 0, width, height);
      drawPlayer();
      drawTargets();
      drawBullets();
    }

function loop() {
      if (!gameRunning) {
        return;
      }
      update();
      draw();
      animationFrame = requestAnimationFrame(loop);
    }

function endGame() {
      gameRunning = false;
      sfxGameOver.currentTime = 0;
      sfxGameOver.play();
      // update high score
      if (score > highScore) {
        highScore = score;
        localStorage.setItem('shooterHighScore', highScore);
      }
      // leaderboard
      updateLeaderboard(score);
      showLeaderboard();
      document.getElementById('startBtn').disabled = false;
    }

function updateLeaderboard(sc) {
      leaderboard.push(sc);
      leaderboard.sort((a,b) => b - a);
      leaderboard = leaderboard.slice(0,5);
      localStorage.setItem('shooterLeaderboard', JSON.stringify(leaderboard));
    }

// end game condition: e.g., miss bullets or time or allow game over if player fails
    // For demo, we put simple condition: miss too many or bullet overflows? We'll use timer
    // Let's set a time limit
    let gameTimer = 20; // 20 seconds per play
    let timerInterval;
    function startTimer() {
      gameTimer = 20;
      const timerEl = document.createElement('div');
      timerEl.id = 'timerEl';
      timerEl.style = 'position:absolute;top:10px;right:10px;color:#fff;font-size:20px;';
      document.getElementById('gameArea').appendChild(timerEl);
      timerInterval = setInterval(() => {
        gameTimer -= 1;
        timerEl.textContent = `Time: ${gameTimer}s`;
        if (gameTimer <= 0) {
          clearInterval(timerInterval);
          endGame();
        }
      }, 1000);
    }

document.getElementById('startBtn').addEventListener('click', () => {
      startGame();
      startTimer();
    });

// load leaderboard on start
    showLeaderboard();
  </script>
</body>
</html>

Brick Breaker Game HTML Canvas JavaScript

Recommended

HTML CSS Login Form Template

Free Simple HTML Login Form

CSS Animation Container HTML Structure

HTML

CSS

JS

Recommended

HTML CSS Login Form Template

Free Simple HTML Login Form

CSS Animation Container HTML Structure

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS