1. 定義每個彈射的小球組件( ocicle ) 2. 組件message自定義屬性存放小球初始信息(可修改) 3. 思路 3.1 定時器設置小球每一幀移動 3.2 初始方向：isXtrue為true則小球為橫坐標正方向； isYtrue為true則小球為縱坐標正方向 3.3 每次移動之前獲取小球當 ...
1. 定義每個彈射的小球組件( ocicle )
2. 組件message自定義屬性存放小球初始信息(可修改)
{ top: "0px", //小球距離上方坐標 left: "0px", //小球距離左邊坐標 speedX: 12, //小球每次水平移動距離 speedY: 6 //小球每次垂直移動距離 }
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; }
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(); }
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>
<div id="app">
<ocicle :message="message1"></ocicle>
<ocicle :message="message2"></ocicle>
<ocicle :message="message3"></ocicle>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
var tem={
props: ["message"],
template: '<div class="article" :style="addStyle"></div>',
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>
6. 鏈接地址 ( http://hsianglee.top/vue/moveBall.html )
