JS实现小球的弹性碰撞效果

JS实现小球的弹性碰撞效果是一项比较基础的前端交互效果,而且很实用。以下是实现该效果的几个步骤:

步骤一:绘制小球

在 HTML 中添加一个 canvas 元素,然后在 JS 中使用 Canvas API 绘制小球。例如:

<canvas id="canvas" width="500" height="500"></canvas>

<script>
  const canvas = document.getElementById('canvas');
  const context = canvas.getContext('2d');

  const ball = {
    x: 50,
    y: 50,
    r: 20,
    vx: 5,
    vy: 2
  };

  function drawBall() {
    context.beginPath();
    context.arc(ball.x, ball.y, ball.r, 0, Math.PI * 2);
    context.closePath();
    context.fill();
  }

  function draw() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    drawBall();
    ball.x += ball.vx;
    ball.y += ball.vy;
    requestAnimationFrame(draw);
  }

  draw();
</script>

ball 是一个球的对象,包含了球的位置、半径和速度。drawBall() 函数用来绘制小球,draw() 函数用来不停地绘制小球和更新小球的状态。

步骤二:添加碰撞检测

在小球的运动过程中,我们需要检测小球是否与墙壁发生碰撞。如果小球碰到了墙壁,我们需要把小球的速度取反,以实现弹性碰撞效果。例如:

function checkCollision() {
  if(ball.x + ball.vx > canvas.width - ball.r || ball.x + ball.vx < ball.r) {
    ball.vx = -ball.vx;
  }
  if(ball.y + ball.vy > canvas.height - ball.r || ball.y + ball.vy < ball.r) {
    ball.vy = -ball.vy;
  }
}

function draw() { 
  // ...
  checkCollision();
  ball.x += ball.vx;
  ball.y += ball.vy;
  requestAnimationFrame(draw);
}

checkCollision() 函数用来检测球体是否与边界相交,并修改球的速度以实现弹性碰撞效果。在这个函数中,我们首先判断小球是否触碰到了右边界或左边界,如果是,则将小球的速度 x 分量取反。接着,我们检测小球是否碰到了下边界或上边界,如果是,则将小球的速度 y 分量取反。

步骤三:添加障碍物

除了墙壁,我们还可以添加一些障碍物,用来增加小球的碰撞效果。例如,我们可以在 canvas 中添加一个矩形,并检测小球是否与矩形相交。如果小球触碰到了该矩形,我们也需要将小球的速度取反以实现弹性碰撞。以下是示例代码:

const obstacle = {
  x: 150,
  y: 200,
  width: 100,
  height: 100
};

function drawObstacle() {
  context.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
}

function checkCollisionWithObstacle() {
  if (ball.x + ball.r > obstacle.x &&
      ball.x - ball.r < obstacle.x + obstacle.width &&
      ball.y + ball.r > obstacle.y &&
      ball.y - ball.r < obstacle.y + obstacle.height) {
    // 检测到碰撞
    const disX = Math.abs(ball.x - obstacle.x - obstacle.width/2);
    const disY = Math.abs(ball.y - obstacle.y - obstacle.height/2);

    if(disX <= (obstacle.width/2 + ball.r) && disY <= (obstacle.height/2 + ball.r)) {
      if(disX > disY) {
        ball.vx = -ball.vx;
      } else {
        ball.vy = -ball.vy;
      }
    }
  }
}

function draw() { 
  // ...
  drawObstacle();
  checkCollisionWithObstacle();
  checkCollision();
  ball.x += ball.vx;
  ball.y += ball.vy;
  requestAnimationFrame(draw);
}

在此示例中,在画布上绘制了一个矩形障碍物,并添加了 checkCollisionWithObstacle() 函数来检测小球是否与矩形相交。如果小球与障碍物相交,我们需要找出两者之间的距离,以便确定小球相对于障碍物的位置。然后,根据球体与障碍物相交时的位置不同,我们将小球的速度 x 或 y 分量取反,实现弹性碰撞效果。

