划龙舟游云端，指尖玩转传统文化

前端

2023-09-08 13:59:24

上个端午，笔者在端午小长假写了一个划龙舟的小游戏，反响热烈。借此契机，我想号召大家一起动手，用代码书写传统文化，传承非遗。

本文将为大家提供一个用HTML和CSS制作划龙舟小游戏的教程，让大家在端午节期间也能在云端划龙舟，领略传统文化的魅力。

一、准备工作

在开始编写游戏之前，我们需要准备一些东西：

一款代码编辑器，如Visual Studio Code或Sublime Text
一些基本的HTML和CSS知识
一颗热爱传统文化的心

二、游戏设计

我们的游戏将是一个简单的划龙舟游戏，玩家需要控制龙舟左右移动，躲避障碍物并到达终点。

游戏界面

<!DOCTYPE html>
<html>
<head>
  
  <style>
    body {
      background-color: #0099ff;
    }

    .dragon-boat {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 200px;
      height: 100px;
      background-color: #ff0000;
    }

    .obstacle {
      position: absolute;
      width: 50px;
      height: 50px;
      background-color: #000000;
    }

    .finish-line {
      position: absolute;
      left: 90%;
      top: 50%;
      width: 10px;
      height: 100px;
      background-color: #00ff00;
    }
  </style>
</head>
<body>
  <div class="dragon-boat"></div>
  <div class="obstacle"></div>
  <div class="finish-line"></div>
</body>
</html>

三、游戏实现

1. 龙舟控制

const dragonBoat = document.querySelector('.dragon-boat');

document.addEventListener('keydown', (event) => {
  if (event.key === 'ArrowLeft') {
    dragonBoat.style.left = parseInt(dragonBoat.style.left) - 10 + 'px';
  } else if (event.key === 'ArrowRight') {
    dragonBoat.style.left = parseInt(dragonBoat.style.left) + 10 + 'px';
  }
});

2. 障碍物生成

const obstacle = document.querySelector('.obstacle');

setInterval(() => {
  obstacle.style.left = Math.random() * 100 + '%';
  obstacle.style.top = Math.random() * 100 + '%';
}, 1000);

3. 碰撞检测

setInterval(() => {
  const dragonBoatRect = dragonBoat.getBoundingClientRect();
  const obstacleRect = obstacle.getBoundingClientRect();

  if (dragonBoatRect.left < obstacleRect.right &&
      dragonBoatRect.right > obstacleRect.left &&
      dragonBoatRect.top < obstacleRect.bottom &&
      dragonBoatRect.bottom > obstacleRect.top) {
    alert('Game over!');
  }
}, 100);

4. 终点检测

setInterval(() => {
  const dragonBoatRect = dragonBoat.getBoundingClientRect();
  const finishLineRect = finishLine.getBoundingClientRect();

  if (dragonBoatRect.right > finishLineRect.left) {
    alert('You win!');
  }
}, 100);