小球碰壁（面向对象）+观察者模式

最新推荐文章于 2022-03-10 19:57:02 发布

零度碳酸-

最新推荐文章于 2022-03-10 19:57:02 发布

阅读量180

点赞数

分类专栏： JS基础练习题

本文链接：https://blog.csdn.net/weixin_41086056/article/details/89481854

版权

JS基础练习题专栏收录该内容

19 篇文章 2 订阅

订阅专栏

在这里插入图片描述

//模板
    class Ball{
        constructor(r,parent){
            this.createBall(r,parent);//传入r与parent后就执行这个createrBall
            this.speedX=0;
            this.speedY=0;
        }
        createBall(r,parent){
            if(this.ball) return this.ball;
            if(!parent) parent=document.body;
            if(r<=0) r=20;
            this.ball=document.createElement("div");
            this.ball.style.width=r*2+"px";
            this.ball.style.height=r*2+"px";
            this.ball.style.borderRadius=r+"px";
            this.ball.style.backgroundColor="red";
            this.ball.style.position="absolute";
            parent.appendChild(this.ball);
            return this.ball;
        }
        update(){
            this.ball.style.left=this.ball.offsetLeft+this.speedX+"px";
            this.ball.style.top=this.ball.offsetTop+this.speedY+"px";
            if(this.ball.offsetLeft+this.ball.offsetWidth>300 || this.ball.offsetLeft<=0){
                this.speedX=-this.speedX;
            }
            if(this.ball.offsetTop+this.ball.offsetHeight>300 || this.ball.offsetTop<=0){
                this.speedY=-this.speedY;
            }
        }
    }



function randomInt(min,max) {
    return Math.floor(Math.random()*(max-min)+min);
}

function animation() {
    requestAnimationFrame(animation);//每16毫秒调用一次  ==setinterval
    for(let i=0;i<list.length;i++){
        list[i].update();
    }
}

2Html.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/as.js"></script>
</head>
<body>
<script>
    let list=[];
    init();
    function init() {
        for(let i=0;i<10;i++){
            let ball=new Ball(randomInt(10,20));
            ball.speedX=randomInt(2,8);
            ball.speedY=randomInt(1,10);
            list.push(ball);
        }
        animation();
    }
</script>

</body>
</html>

第二版：观察者模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>

        let TimeManager=(function () {
            var managerList=[];
            var id;
            return {
                add:function (elem) {
                    if(managerList.indexOf(elem)>-1) return managerList;
                    managerList.push(elem);
                    return managerList;
                },
                remove:function (elem) {
                    var index=managerList.indexOf(elem);
                    if(index<0) return managerList;
                    managerList.splice(index,1);
                    return managerList;
                },
                start:function () {
                    if(id)return;
                    id=setInterval(this.animation,16);
                },
                end:function () {
                    clearInterval(id);
                    id=0;
                },
                animation:function () {
                    for(var i=0;i<managerList.length;i++){
                        managerList[i].update();
                    }
                }
            }
        })();
      //  TimeManager ES6中的写法
      /* class TimeManager{
           static add(elem){
               if(TimeManager.managerList.indexOf(elem)>-1) return TimeManager.managerList;
               TimeManager.managerList.push(elem);
               return TimeManager.managerList;
           }

           static remove(elem){
               let index=TimeManager.managerList.indexOf(elem);
               if(index<0) return TimeManager.managerList;
               TimeManager.managerList.splice(index,1);
               return TimeManager.managerList;
           }

           static start(){
               if(TimeManager.id)return;
               TimeManager.id=setInterval(TimeManager.animation,16);
           }
           static end(){
               clearInterval(TimeManager.id);
               TimeManager.id=0;
           }
           static animation(){
               for(let i=0;i<TimeManager.managerList.length;i++){
                   TimeManager.managerList[i].update();
               }
           }
           static  get managerList(){
               if(!TimeManager._managerList){
                   TimeManager._managerList=[];
               }
               return TimeManager._managerList;
           }
       }*/

        class Ball{
            constructor(r,parent){
                this.createBall(r,parent);
                this.speedX=0;
                this.speedY=0;
            }
            createBall(r,parent){
                if(this.circle) return this.circle;
                if(!parent) parent=document.body;
                if(r<=0) r=20;
                this.circle=document.createElement("div");
                this.circle.style.width=r*2+"px";
                this.circle.style.height=r*2+"px";
                this.circle.style.borderRadius=r+"px";
                this.circle.style.backgroundColor="red";
                this.circle.style.position="absolute";
                this.circle.addEventListener("click",this.clickHandler);
//                针对ball下面的circle做点击侦听
                this.circle.self=this;
//                circle.self是ball,就是当前小球的模板
                parent.appendChild(this.circle);
                return this.circle;
            }
            clickHandler(e){
                this.bool=!this.bool;
                if(this.bool){
//                    使用观察者添加该元素
                    TimeManager.add(this.self);
                    return;
                }
//                再点击,使用观察者删除该元素
                TimeManager.remove(this.self);


            }
            up date(){
                this.circle.style.left=this.circle.offsetLeft+this.speedX+"px";
                this.circle.style.top=this.circle.offsetTop+this.speedY+"px";
                if(this.circle.offsetLeft+this.circle.offsetWidth>300 || this.circle.offsetLeft<=0){
                    this.speedX=-this.speedX;
                }
                if(this.circle.offsetTop+this.circle.offsetHeight>300 || this.circle.offsetTop<=0){
                    this.speedY=-this.speedY;
                }
            }
        }


        init();
        function init() {
            for(let i=0;i<10;i++){
                let ball=new Ball(randomInt(10,20));
                ball.speedX=randomInt(1,3);
                ball.speedY=randomInt(1,4);
            }
            TimeManager.start();
            let bn=document.createElement("button");
            bn.textContent="暂停";
            document.body.appendChild(bn);
            bn.addEventListener("click",clickhandler);
        }

        function clickhandler(e) {
            TimeManager.end();
        }

        function randomInt(min,max) {
            return Math.floor(Math.random()*(max-min)+min);
        }




        
    </script>
</body>
</html>

零度碳酸-

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
小球碰壁（面向对象）+观察者模式

//模板class Ball{constructor(r,parent){this.createBall(r,parent);//传入r与parent后就执行这个createrBallthis.speedX=0;this.speedY=0;}createBall(r,parent){if(this.ball) return this.ball;if(!parent) pare...
复制链接

扫一扫

专栏目录