शूटर गेम HTML5 कैनवास लीडरबोर्ड के साथ

332 ythnymyhgnmkykyjhnyrfyn

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

2 March 2024

सिम्पल ट्रांसलेटर एप्लिकेशन (इंग्लिश से उर्दू)

21 September 2024

सत्यापन के साथ प्रोफ़ाइल डेटा जोड़ने के लिए जोड़ें बटन खोलें

16 July 2025

प्रकाश तारों और सीढ़ियों के साथ सीएसएस स्टेज

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>

अनुशंसित

सिम्पल ट्रांसलेटर एप्लिकेशन (इंग्लिश से उर्दू)

सत्यापन के साथ प्रोफ़ाइल डेटा जोड़ने के लिए जोड़ें बटन खोलें

प्रकाश तारों और सीढ़ियों के साथ सीएसएस स्टेज

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS