关于使用web前端编写一个赛车小游戏所遇到的一些小问题（动画篇）

在完成了赛道以及对赛车的控制之后，就可以进行对整个小游戏的动画效果的编写了，在这个阶段主要使用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赋值语句是为了将运动元素还原，以进行下一次动画效果。｝【利用大括号将整个语句封箱，可以实现赛道运动的循环】

在这里实现了赛道的循环运动后，我们可以发现能够将之前的赛车运动改为动画效果，这样能更好看，但在实现之后发现动画运动需要时间，当按键速度过快时没有办法较好的实现赛车的运动，所以在赛车运动的代码中不采用动画效果。