当前位置：首页 > JavaScript

js网页实现炫舞

2026-04-04 21:09:59JavaScript

js网页实现炫舞

使用HTML5和JavaScript实现炫舞游戏

创建一个基于网页的炫舞游戏需要结合HTML5、CSS和JavaScript技术。以下是实现的基本框架和关键步骤：

js网页实现炫舞

游戏界面设计

<div id="game-container">
  <div id="stage"></div>
  <div id="controls">
    <button id="start-btn">开始游戏</button>
    <div id="score">得分: 0</div>
  </div>
  <div id="arrows-container"></div>
</div>

核心游戏逻辑

// 游戏配置
const config = {
  arrowSpeed: 2,
  spawnInterval: 1000,
  targetZoneHeight: 100,
  keys: {
    'ArrowUp': 'up',
    'ArrowDown': 'down',
    'ArrowLeft': 'left',
    'ArrowRight': 'right'
  }
};

// 游戏状态
let gameState = {
  score: 0,
  isPlaying: false,
  arrows: []
};

箭头生成系统

function createArrow() {
  const directions = ['up', 'down', 'left', 'right'];
  const direction = directions[Math.floor(Math.random() * directions.length)];

  const arrow = document.createElement('div');
  arrow.className = `arrow ${direction}`;
  arrow.dataset.direction = direction;
  arrow.style.top = '0px';

  document.getElementById('arrows-container').appendChild(arrow);
  gameState.arrows.push(arrow);
}

游戏循环实现

function gameLoop() {
  if (!gameState.isPlaying) return;

  const arrowsContainer = document.getElementById('arrows-container');
  const containerHeight = arrowsContainer.offsetHeight;

  gameState.arrows.forEach((arrow, index) => {
    const currentTop = parseInt(arrow.style.top);
    const newTop = currentTop + config.arrowSpeed;
    arrow.style.top = `${newTop}px`;

    // 检查是否到达目标区域
    if (newTop >= containerHeight - config.targetZoneHeight && 
        newTop <= containerHeight) {
      arrow.classList.add('target');
    } else if (newTop > containerHeight) {
      // 移除超出屏幕的箭头
      arrowsContainer.removeChild(arrow);
      gameState.arrows.splice(index, 1);
    }
  });

  requestAnimationFrame(gameLoop);
}

键盘事件处理

document.addEventListener('keydown', (e) => {
  if (!gameState.isPlaying) return;

  const direction = config.keys[e.key];
  if (!direction) return;

  const targetArrow = gameState.arrows.find(arrow => 
    arrow.classList.contains('target') && 
    arrow.dataset.direction === direction
  );

  if (targetArrow) {
    // 成功击中
    gameState.score += 100;
    document.getElementById('score').textContent = `得分: ${gameState.score}`;
    targetArrow.remove();
    gameState.arrows = gameState.arrows.filter(a => a !== targetArrow);
  }
});

游戏启动控制

document.getElementById('start-btn').addEventListener('click', () => {
  gameState.isPlaying = true;
  gameState.score = 0;
  document.getElementById('score').textContent = '得分: 0';

  // 清空现有箭头
  gameState.arrows.forEach(arrow => arrow.remove());
  gameState.arrows = [];

  // 开始生成箭头
  const spawnInterval = setInterval(createArrow, config.spawnInterval);

  // 启动游戏循环
  gameLoop();
});

CSS样式设计

#game-container {
  width: 800px;
  height: 600px;
  margin: 0 auto;
  position: relative;
  background-color: #222;
}

.arrow {
  position: absolute;
  width: 50px;
  height: 50px;
  background-size: contain;
  background-repeat: no-repeat;
  left: 50%;
  transform: translateX(-50%);
}

.arrow.up { background-image: url('up-arrow.png'); }
.arrow.down { background-image: url('down-arrow.png'); }
.arrow.left { background-image: url('left-arrow.png'); }
.arrow.right { background-image: url('right-arrow.png'); }

.arrow.target {
  filter: drop-shadow(0 0 10px yellow);
}