用代码开始新一年：JavaScript中的键盘事件和动手小游戏

2023-12-07 09:28:12

一、键盘事件的魅力世界

键盘事件是用户与网页或应用程序交互的重要方式之一。当用户按下或松开键盘上的键时，就会触发相应的键盘事件。JavaScript为我们提供了丰富的键盘事件类型，让我们可以捕捉和处理这些事件，从而实现各种交互功能。

最常用的键盘事件类型包括：

keydown：当用户按下键盘上的某个键时触发。
keyup：当用户松开键盘上的某个键时触发。
keypress：当用户按下键盘上的某个键并松开时触发。

二、捕捉键盘事件的代码实践

在JavaScript中，我们可以使用addEventListener()方法来为元素添加键盘事件监听器。语法如下：

element.addEventListener(eventType, callbackFunction, useCapture);

其中：

element：要添加事件监听器的元素。
eventType：要监听的事件类型，如keydown、keyup或keypress。
callbackFunction：当事件触发时要执行的函数。
useCapture：布尔值，指定是否在捕获阶段而不是冒泡阶段调用事件处理程序。

三、实战案例：创建JavaScript小游戏

现在，让我们用键盘事件来创建一个简单的JavaScript小游戏。在这个游戏中，玩家需要使用键盘上的箭头键来控制一个方块，躲避障碍物并收集金币。

1. 游戏准备

首先，我们需要创建一个HTML文件，其中包含游戏所需的HTML元素和JavaScript代码。

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <canvas id="gameCanvas"></canvas>
  <script src="game.js"></script>
</body>
</html>

2. 绘制游戏场景

接下来，我们在game.js文件中定义游戏场景。

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

// 设置画布大小
canvas.width = 500;
canvas.height = 500;

// 定义方块对象
const square = {
  x: 200,
  y: 200,
  width: 50,
  height: 50,
};

// 绘制方块
function drawSquare() {
  ctx.fillStyle = "blue";
  ctx.fillRect(square.x, square.y, square.width, square.height);
}

// 绘制游戏场景
function drawGame() {
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制方块
  drawSquare();

  // 绘制障碍物和金币
  // ...
}

3. 添加键盘事件监听器

为了让方块能够响应键盘输入，我们需要为canvas元素添加键盘事件监听器。

// 添加键盘事件监听器
document.addEventListener("keydown", handleKeyDown);
document.addEventListener("keyup", handleKeyUp);

// 处理键盘按下事件
function handleKeyDown(event) {
  // 获取按下的键
  const key = event.key;

  // 根据按下的键移动方块
  switch (key) {
    case "ArrowUp":
      square.y -= 10;
      break;
    case "ArrowDown":
      square.y += 10;
      break;
    case "ArrowLeft":
      square.x -= 10;
      break;
    case "ArrowRight":
      square.x += 10;
      break;
  }
}

// 处理键盘松开事件
function handleKeyUp(event) {
  // 获取松开的键
  const key = event.key;

  // 根据松开的键停止方块移动
  switch (key) {
    case "ArrowUp":
    case "ArrowDown":
      square.vy = 0;
      break;
    case "ArrowLeft":
    case "ArrowRight":
      square.vx = 0;
      break;
  }
}

4. 游戏循环

为了让游戏持续运行，我们需要创建一个游戏循环。

// 创建游戏循环
function gameLoop() {
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制游戏场景
  drawGame();

  // 更新游戏状态
  // ...

  // 请求下一次动画帧
  requestAnimationFrame(gameLoop);
}

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