在vue组件中如何写出弹射小球

一个新手

Lepaskan： 2017-09-06 11:22:48

asal

1928 orang telah melayarinya

1. 定义每个弹射的小球组件( ocicle )

2. 组件message自定义属性存放小球初始信息(可修改)

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

Salin selepas log masuk

3. 思路

　　3.1 定时器设置小球每一帧移动

　　3.2 初始方向：isXtrue为true则小球为横坐标正方向；

　　　　　　　　　isYtrue为true则小球为纵坐标正方向

　　3.3 每次移动之前获取小球当前坐标(oleft,otop)，当前坐标加上移动距离为下一帧坐标

　　3.4 边界判断：横轴坐标范围超过最大值则加号变减号

4. vue知识点

　　4.1 父子组件传递信息使用props

　　4.2 模板编译之前获取el宽高

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

Salin selepas log masuk

　　4.3 子组件获取el宽高 ( this.$root.elWidth,this.$root.elHeight )

　　4.4 模板编译完成后更新子组件信息

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();
}

Salin selepas log masuk

5. 代码

<!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>

Salin selepas log masuk

Atas ialah kandungan terperinci 在vue组件中如何写出弹射小球 . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!