Vue

by emredipi

HTML

<div id="app">
<div>
  0ms <div class="ball" :style="{marginLeft:marginOfFirstBall+'px'}"></div>
</div>
<div>
  5ms <div class="ball" :style="{marginLeft:marginOfSecondBall+'px'}"></div>
</div>
  
  <button @click="baslat">
  	Başla
  </button>
  <button @click="reset">
	  Sıfırla
  </button>
</div>

CSS

#app {
  padding: 10px;
}


.ball {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: black;
  margin: 5px;
}

#app:last-child{
  background-color: red;
}

Vue

const step=1;
const frame = 240;
const time = 1000 / frame;

new Vue({
  el: "#app",
  data:()=>({
  	marginOfFirstBall:0,
	marginOfSecondBall:0,
  }),
  methods: {
	baslat(){
		setInterval(()=>{
			this.marginOfFirstBall+=step;
			if(this.marginOfFirstBall>500){
				this.marginOfFirstBall = 0;
			}
		},time);
		setTimeout(()=>{
			setInterval(()=>{
				this.marginOfSecondBall+=step;
				if(this.marginOfSecondBall>500){
					this.marginOfSecondBall = 0;
				}
			},time);
		},4);
	},
	reset(){
		this.marginOfFirstBall=0;
		this.marginOfSecondBall=0;
	}
  }
})