參考網路上的作品,這部動畫主要是CSS跟Jquery配合的
出發以後會跑一段距離->有個點會原地踏步->後退->再前進
(可點擊進去youtube看此影片)
看他的程式碼是使用jquery的animate去操控,才能這麼順暢
但我想使用CANVAS去模擬這個運動
一直做不到像上面一樣
只能做到,一直往前+退後一點點,看起來很不順暢又沒有刺激性...
(可點擊進去youtube看此影片)
還請各位大大指點謝謝!
以下是皮卡丘動作的主要程式碼
<script>
    //初始位置
	var y1 = 330;   
    var x1 = 1760;
    var endline =0;
        if(x1>endline){  //x1是第一隻的x座標
         
		x1-= randommove(); 	
		
            if(x1<endline || x1==endline){
                //第一台到終點                
                x1=endline;    
                reachline(y1,"car1");           
            }
        }
        
         function randommove(){ //隨機產生出要加x座標還是減x座標
      
			var aaa=Math.random();
			if(aaa<0.5){
			
			return Math.floor(aaa*30*-1);
			}else if (aaa>0.5){
			
			return Math.floor(aaa*30);	
			}
		
    }
    
    if(countdownnumber>-1){ //倒數時間到的時候,比賽開始
			
				ctx.drawImage(imgsArr[0],x1,y1,150,107);
	}
</script>