用 html+css+javaScript 写弹弹球小游戏

最新推荐文章于 2024-08-14 10:44:43 发布

Jara_Wong

最新推荐文章于 2024-08-14 10:44:43 发布

阅读量681

点赞数 10

分类专栏：前端文章标签： html css javascript

本文链接：https://blog.csdn.net/weixin_43720253/article/details/140608931

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

游戏规则
小球在规定区域内弹动，碰到上、左、右三侧时会反弹。玩家使用鼠标控制底部挡板使小球反弹。碰到底部则弹出结束弹窗。
改变速度滑动条的值会动态调整小球的移动速度，小球的初始位置和方向随机化。

页面效果

在这里插入图片描述

代码如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>弹弹球游戏</title>
    <style>
      body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: #f0f0f0;
      }
      canvas {
        background-color: #000;
      }
      button {
        margin: 10px;
        padding: 10px 20px;
        font-size: 16px;
      }
      .button-container {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      #speedControl {
        margin: 10px;
        width: 200px;
      }
      #gameOverModal {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: white;
        border: 2px solid #0095dd;
        padding: 20px;
        text-align: center;
        z-index: 1000;
      }
      #gameOverModal button {
        background-color: #0095dd;
        color: white;
        border: none;
        padding: 10px 20px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="600" height="400"></canvas>
    <div class="button-container">
      <button id="startButton">开始</button>
      <button id="pauseButton" style="display: none">暂停</button>
      <input type="range" id="speedControl" min="1" max="10" value="2" />
      <label for="speedControl">速度</label>
    </div>
    <div id="gameOverModal">
      <p>游戏结束！</p>
      <button id="restartButton">重新开始</button>
    </div>

    <script>
      const canvas = document.getElementById("gameCanvas");
      const ctx = canvas.getContext("2d");

      let ballX,
        ballY,
        ballRadius = 10;
      let ballSpeedX, ballSpeedY;

      const paddleHeight = 10;
      const paddleWidth = 75;
      let paddleX = (canvas.width - paddleWidth) / 2;

      let isRunning = false;
      let interval;

      const startButton = document.getElementById("startButton");
      const pauseButton = document.getElementById("pauseButton");
      const speedControl = document.getElementById("speedControl");
      const gameOverModal = document.getElementById("gameOverModal");
      const restartButton = document.getElementById("restartButton");

      // 点击开始按钮
      startButton.addEventListener("click", startGame);
      // 点击暂停按钮
      pauseButton.addEventListener("click", pauseGame);
      // 点击重新开始按钮
      restartButton.addEventListener("click", restartGame);
      // 调整速度滑动条时更新速度
      speedControl.addEventListener("input", updateSpeed);

      // 鼠标移动事件，控制挡板的位置
      document.addEventListener("mousemove", mouseMoveHandler, false);

      // 鼠标移动事件处理函数
      function mouseMoveHandler(e) {
        const relativeX = e.clientX - canvas.offsetLeft;
        if (relativeX > 0 && relativeX < canvas.width) {
          paddleX = relativeX - paddleWidth / 2;
        }
      }

      // 绘制小球
      function drawBall() {
        ctx.beginPath();
        ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
        ctx.fillStyle = "#0095DD";
        ctx.fill();
        ctx.closePath();
      }

      // 绘制挡板
      function drawPaddle() {
        ctx.beginPath();
        ctx.rect(
          paddleX,
          canvas.height - paddleHeight,
          paddleWidth,
          paddleHeight
        );
        ctx.fillStyle = "#0095DD";
        ctx.fill();
        ctx.closePath();
      }

      // 绘制游戏画面
      function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawBall();
        drawPaddle();

        // 小球碰到左右墙壁反弹
        if (
          ballX + ballSpeedX > canvas.width - ballRadius ||
          ballX + ballSpeedX < ballRadius
        ) {
          ballSpeedX = -ballSpeedX;
        }

        // 小球碰到上方墙壁反弹
        if (ballY + ballSpeedY < ballRadius) {
          ballSpeedY = -ballSpeedY;
        } else if (ballY + ballSpeedY > canvas.height - ballRadius) {
          // 检测小球是否碰到挡板
          if (ballX > paddleX && ballX < paddleX + paddleWidth) {
            ballSpeedY = -ballSpeedY;
          } else {
            gameOver();
            return; // 停止后续更新
          }
        }

        // 更新小球位置
        ballX += ballSpeedX;
        ballY += ballSpeedY;
      }

      // 开始游戏
      function startGame() {
        if (!isRunning) {
          randomizeBall(); // 随机化小球位置和方向
          interval = setInterval(draw, 10);
          isRunning = true;
          startButton.style.display = "none";
          pauseButton.style.display = "block";
        }
      }

      // 暂停游戏
      function pauseGame() {
        if (isRunning) {
          clearInterval(interval);
          isRunning = false;
          startButton.textContent = "继续";
          startButton.style.display = "block";
          pauseButton.style.display = "none";
        }
      }

      // 重新开始游戏
      function restartGame() {
        randomizeBall(); // 随机化小球位置和方向
        paddleX = (canvas.width - paddleWidth) / 2;

        gameOverModal.style.display = "none";
        startGame();
      }

      // 更新小球速度
      function updateSpeed() {
        const newSpeed = parseFloat(speedControl.value);
        ballSpeedX = ballSpeedX > 0 ? newSpeed : -newSpeed; // 保持方向
        ballSpeedY = ballSpeedY > 0 ? newSpeed : -newSpeed; // 保持方向
      }

      // 随机化小球的初始位置和方向
      function randomizeBall() {
        // 随机初始位置
        ballX = Math.random() * (canvas.width - 2 * ballRadius) + ballRadius;
        ballY = Math.random() * (canvas.height / 2 - ballRadius) + ballRadius;

        // 随机初始方向
        const speed = parseFloat(speedControl.value);
        ballSpeedX = Math.random() * speed * 2 - speed; // 随机方向和速度
        ballSpeedY = Math.sqrt(speed * speed - ballSpeedX * ballSpeedX);
        if (Math.random() < 0.5) ballSpeedY = -ballSpeedY; // 随机反转Y方向
      }

      // 游戏结束
      function gameOver() {
        clearInterval(interval);
        isRunning = false;
        startButton.textContent = "开始";
        startButton.style.display = "block";
        pauseButton.style.display = "none";
        gameOverModal.style.display = "block";
      }
    </script>
  </body>
</html>

Jara_Wong

关注

10
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
用 html+css+javaScript 写弹弹球小游戏

弹弹球小游戏：小球在规定区域内弹动，碰到上、左、右三侧时会反弹。玩家使用鼠标控制底部挡板使小球反弹。碰到底部则弹出结束弹窗。改变速度滑动条的值会动态调整小球的移动速度，小球的初始位置和方向随机化。页面效果代码如下
复制链接

扫一扫

专栏目录