在完成了赛道以及对赛车的控制之后,就可以进行对整个小游戏的动画效果的编写了,在这个阶段主要使用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赋值语句是为了将运动元素还原,以进行下一次动画效果。}【利用大括号将整个语句封箱,可以实现赛道运动的循环】
在这里实现了赛道的循环运动后,我们可以发现能够将之前的赛车运动改为动画效果,这样能更好看,但在实现之后发现动画运动需要时间,当按键速度过快时没有办法较好的实现赛车的运动,所以在赛车运动的代码中不采用动画效果。