參考網路上的作品,這部動畫主要是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>