canvas实现碰壁反弹（单个小方块）

Bertha 。 2023-06-05 08:11 18阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
        canvas {
            box-shadow: 0 0 5px red;
            display: block;
            margin: 20px auto;
        }
        </style>
    </head>
    <body>
        <canvas id="cv" width="800" height="500"></canvas>
        <script>
            var cv = document.querySelector('#cv');
            var ctx = cv.getContext('2d');
            // 不断绘制矩形，矩形坐标通过计时器累加累减
            // x y方向的移动速度不能是同一个
            var x = 0, y = 0, vx = 1, vy = 1;
            setInterval(function(){
                // 清除画布
                ctx.clearRect(0,0,cv.width,cv.height);
                x+=vx;y+=vy;
                ctx.strokeRect(x,y,50,50);
                if(x<=0||x>=cv.width-50){vx*=-1};
                if(y<=0||y>=cv.height-50){vy*=-1};
            },10);
        </script>
    </body>
    </html>

文章地址  [https://www.cnblogs.com/sandraryan/][https_www.cnblogs.com_sandraryan]

转载于:https://www.cnblogs.com/sandraryan/p/11578290.html

[https_www.cnblogs.com_sandraryan]: https://www.cnblogs.com/sandraryan/

发表评论取消回复

表情：

评论列表（有 0 条评论，18人围观）

还没有评论，来说两句吧...

相关阅读

相关小球落地反弹问题（java实现）

题目描述一球从100米高度自由落下，每次落地后反跳回原高度的一半；再落下，求它在第10次落地时，共经过多少米？第10次反弹多高？ > 图解： > > ![36b

迈不过友情╰/ 2023年09月27日 14:17/ 0 赞/ 133 阅读

相关 canvas绘制方块&图表&动态图表&画板

绘制一个简单的方块儿这个方块可以自行移动。注意：绘制颜色一定要在绘制矩形之前。 <canvas></canvas> var canva

旧城等待，/ 2023年07月11日 12:41/ 0 赞/ 28 阅读

相关 canvas实现碰壁反弹（单个小方块）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

Bertha 。/ 2023年06月05日 08:11/ 0 赞/ 19 阅读

相关 js实现div的碰壁反弹效果

需求：写一个div，让div在父级进行匀速运动，碰到父级上下左右的边框，就向反方向运动。碰壁反弹在游戏制作中很常用~~~~ <style> .w

淩亂°似流年/ 2023年06月05日 08:10/ 0 赞/ 22 阅读

相关 javascript实现小游戏俄罗斯方块

俄罗斯方块 style <style> div { display:block; back

矫情吗；*/ 2023年05月30日 06:08/ 0 赞/ 79 阅读

相关 JavaScript语法 --> 碰壁反弹

JavaScript语法 –> 碰壁反弹在js语法中，正确使用clientWidth、offsetWidth等属性，并结合定时器，可以形成如下所示碰壁反弹效果。

港控/mmm°/ 2022年06月10日 06:52/ 0 赞/ 222 阅读

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

使用 html5 中的 canvas, 实现小球相互碰撞并反弹,反弹算法比较简单. index.html <!DOCTYPE html> <html lan

缺乏、安全感/ 2022年06月01日 23:42/ 0 赞/ 270 阅读

相关 canvas画布在画布中绘制2个小球在画布中做碰壁反弹,当两小球相撞之后,两个小球交换速度

![70][] <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="U

拼搏现实的明天。/ 2021年09月16日 04:24/ 0 赞/ 352 阅读

相关 canvas画布实现创建20个小球,小球在画布内碰壁反弹

![70][] <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-

曾经终败给现在/ 2021年09月16日 04:22/ 0 赞/ 443 阅读

相关 js运动小球碰壁反弹

js运动小球碰壁反弹 1、触碰窗口壁沿反弹，同时改变颜色 <!DOCTYPE html> <html lang="en"> <head

约定不等于承诺〃/ 2021年07月25日 12:51/ 0 赞/ 459 阅读