完成上述步骤后,你就可以得到一个具有弹性碰撞效果的小球了。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS实现小球的弹性碰撞效果 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • Flask 路由(Route)使用方法详解

    Flask是一种轻量级的Python Web框架,它简单易用,适合快速开发小型Web应用。其中路由(Route)是Flask Web应用中最重要的部分,它可以帮助我们管理 URL 请求和响应,本文将详细介绍Flask路由的使用方法,并提供完整的代码示例。 Flask 路由的基本使用方法 我们可以通过在Flask应用实例上定义路由函数,来处理不同的URL请求。…

    Flask 2023年3月13日
    00
  • 详解Angular组件生命周期(一)

    Angular组件生命周期是Angular框架用来管理组件生命周期的一种机制,用于确保组件能够在运行时按照正确的顺序进行初始化、渲染、销毁等操作。在这篇文章中,我们将详细讲解Angular组件的生命周期。本章主要介绍组件的构造以及ngOnChanges的生命周期函数。 组件的构造 每当Angular框架需要实例化一个组件时,都会根据组件定义创建一个新的类实例…

    css 2023年6月10日
    00
  • Bootstrap 粘页脚效果

    Bootstrap 是一个开源的前端框架,为开发响应式和移动端友好的网站提供了很好的支持。其中,粘页脚效果是 Bootstrap 中比较常见和广泛使用的一种效果,可以让网页内容相对固定,脚部内容吸附在页面底部,当页面滚动时固定在底部,不随滚动而消失。下面将详细讲解 Bootstrap 粘页脚效果的完整攻略。 原理 HTML 的页面元素的中有两个比较重要的属性…

    css 2023年6月10日
    00
  • 利用jquery禁止外层滚动条的滚动

    禁止外层滚动条的滚动非常常见,可以通过jQuery实现。以下是具体步骤: 准备工作 首先,在HTML页面中需要有一个包含需要禁止滚动条的元素容器,例如: <div class="container"> <div class="content"> <!– 页面内容 –> </…

    css 2023年6月10日
    00
  • 条件CSS的高级用法

    条件CSS的高级用法 条件 CSS 是一种在 CSS 中使用条件语句的技术,可以根据不同的条件应用不同的样式。以下是一些常见的条件 CSS 用法。 方法一:使用 @supports 使用 @supports 是一种常见的条件 CSS 技术,可以根据浏览器是否支持某个 CSS 属性来应用不同的样式。以下是一个示例: /* 默认样式 */ .box { back…

    css 2023年5月18日
    00
  • div背景定位background设置元素的背景参数

    当我们需要将一个元素设置为背景,可以使用 CSS 的 background 属性,其中 background 属性包括许多子属性,比如背景颜色、背景图像、背景定位、背景大小等等。在这里,我们重点讲解如何使用 background 属性中的 background-position 子属性来控制背景位置。 基本语法 background-position 子属性…

    css 2023年6月9日
    00
  • 借助得力工具五分钟快速制作CSS导航菜单

    下面是关于“借助得力工具五分钟快速制作CSS导航菜单”的完整攻略: 什么是得力工具? 得力工具是一款能够帮助用户快速制作CSS导航菜单的在线工具,无需编写CSS代码,只需要使用简单的拖拽操作,就能够创建出漂亮且实用的导航菜单。 如何使用得力工具制作CSS导航菜单? 以下是使用得力工具制作CSS导航菜单的详细步骤: 步骤一:打开得力工具网站 在浏览器中输入得力…

    css 2023年6月10日
    00
  • CSS常用技巧十则

    下面将详细讲解“CSS常用技巧十则”的完整攻略。该攻略包含以下10个技巧: 技巧一:使用盒模型 CSS盒模型是指一个元素的内容(content)、内边距(padding)、边框(border)和外边距(margin)组成的矩形框模型。在CSS当中,可以通过box-sizing属性来定义盒模型的计算方式。 示例 设计一个宽度为300像素、内边距为10像素、边框…

    css 2023年6月9日
    00
合作推广
合作推广
分享本页
返回顶部