Gioco Brick Breaker HTML Canvas JavaScript

660 ythnymyhgnmkykyjhnyrfyn

Apri nell'Editor Pubblica il Tuo Codice

Gioco Brick Breaker HTML Canvas JavaScript

Consigliato

10 December 2025

Esempio di gioco di fisica Ragdoll di Matter.js

23 August 2025

Codice HTML e CSS della pagina di accesso turca

22 August 2025

Esempio di pulsanti di contatto HTML

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>

Consigliato

Esempio di gioco di fisica Ragdoll di Matter.js

Codice HTML e CSS della pagina di accesso turca

Esempio di pulsanti di contatto HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS