Jogo Brick Breaker HTML Canvas JavaScript

370 ythnymyhgnmkykyjhnyrfyn

Abrir no Editor Publique Seu Código

Jogo Brick Breaker HTML Canvas JavaScript

Recomendado

16 October 2025

Trecho HTML do carregador de cilindro CSS

19 May 2025

caixa de mosca para animação de jogos

26 February 2025

Página de destino do desenvolvedor HTML CSS

HTML

<!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>

Recomendado

Trecho HTML do carregador de cilindro CSS

caixa de mosca para animação de jogos

Página de destino do desenvolvedor HTML CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS