Home > Article > Web Front-end > How to write a ejection ball in the vue component

How to write a ejection ball in the vue component

一个新手Original: 2017-09-06 11:22:481928browse

1. Define each ejected ball component (ocicle)

2. The component message custom attribute stores the initial information of the ball (can be modified)

{top: "0px",        //小球距离上方坐标　　　
 left: "0px",       //小球距离左边坐标　　　
 speedX: 12,      //小球每次水平移动距离　　　
 speedY: 6         //小球每次垂直移动距离
}

3. Idea

　3.1 Set the timer to move the ball every frame

　3.2 Initial direction: if isXtrue is true, the ball will be in the positive direction of the abscissa;

If isYtrue is true, the ball will be in the positive direction of the vertical coordinate

3.3 Obtain the current coordinates of the ball (oleft, otop) before each movement. The current coordinates plus the movement distance are the coordinates of the next frame

　3.4 Boundary judgment: when the horizontal axis coordinate range exceeds the maximum value, the plus sign changes to a minus sign

4. Vue knowledge points

　4.1 Parent-child components use props to transfer information

　4.2 Template Get el width and height before compilation

beforeMount: function (){    
    this.elWidth=this.$el.clientWidth;    
    this.elHeight=this.$el.clientHeight;
}

　4.3 Subcomponent gets el width and height (this.$root.elWidth,this.$root.elHeight)

4.4 Update sub-component information after template compilation is completed

mounted: function (){    //根据父组件信息更新小球数据
    this.addStyle.top=this.message.top;    
    this.addStyle.left=this.message.left;    
    this.speedX=this.message.speedX;    
    this.speedY=this.message.speedY;    //小球初始坐标
    this.oleft=parseInt(this.addStyle.left);    
    this.otop=parseInt(this.addStyle.top);    
    this.move();
}

5. Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html,
        body{
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
        }
        #app{
            width: 800px;
            height: 500px;
            margin: 50px auto;
            outline: 1px solid #f69;
            position: relative;
        }    </style>
</head>
<body>
    <p id="app">
        <ocicle :message="message1"></ocicle>
        <ocicle :message="message2"></ocicle>
        <ocicle :message="message3"></ocicle>
    </p>
    
    <script src="https://unpkg.com/vue"></script>
    <script>        var tem={
            props: ["message"],
            template: &#39;<p class="article" :style="addStyle"></p>&#39;,
            data: function (){                
            return {                       //初始化小球样式                    
            addStyle: {
                        width: "10px",
                        height: "10px",
                        backgroundColor: "#000",
                        position: "absolute",
                        marginTop: "-5px",
                        marginLeft: "-5px",
                        borderRadius: "50%",
                        top: "0px",
                        left: "0px"},        //横坐标方向的速度
                    speedX: 0,                    //纵坐标方向的速度
                    speedY: 0,                    //isX为真，则在横坐标方向为正
                    isX: true,                    //isY为真，则在纵坐标方向为正
                    isY: true,                    //小球当前坐标
                    oleft: 0,
              otop: 0
                }
            },
            mounted: function (){                //根据父组件信息更新小球数据
                    this.addStyle.top=this.message.top;                
                    this.addStyle.left=this.message.left;                
                    this.speedX=this.message.speedX;                
                    this.speedY=this.message.speedY;                //小球初始坐标
                    this.oleft=parseInt(this.addStyle.left);                
                    this.otop=parseInt(this.addStyle.top);                
                    this.move();
            },
            methods: {
              move: function (){                    
              var self=this;
              setInterval(function (){                        //更新小球坐标
                     self.oleft=parseInt(self.addStyle.left);
              self.otop=parseInt(self.addStyle.top);
              self.isXtrue();
              self.isYtrue();
                   }, 20);
                   },                //判断横坐标
                isXtrue: function (){                   //true 横坐标正方向
                                                                 //false 横坐标负方向
                    if(this.isX){                        
                        this.addStyle.left=this.oleft+this.speedX+"px";        //宽度超过最大边界
                        if(this.oleft>this.$root.elWidth-5){                            
                        this.addStyle.left=this.oleft-this.speedX+"px";                            
                        this.isX=false;
                      }
              }else{                        
                 this.addStyle.left=this.oleft-this.speedX+"px";        //宽度超过最小边界
                        if(this.oleft<5){                            
                         this.addStyle.left=this.oleft+this.speedX+"px";                            
                         this.isX=true;
                        }
                    }
                },                                 // 判断纵坐标
                isYtrue: function (){                    //true 纵坐标正方向
                    //false 纵坐标负方向
                    if(this.isY){                        
                        this.addStyle.top=this.otop+this.speedY+"px";           //高度超过最大边界
                        if(this.otop>this.$root.elHeight-5){                            
                        this.addStyle.top=this.otop-this.speedY+"px";                            
                        this.isY=false;
                        }
             }else{                        
                this.addStyle.top=this.otop-this.speedY+"px";            //高度超过最小边界
                        if(this.otop<5){                            
                        this.addStyle.top=this.otop+this.speedY+"px";                            
                        this.isY=true;
                        }
                    }
                }
            }

        }        var vm=new Vue({
            el: "#app",
            data: {                //获取el节点宽高
                elWidth: 0,
                elHeight: 0,                //设置小球初始信息               
                message1: {
                    top: "0px",
                    left: "600px",
                    speedX: 12,
                    speedY: 6
                },
                message2: {
                    top: "0px",
                    left: "300px",
                    speedX: 8,
                    speedY: 6
                },
                message3: {
                    top: "300px",
                    left: "0px",
                    speedX: 13,
                    speedY: 5
                }
            },            //更新el节点宽高
            beforeMount: function (){                
                this.elWidth=this.$el.clientWidth;                
                this.elHeight=this.$el.clientHeight;
            },
            components: {                
            "ocicle": tem
            }
            
        })    
     </script>
</body>
</html>

The above is the detailed content of How to write a ejection ball in the vue component. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Summary of practical JavaScript skills you may not knowNext article：Summary of practical JavaScript skills you may not know

See more

How to write a ejection ball in the vue component

Related articles