使用 JavaScript 创建反射游戏

反射游戏是一款经典的小游戏，它的基本思路就是让玩家控制一个物体击打移动的目标，让目标反弹到不同的方向，直到把所有目标都消灭。本文将介绍如何使用 JavaScript 创建一个简单的反射游戏。

准备工作

创建反射游戏需要使用到 Canvas，所以我们需要在 HTML 中添加一个 Canvas 元素：

<canvas id="game-canvas"></canvas>

同时，我们需要创建一个 JavaScript 文件，通过 JavaScript 来控制 Canvas 并实现游戏逻辑。

创建 Canvas 环境

在 JavaScript 文件中，我们需要先获取 Canvas 元素：

const canvas = document.getElementById('game-canvas');

然后我们需要获取其绘制环境 2D：

const ctx = canvas.getContext('2d');

控制目标的移动

首先，我们需要定义目标的初始位置以及移动速度：

let targetX = 100;
let targetY = 100;
let targetSpeedX = 5;
let targetSpeedY = 5;

然后，我们在游戏循环中更新目标位置：

function update() {
  targetX += targetSpeedX;
  targetY += targetSpeedY;
  
  // 判断是否到达边缘，如果是则反向移动
  if (targetX < 0 || targetX > canvas.width) {
    targetSpeedX = -targetSpeedX;
  }
  if (targetY < 0 || targetY > canvas.height) {
    targetSpeedY = -targetSpeedY;
  }
  
  requestAnimationFrame(update);
}

requestAnimationFrame 是浏览器提供的一个 API，可以让我们在下次绘制前更新页面。

绘制目标和其它元素

function render() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
  
  // 绘制目标
  ctx.beginPath();
  ctx.arc(targetX, targetY, 50, 0, 2 * Math.PI);
  ctx.fillStyle = 'red';
  ctx.fill();
  
  requestAnimationFrame(render);
}

响应用户鼠标点击

canvas.addEventListener('click', function(event) {
  // 获取鼠标点击位置
  const mouseX = event.clientX - canvas.offsetLeft;
  const mouseY = event.clientY - canvas.offsetTop;
  
  // 如果鼠标点击位置在目标内，则反弹目标
  if (Math.sqrt((targetX - mouseX) ** 2 + (targetY - mouseY) ** 2) <= 50) {
    const angle = Math.atan2(targetY - mouseY, targetX - mouseX);
    targetSpeedX = -5 * Math.cos(angle);
    targetSpeedY = -5 * Math.sin(angle);
  }
});

完整代码

const canvas = document.getElementById('game-canvas');
const ctx = canvas.getContext('2d');

let targetX = 100;
let targetY = 100;
let targetSpeedX = 5;
let targetSpeedY = 5;

function update() {
  targetX += targetSpeedX;
  targetY += targetSpeedY;
  
  // 判断是否到达边缘，如果是则反向移动
  if (targetX < 0 || targetX > canvas.width) {
    targetSpeedX = -targetSpeedX;
  }
  if (targetY < 0 || targetY > canvas.height) {
    targetSpeedY = -targetSpeedY;
  }
  
  requestAnimationFrame(update);
}

function render() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
  
  // 绘制目标
  ctx.beginPath();
  ctx.arc(targetX, targetY, 50, 0, 2 * Math.PI);
  ctx.fillStyle = 'red';
  ctx.fill();
  
  requestAnimationFrame(render);
}

canvas.addEventListener('click', function(event) {
  // 获取鼠标点击位置
  const mouseX = event.clientX - canvas.offsetLeft;
  const mouseY = event.clientY - canvas.offsetTop;
  
  // 如果鼠标点击位置在目标内，则反弹目标
  if (Math.sqrt((targetX - mouseX) ** 2 + (targetY - mouseY) ** 2) <= 50) {
    const angle = Math.atan2(targetY - mouseY, targetX - mouseX);
    targetSpeedX = -5 * Math.cos(angle);
    targetSpeedY = -5 * Math.sin(angle);
  }
});

update();
render();

以上就是使用 JavaScript 创建反射游戏的基本思路。开发者可以基于此添加更多的玩法和功能。