两个圆形对象的碰撞 JavaScript / HTML 画布

下面是一个用JavaS cript和HTML画布实现两个圆形对象碰撞的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Circle Collision</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>

    <script>
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");

        var circle1 = {
            x: 200,
            y: 200,
            radius: 50,
            dx: 2, // 水平速度
            dy: 2, // 垂直速度
        };

        var circle2 = {
            x: 100,
            y: 100,
            radius: 30,
            dx: -2, // 水平速度
            dy: -2, // 垂直速度
        };

        function drawCircle(circle) {
            ctx.beginPath();
            ctx.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2);
            ctx.fillStyle = "blue";
            ctx.fill();
            ctx.closePath();
        }

        function update() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            drawCircle(circle1);
            drawCircle(circle2);

            // 更新圆形对象的位置
            circle1.x += circle1.dx;
            circle1.y += circle1.dy;
            circle2.x += circle2.dx;
            circle2.y += circle2.dy;

            // 碰撞检测
            if (circle1.x + circle1.radius > canvas.width || circle1.x - circle1.radius < 0) {
                circle1.dx = -circle1.dx;
            }
            if (circle1.y + circle1.radius > canvas.height || circle1.y - circle1.radius < 0) {
                circle1.dy = -circle1.dy;
            }

            if (circle2.x + circle2.radius > canvas.width || circle2.x - circle2.radius < 0) {
                circle2.dx = -circle2.dx;
            }
            if (circle2.y + circle2.radius > canvas.height || circle2.y - circle2.radius < 0) {
                circle2.dy = -circle2.dy;
            }

            // 判断两个圆形对象是否碰撞
            var dx = circle1.x - circle2.x;
            var dy = circle1.y - circle2.y;
            var distance = Math.sqrt(dx * dx + dy * dy);

            if (distance < circle1.radius + circle2.radius) {
                // 两个圆形对象碰撞，改变其速度方向
                circle1.dx = -circle1.dx;
                circle1.dy = -circle1.dy;

                circle2.dx = -circle2.dx;
                circle2.dy = -circle2.dy;
            }

            requestAnimationFrame(update);
        }

        update();
    </script>
</body>
</html>

这段代码创建了一个画布，并在画布上绘制了两个圆形对象。每个圆形对象都有一个位置(x, y)、半径(radius)和速度(dx, dy)。update函数在每一帧中更新圆形对象的位置，并进行碰撞检测。如果两个圆形对象碰撞，则会改变它们的速度方向。requestAnimationFrame(update)用来请求浏览器在下一帧中执行update函数，以实现动画效果。

本文内容通过AI工具匹配关键字智能整合而成，仅供参考，火山引擎不对内容的真实、准确或完整作任何形式的承诺。如有任何问题或意见，您可以通过联系service@volcengine.com进行反馈，火山引擎收到您的反馈后将及时答复和处理。

展开更多

开发者特惠

面向开发者的云福利中心，ECS 60元/年，域名1元起，助力开发者快速在云上构建可靠应用

ECS首年60元

社区干货

## 引言在数字化世界的深入探索中,我们会遇到各种各样的数据格式。这些格式有助于我们理解和操纵数据,以便实现各种复杂的功能。其中之一就是JSON(JavaScript Object Notation),这是一种轻量级的数据交换格式,易于... 使用JSON并不需要任何JavaScript知识,尽管有这样的知识会提高你对JSON的理解。虽然不需要JavaScript知识,但是需要遵循特定的规则:- 数据是以键值对的形式存在- 数据由逗号分隔- 对象由开闭花括号封装- 空对象...

从重构到扩展——跨端通讯SDK

#### JSContext> 一个JSContext表示了一次JS的执行环境。我们可以通过创建一个JSContext去调用JS脚本,访问一些JS定义的值和函数,同时也提供了让JS访问Native对象,方法的接口。因此,App只需要调用暴露在Window上... HTMLIFrameElement = document.createElement('iframe'); iframe.setAttribute('src', src); document.documentElement.appendChild(iframe); iframe.parentNode && iframe.parentNode.removeChild(i...

AI元年:一名前端程序员的技术之旅|社区征文

