Juego Brick Breaker HTML Canvas JavaScript

1102 ythnymyhgnmkykyjhnyrfyn

Abrir en el editor Publica tu código

Juego Brick Breaker HTML Canvas JavaScript

Recomendado

15 October 2025

Plantilla de página de destino HTML: Agencia de viajes

16 March 2024

Iniciar sesión V1 HTML

18 October 2025

Botón HTML con efecto de desplazamiento (WEBLEB)

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

Plantilla de página de destino HTML: Agencia de viajes

Iniciar sesión V1 HTML

Botón HTML con efecto de desplazamiento (WEBLEB)

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS