html求小球的速度和高度php,vue组件初学--弹射小球-CSDN博客

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. 代码

Document

html,

body{

padding: 0;

margin: 0;

width: 100%;

height: 100%;

}

#app{

width: 800px;

height: 500px;

margin: 50px auto;

outline: 1px solid #f69;

position: relative;

}

var tem={

props: ["message"],

template: '

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

}

})

6. 链接地址( https://github.com/hsiangleev/vue-moveBall )

vue&period;js加入购物车小球动画

生成一个动画小球的div,并且生成五个小球,五个是为了生成一定数量的小球来作为操作使用,按照小球动画的速度,一般来说五个也可以保证有足够的小球数量来运行动画动画的内容分别是外层和内层,外层控制动画小 ...

vue组件

分享出来让思路更成熟. 首先组件是 Vue.js 最强大的功能之一. 可以减少很多的工作量,提高工作效率. 编写一个可复用性的组件,虽然官网上也有.... 编写可复用性的vue组件具备一下的几个要求 ...

vue组件的配置属性

vue组件的声明语法: Vue.component('component-name',{ template:'

段落{{prop1}} {{prop2}}

', da ...

vue组件，撸第一个

实现此例您可以学到: vue-cli的基本应用父组件如何向子组件传递值单文件组件如何引入scss v-on和v-for的基础应用源码下载一.搭建vue开发环境更换镜像到cnpmnpm ins ...

vue组件最佳实践

看了老外的一篇关于组件开发的建议(强烈建议阅读英文原版),感觉不错翻译一下加深理解. 这篇文章制定一个统一的规则来开发你的vue程序,以至于达到一下目的. 1.让开发者和开发团队更容易发现一些事情. ...

JS组件系列——又一款MVVM组件：Vue(二：构建自己的Vue组件)

前言:转眼距离上篇 JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue ...

vue组件大集合 component

vue组件分为全局组件.局部组件和父子组件,其中局部组件只能在el定义的范围内使用, 全局组件可以在随意地方使用,父子组件之间的传值问题等. Vue.extend 创建一个组件构造器 template ...

【Vue】详解Vue组件系统

Vue渲染的两大基础方式 new 一个Vue的实例这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组件并使用—— 全局注册通过Vue.comp ...

关于vue组件的一个小结

用vue进行开发到目前为止也有将近一年的时间了,在项目技术选型的时候隔壁组选 react的时候我们坚持使用vue作为前端的开发框架.虽然两者思想上的差异不大,但是vue的语法在代码的可读性以及后期的维 ...

随机推荐

UITableViewHeaderFooterView的封装

UITableViewHeaderFooterView的封装特点 1. 封装的 UITableViewHeaderFooterView 能够让用户更好的自定义自己的 headerView; 2. 封 ...

php上传文件类型

下面提供一张IE和火狐浏览器的文件类型对照表: ie 火狐 id 后缀名 php识别出的文件类型 0 gif image/gif 1 jpg image/jpeg 2 png image/png 3 ...

Linux Network IO Model、Socket IO Model - select、poll、epoll

目录 . 引言 . IO机制简介 . 阻塞式IO模型(blocking IO model) . 非阻塞式IO模型(noblocking IO model) . IO复用式IO模型(IO multipl ...

Linux内核高端内存转

Linux内核地址映射模型x86 CPU采用了段页式地址映射模型.进程代码中的地址为逻辑地址,经过段页式地址映射后,才真正访问物理内存. 段页式机制如下图. Linux内核地址空间划分通 ...

WIN32&lowbar;FIND&lowbar;DATA 循环获取文件大小BUG

今天在调试程序时发现一个 WIN32_FIND_DATA 的BUG,在循环读取一个目录下的图片文件时,发现结构体中 nFileSizeLow 和 nFileSizeHigh 值 == 0的情况.即能获 ...

HDU 4734 F(x) 2013 ACM/ICPC 成都网络赛

传送门:http://acm.hdu.edu.cn/showproblem.php?pid=4734 数位DP. 用dp[i][j][k] 表示第i位用j时f(x)=k的时候的个数,然后需要预处理下小 ...

Chrome 浏览器报 filed to load resource&colon;net err cache read failure 错误：

在IE/FF下没有该错误提示,但在Chrome下命令行出现如下错误信息: Failed to load resource: net::ERR_CACHE_MISS 该问题是Chrome浏览器开发工具的 ...

IE8及其以下浏览器关于圆角表框的问题

css部分 yuan { border: 2px solid #C0C0C0; -moz-border-radius: 50%; -webkit-border-radius: 50%; border- ...

对于League of Legends的分析

League of Legends是一款在国内甚至国际上都很受欢迎的一款网络竞技行的游戏.它是由美国Riot Games开发,腾讯游戏运营的英雄对战网游.除了即时战略.团队作战 ...

stm8 时钟输出引脚

CLK_CCO引脚是STM8的时钟输出引脚,若设置该脚输出主时钟Fmaster,时钟输出寄存器可以进行如下操作 CLK->CCOR=0X19;