JS 语言的演变有着深入的理解的看法。* 一个真正优秀的负责开发服务端的工程师,应该对网络原理、系统运维、服务端架构至实践均有无微不至的理解和经验。而不是今天学点Java、明天了解点JavaScript,你就是一个全栈了,这不叫全栈。这是典型的“伪全栈”。一个出色的工程师至少应该深入理解自己专业领域的核心知识,然后在转身投入另一个专业领域,随着知识的洗礼,不想成为全栈都难。其次,我认为一名程序员,不能只沉迷于技术之中...

海量笔记@在云上,如何搭建属于自己的全文搜索引擎 Web应用-个人站点 | 社区征文

jstack 进程ID | grep 进制值``` ## Kibana数据可视化分析平台******描述:数据可视化和挖掘工具,可以用于日志和时间序列分析、应用程序监控。******```Kibana免安装:这里采用服务器间scp(互通)方式拷贝... CSS、JavaScript以及衍生出来的各种技术框架体系VUE、React、解决方案等,来实现产品的用户界面交互。**```开发:Visual Studio Code运行:npm run serve编译:npm run build解压:/***/***/dist配置:nginx加ser...

特惠活动

域名注册服务

cn/top/com等热门域名，首年低至1元，邮箱建站必选

￥1.00/首年起32.00/首年起

立即购买

DCDN国内流量包100G

同时抵扣CDN与DCDN两种流量消耗，加速分发更实惠

￥2.00/年20.00/年

立即购买

两个圆形对象的碰撞 JavaScript / HTML 画布-优选内容

创建画布

在你的 HTML 文件中加入一个 canvas 元素用于显示 AR 内容。 javascript

从重构到扩展——跨端通讯SDK

海量笔记@在云上,如何搭建属于自己的全文搜索引擎 Web应用-个人站点 | 社区征文

浏览器 JavaScript SDK

日志服务支持通过 Web Tracking 采集终端用户浏览器日志。本文介绍如何使用 Web Tracking JavaScript SDK 采集浏览器的用户日志。背景信息轻量级的埋点采集场景中,通常需要快速完成埋点设置和数据上报的工作。例如... JS、Image 等标签埋点,适用于各种无需任何验证的静态网页、广告投放、宣传资料和移动端数据采集。注意事项为日志主题开启 Web Tracking 后,通过 API 接口 WebTracks 写入数据时无需经过鉴权,相当于面向公网开放了...

两个圆形对象的碰撞 JavaScript / HTML 画布-相关内容

读《重构-改善既有代码的设计》的一些思考|社区征文

作者在第一章使用了一个简单例子:通过重构一个产生字符串的代码来实现增加产生 *HTML* 代码的功能。重构使得代码的可读性大大增加,修改起来也非常方便。在重构时我们要遵循测试驱动,小步前进的原则,一旦测试未能通... 说的是修改代码架构和重构这两个步骤,应该交替进行,并且保证充分的单元测试,以适应软件的需求变化。## 代码的坏味道知道什么是代码中的坏味道,实际上就是如何避免写出不好维护的代码,以及培养自己对坏代码的意...

前端AST详解,手写babel插件|社区征文

本文总结了我在移动开发过程中要写一个babel插件,故而做了一个总结# 🥙一、前言抽象语法树(Abstract Syntax Tree,AST),是源代码(不仅限于JavaScript,同时还应用于其他语言,例如: Python,Rust等)语法结构的⼀种抽... 简单来说就是我们写 JS 时自定义的名称,如变量名,函数名,属性名,都归为标识符,值存放于字段name中。![在这里插入图片描述](https://img-blog.csdnimg.cn/925224b5888d43b0862f25caea4bfdb1.png)- CallExpressio...

Web

在实现功能的 js 文件中引入 SDK。 javascript import Board from '${you_path}/lib/white-board-manage';实现功能基础白板使用 API 时序图 1. 初始化应用调用 init 创建一个本地白板房间对象。 javascript Board.init({ domId: 'board', appId,});参考开通服务获取 appId。 2. 加入白板房间调用 whiteBoardRoom.joinRoom 登录白板服务,并加入房间,并返回 WhiteBoardRoom的promise。如果服务端还没有该房间,会自动创建一...

域名注册服务

cn/top/com等热门域名，首年低至1元，邮箱建站必选

￥1.00/首年起32.00/首年起

立即购买

DCDN国内流量包100G

同时抵扣CDN与DCDN两种流量消耗，加速分发更实惠

￥2.00/年20.00/年

立即购买

应用性能前端监控,字节跳动这些年经验都在这了

或者通过一段 JavaScript 脚本,直接通过 CDN 接入:``` ```**更丰富的异常现场还原能力** MARS-APM 全链路版不仅帮助您无死角地发现各类异常问题,还提供了丰富的现场还原能力,包括且不限于堆栈回溯、用户交互... **JS Error**,解析后可以细分为运行时异常、以及静态资源异常。- **请求状态码**,采集上报后,可以分析请求异常等信息。### 如何采集这些指标?**RUM 指标的采集**,主要依赖于 [Event Timing API](https:...

小程序SDK埋点与属性

上报事件和属性前,请先阅读数据格式介绍。 1. 用户与用户属性 1.1 登录态变化调用如您的产品中有账户体系,请在用户登录后立即设置uuid,以保证用户登录前后口径一致性。 javascript $$Rangers.config({ user_u... // webview.jsPage({ data: { webUrl: '' }, onLoad(options) { let url = 'https://example/demo.html'; this.setData({ webUrl: $$Rangers.createWebViewUrl(url), }); }})...

小程序SDK埋点与属性

上报事件和属性前,请先阅读数据格式介绍。 1. 用户与用户属性 1.1 登录态变化调用如您的产品中有账户体系,请在用户登录后立即设置uuid,以保证用户登录前后口径一致性。 javascript $$Rangers.config({ user_un... // webview.jsPage({ data: { webUrl: '' }, onLoad(options) { let url = 'https://example/demo.html'; this.setData({ webUrl: $$Rangers.createWebViewUrl(url), }); }})...

Electron

init 命令进行项目初始化配置└── renderer.js // 渲染进程文件集成SDK【推荐】npm 方式通过包管理工具 npm 下载 SDK。不指定版本表示下载最新版本。 npm install @volcengine/white-board-manage --save离线方式下载 Web SDK 。将 SDK 解压后复制到项目的 node_modules 目录下。比如:./node_modules/@volcengine/white-board-manage。实现功能创建用户界面参考以下代码,在 index.html 中完成用户交互界面的设计,即白板画布...

【相知有胡公,清峻善臧否】2022年终总结篇|社区征文

不编译到`vendor.js`中,而是用资源的形式引用,这样浏览器可以使用多个线程异步将`vendor.js`、外部的js等加载下来,达到加速首页展示效果。## 1. 在vue.config.js进行配置本人对`vue`、`vuex`、`vue-router`、`axios`、`element-ui`、`echarts`进行了cdn引用。(请求`element-ui`、`echarts`的cdn较慢)```javascript//生产环境标记const IS_PRODUCTION = process.env.NODE_ENV === 'production'//配置引用cdn的js、css地址...

