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

Bertha 。 2023-06-05 08:11 88阅读 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 条评论，88人围观）

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

相关阅读

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

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

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

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

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

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

相关原生js实现多个随机大小颜色位置速度小球的碰壁反弹

需求：生成n个小球，让他们在一个大盒子中碰壁反弹，要求小球随机颜色，大小，初始位置，运动速度。思路分析：创建小球随机颜色等，添加到页面中。然后让小球发生移动。 ps：计

偏执的太偏执、/ 2023年06月05日 08:07/ 0 赞/ 71 阅读

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

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

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

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

这次的代码有点长，就想玩的直接复制就行，如果想研究可以拆分成JS文件自己看看。不需要别的库。效果是这样 ![在这里插入图片描述][20200516142613928.gif

╰半夏微凉°/ 2023年03月14日 05:58/ 0 赞/ 26 阅读

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

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

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

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

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

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

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

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

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

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

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

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

相关 js运动小球碰壁反弹

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

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