当前位置：首页 > JavaScript

js实现碰壁

2026-02-01 13:58:52JavaScript

实现碰壁效果的JavaScript方法

使用JavaScript实现碰壁效果通常涉及检测元素与边界碰撞并改变其运动方向。以下是几种常见实现方式：

基于Canvas的碰壁检测

在Canvas中绘制移动物体并检测与画布边界的碰撞：

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
let x = 50, y = 50, dx = 2, dy = 2, radius = 20;

function drawBall() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, Math.PI * 2);
  ctx.fillStyle = 'blue';
  ctx.fill();
  ctx.closePath();

  // 碰壁检测
  if (x + dx > canvas.width - radius || x + dx < radius) dx = -dx;
  if (y + dy > canvas.height - radius || y + dy < radius) dy = -dy;

  x += dx;
  y += dy;
  requestAnimationFrame(drawBall);
}
drawBall();

DOM元素的边界检测

对于HTML DOM元素的碰壁效果：

const box = document.getElementById('movingBox');
let posX = 0, posY = 0, speedX = 2, speedY = 2;

function moveBox() {
  posX += speedX;
  posY += speedY;

  // 检测窗口边界
  if (posX + box.offsetWidth > window.innerWidth || posX < 0) {
    speedX = -speedX;
  }
  if (posY + box.offsetHeight > window.innerHeight || posY < 0) {
    speedY = -speedY;
  }

  box.style.transform = `translate(${posX}px, ${posY}px)`;
  requestAnimationFrame(moveBox);
}
moveBox();

物理引擎实现

使用物理引擎库如Matter.js实现更真实的碰撞效果：

const engine = Matter.Engine.create();
const world = engine.world;
const render = Matter.Render.create({
  element: document.body,
  engine: engine,
  options: { width: 800, height: 600 }
});

// 创建墙壁边界
const walls = [
  Matter.Bodies.rectangle(400, 0, 800, 30, { isStatic: true }),
  Matter.Bodies.rectangle(400, 600, 800, 30, { isStatic: true }),
  Matter.Bodies.rectangle(0, 300, 30, 600, { isStatic: true }),
  Matter.Bodies.rectangle(800, 300, 30, 600, { isStatic: true })
];

// 创建动态物体
const ball = Matter.Bodies.circle(200, 200, 20);

Matter.World.add(world, [...walls, ball]);
Matter.Engine.run(engine);
Matter.Render.run(render);