canvas创建小球随机运动

最新推荐文章于 2022-05-17 16:34:09 发布

kilito_01

最新推荐文章于 2022-05-17 16:34:09 发布

阅读量464

点赞数 1

文章标签： javascript canvas

本文链接：https://blog.csdn.net/kilito_01/article/details/121477179

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>面向对象小球</title>
    <style>
        #can{
          border: 1px solid #999;
        }
    </style>
</head>
<body>
    <canvas id="can" width="500px" height="500px"></canvas>
    <script>
        var c = document.querySelector('#can');
        var ctx = c.getContext('2d');
        var w = 500;
        var h = 500
 
        // 创建随机数据
        function r(num){
           return Math.random()*num
        }
        // 创建小球 
        function Ball(){
        //   this.x = r(500);  //随机x轴的值
        //   this.y = r(500);  //随机y轴的值
        this.x = r(10)+60;
        this.y = r(10)+60
          this.r = r(50)+10; //[10,100) 取10到60的数 直接让随机数0到90的结果加10
          this.color = '#'+parseInt(Math.random()*0xffffff).toString(16); // 随机颜色
          this.xSpeed = r(3)+2;  //[2,5]  随机x轴速度
          this.ySpeed = r(3)+1; // [1,4]  随机y轴速度

        }

        // 定义小球显示方法
        Ball.prototype.show = function(){
            ctx.beginPath();
            ctx.arc(this.x,this.y,this.r,0,Math.PI*2)
            ctx.fillStyle = this.color;
            ctx.fill();
            this.run(); // 创建小球之后就执行运动的方法
        }
       
        // 定义小球运动的方法--碰撞检测
        Ball.prototype.run = function(){
            if(this.x-this.r<=0 || this.x+this.r >w){
                   this.xSpeed = -this.xSpeed;
               }
            if(this.y-this.r<=0 || this.y+this.r >w){
                   this.ySpeed = -this.ySpeed;
               }
            this.x = this.x+ this.xSpeed
            this.y = this.y+ this.ySpeed
                  
        }
        // 创建一个小球的数组
        var barrArr =[];
       for (let i = 0; i < 10; i++) {
             var ball =  new Ball();  
            //  放入小球数组  以便于单个使用，设置运动
            barrArr.push(ball);
            ball.show();
            
       }
    //    小球运动
    setInterval(function(){
        ctx.clearRect(0,0,w,h);
        for (let i = 0; i < barrArr.length; i++) {
           var ball = barrArr[i];
        //    ball.run();
           ball.show();   
        }
    },10)
    </script>
</body>
</html>

在这里插入图片描述

kilito_01

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
canvas创建小球随机运动

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>面向对
复制链接

扫一扫