canvas碰撞检测和面向对象的小球

_enzo

已于 2022-08-28 12:44:37 修改

阅读量431

点赞数

CC 4.0 BY-SA版权

分类专栏： Canvas 文章标签： canvas

于 2021-06-22 11:00:59 首次发布

本文链接：https://blog.csdn.net/katherin_wanzi/article/details/118101777

这篇博客探讨了在canvas中实现小球的碰撞检测技术，并介绍了如何使用面向对象的方法来创建和管理这些小球。文章通过代码片段展示了具体的实现过程，并提供了运行结果的示例。

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

1.碰撞检测

代码片段:

<style>
    canvas {
   
   
        margin: 0 auto;
        border: 2px solid #aaa;
        display: block; /*画布居中*/
    }
</style>
<body>
    <canvas id="cont" width="500px" height="500px">Hello Canvas</canvas>   
    <script>
        var canvas = document.querySelector("#cont");
        //获取画布上下文
        var ctx = canvas.getContext('2d');
        var w = 500,h = 500,x = 100,y = 100,r = 20;
        //水平速度
        var xSpeed = 2;
        //垂直速度
        var ySpeed = 3;
        setInterval(function() {
   
   
            //清除画布
            ctx.clearRect(0, 0, w, h);
            //在小球碰到边缘时，速度变为反方向
            if (x-r <= 0 || x+r >= w) {
   
   
                xSpeed = -xSpeed;