自制消遣小游戏(补)
  • 板块灌水区
  • 楼主yaoge2012
  • 当前回复2
  • 已保存回复2
  • 发布时间2024/1/11 20:57
  • 上次更新2024/1/11 21:37:42
查看原帖
自制消遣小游戏(补)
1135416
yaoge2012楼主2024/1/11 20:57

昨天发了一个帖,markdown有问题,被举报了。重新发一下 还是键盘右键向右,键盘左键向左,空格发射子弹,射一下蓝色方块开始游戏

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>消遣小游戏 - yaoge2012</title>
  <style>
    #game-container {
      width: 400px;
      height: 600px;
      border: 1px solid #0db53a;
      margin: 0 auto;
    }

    .plane {
      width: 50px;
      height: 50px;
      background-color: red;
      position: absolute;
      bottom: 0;
    }

    .enemy-plane {
      width: 50px;
      height: 50px;
      background-color: blue;
      position: absolute;
      top: 0;
    }

    .bullet {
      width: 5px;
      height: 10px;
      background-color: rgb(33, 178, 219);
      position: absolute;
    }

    #score {
      font-size: 24px;
      margin-bottom: 10px;
    }

    #lives {
      font-size: 18px;
    }
  </style>
</head>
<body>
  <h1>小袁公司 - 消遣小游戏</h1>
  <div id="game-container">
    <div id="score">得分: 0</div>
    <div id="lives">生命值: 3</div>
  </div>

  <script>
    // 获取游戏容器
    var gameContainer = document.getElementById('game-container');

    // 设置游戏容器的样式
    gameContainer.style.position = 'relative';

    // 创建飞机元素
    var plane = document.createElement('div');
    plane.className = 'plane';
    plane.style.left = '175px';
    gameContainer.appendChild(plane);

    // 创建敌机元素
    var enemyPlane = document.createElement('div');
    enemyPlane.className = 'enemy-plane';
    enemyPlane.style.left = '175px';
    gameContainer.appendChild(enemyPlane);

    // 创建子弹元素
    var bullet = document.createElement('div');
    bullet.className = 'bullet';

    // 初始化得分和生命值
    var score = 0;
    var lives = 3;

    // 更新得分和生命值显示
    function updateScoreAndLives() {
      var scoreElement = document.getElementById('score');
      var livesElement = document.getElementById('lives');

      scoreElement.textContent = '得分: ' + score;
      livesElement.textContent = '生命值: ' + lives;
    }

    // 移动敌机
    function moveEnemyPlane() {
      var currentTop = parseInt(enemyPlane.style.top);

      // 敌机向下移动
      enemyPlane.style.top = currentTop + 10 + 'px';

      // 如果敌机超出游戏容器,则重新回到顶部
      if (currentTop > gameContainer.offsetHeight) {
        enemyPlane.style.top = '0px';
        enemyPlane.style.left = Math.random() * (gameContainer.offsetWidth - enemyPlane.offsetWidth) + 'px';
      }

      // 检查是否与飞机相撞
      if (checkCollision()) {
        lives--;
        updateScoreAndLives();

        // 如果生命值为0,则游戏结束
        if (lives === 0) {
          alert('游戏结束!');
          clearInterval(intervalId);
        }
      }
    }

    // 发射子弹
    function shoot() {
      var currentLeft = parseInt(plane.style.left);

      // 设置子弹的初始位置
      bullet.style.left = currentLeft + 22 + 'px';
      bullet.style.bottom = '50px';

      gameContainer.appendChild(bullet);

      // 移动子弹
      var bulletIntervalId = setInterval(function() {
        var currentBottom = parseInt(bullet.style.bottom);

        // 子弹向上移动
        bullet.style.bottom = currentBottom + 10 + 'px';

        // 检查是否击中敌机
        if (checkHit()) {
          score++;
          updateScoreAndLives();

          // 移除子弹和敌机
          gameContainer.removeChild(bullet);
          enemyPlane.style.top = '0px';
          enemyPlane.style.left = Math.random() * (gameContainer.offsetWidth - enemyPlane.offsetWidth) + 'px';

          // 停止移动子弹
          clearInterval(bulletIntervalId);
        }

        // 如果子弹超出游戏容器,则移除子弹
        if (currentBottom > gameContainer.offsetHeight) {
          gameContainer.removeChild(bullet);
          clearInterval(bulletIntervalId);
        }
      }, 50);
    }

    // 检查碰撞
    function checkCollision() {
      var planeRect = plane.getBoundingClientRect();
      var enemyPlaneRect = enemyPlane.getBoundingClientRect();

      return (
        planeRect.left < enemyPlaneRect.right &&
        planeRect.right > enemyPlaneRect.left &&
        planeRect.top < enemyPlaneRect.bottom &&
        planeRect.bottom > enemyPlaneRect.top
      );
    }

    // 检查击中
    function checkHit() {
      var bulletRect = bullet.getBoundingClientRect();
      var enemyPlaneRect = enemyPlane.getBoundingClientRect();

      return (
        bulletRect.left < enemyPlaneRect.right &&
        bulletRect.right > enemyPlaneRect.left &&
        bulletRect.top < enemyPlaneRect.bottom &&
        bulletRect.bottom > enemyPlaneRect.top
      );
    }

    // 监听键盘按键事件
    document.addEventListener('keydown', function(event) {
      // 获取当前飞机的位置
      var currentLeft = parseInt(plane.style.left);

      // 根据按键调整飞机的位置
      if (event.key === 'ArrowLeft') {
        plane.style.left = currentLeft - 10 + 'px';
      } else if (event.key === 'ArrowRight') {
        plane.style.left = currentLeft + 10 + 'px';
      } else if (event.key === ' ') {
        // 按下空格键发射子弹
        shoot();
      }
    });

    // 每隔一段时间移动敌机
    var intervalId = setInterval(moveEnemyPlane, 100);
  </script>
</body>
</html>

2024/1/11 20:57
加载中...