在完成了賽道以及對賽車的控制之后,就可以進行對整個小游戲的動畫效果的編寫了唐责,在這個階段主要使用js語句,源代碼如下:
.xiaosaidao{width:20%;
height:200%;
border-right:4px dashed #ffffff;
margin-top:-100%;
float:left;
box-sizing:border-box;
} ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?(css語句,定義賽道的大小以及賽道的絕對位置伍茄,方便之后做出動畫效果)
由于此處小賽道的高度超過100%间唉,為了界面效果好看绞灼,需要在道路大盒子里加入以下語句
overflow:hidden;(其作用是將超出本盒子的部分隱藏。)
賽道運動的js代碼
function r(){$(".xiaosaidao").animate({"margin-top":"0%"},6000,"linear",
function(){$(".xiaosaidao").css({"margin-top":"-100%"});
r();})}
r();
(其中$代表之前提到過的引用的工具JQuery 呈野,animate是工具的作用低矮,意為采用動畫效果,6000代表6000毫秒即6秒被冒,意為動畫完成的時間總共為6秒军掂,linear代表動畫效果為勻速運動,在這里需要高度注意各個括號之間的相互對應昨悼。){在采用動畫效果后立即使用css賦值語句是為了將運動元素還原蝗锥,以進行下一次動畫效果。}【利用大括號將整個語句封箱率触,可以實現(xiàn)賽道運動的循環(huán)】
在這里實現(xiàn)了賽道的循環(huán)運動后终议,我們可以發(fā)現(xiàn)能夠將之前的賽車運動改為動畫效果,這樣能更好看,但在實現(xiàn)之后發(fā)現(xiàn)動畫運動需要時間穴张,當按鍵速度過快時沒有辦法較好的實現(xiàn)賽車的運動细燎,所以在賽車運動的代碼中不采用動畫效果。