html5使用canvas实现小球碰撞反弹实例

最新推荐文章于 2025-05-23 06:12:56 发布

雾里看花叹朦胧

最新推荐文章于 2025-05-23 06:12:56 发布

阅读量6.2k

点赞数 6

CC 4.0 BY-SA版权

分类专栏： html5 文章标签： html5 canvas 小球碰撞碰撞反弹反弹算法

本文链接：https://blog.youkuaiyun.com/hsl0530hsl/article/details/78910453

这篇博客通过HTML5的Canvas元素，详细介绍了如何创建小球碰撞反弹的实例，包括关键的反弹算法，提供了相关的代码文件（index.html、style.css、main.js）以及实际效果的展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用 html5 中的 canvas, 实现小球相互碰撞并反弹,反弹算法比较简单.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bouncing balls</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Bouncing balls</h1>
    <canvas></canvas>

    <script src="main.js"></script>
</body>
</html>

style.css

html, body {
   
   
    margin: 0;
    padding: 0;
}

html {
   
   
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    height: 100%;
}

body {
   
   
    overflow: hidden;
    height: inherit;
}

h1 {
   
   
    font-size: 2rem;
    letter-spacing: -1px;
    position: absolute;
    margin: 0;
    top: -4px;
    right: 5px;
    color: transparent;
    text-shadow: 0 0 4px white;
}

main.js

var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");

var WIDTH = document.documentElement.clientWidth;
var HEIGHT = document.documentElement.clientHeight;

canvas.width = WIDTH;
canvas.height = HEIGHT;

var config =