特惠活动

域名注册服务

cn/top/com等热门域名，首年低至1元，邮箱建站必选

￥1.00/首年起32.00/首年起

立即购买

DCDN国内流量包100G

同时抵扣CDN与DCDN两种流量消耗，加速分发更实惠

￥2.00/年20.00/年

立即购买

两个圆形对象的碰撞 JavaScript / HTML 画布

开发者特惠

社区干货

深入理解JSON:数据交换格式的优雅之路

从重构到扩展——跨端通讯SDK

AI元年:一名前端程序员的技术之旅|社区征文

海量笔记@在云上,如何搭建属于自己的全文搜索引擎 Web应用-个人站点 | 社区征文

特惠活动

热门爆款云服务器

域名注册服务

DCDN国内流量包100G

两个圆形对象的碰撞 JavaScript / HTML 画布-优选内容

两个圆形对象的碰撞 JavaScript / HTML 画布-相关内容

读《重构-改善既有代码的设计》的一些思考|社区征文

前端AST详解,手写babel插件|社区征文

Web

热门爆款云服务器

域名注册服务

DCDN国内流量包100G

应用性能前端监控,字节跳动这些年经验都在这了

小程序SDK埋点与属性

小程序SDK埋点与属性

小程序SDK埋点与属性

Electron

【相知有胡公,清峻善臧否】2022年终总结篇|社区征文

特惠活动

热门爆款云服务器

域名注册服务

DCDN国内流量包100G

产品体验

体验中心

云服务器特惠

白皮书

相关主题

最新活动

爆款1核2G共享型服务器

火山引擎增长体验专区

数据智能VeDI

热门访问

一键开启云上增长新空间