溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關vue組件如何實現彈射小球，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
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" :></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>關于“vue組件如何實現彈射小球”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
