模拟科目二倒车入库训练

这是利用代码来模拟驾照考试中的科目二考试的倒车入库,通过这个可以进行科目二模拟训练。这是是通过按键盘的上下左右的进行汽车的移动的,按W或者S进行汽车的旋转。

效果图:
在这里插入图片描述

HTML中的div1对应的就是红色的小汽车,里面的span标签则是其中的两条的白线,两条白线对应则是科目二中的固定停车位,在模拟的过程中要注意白线的位置。

其他的div就是一些黄色的停车线,以及一些文件,div中的Style是我给这些线设置的一些简单的样式,不过主要的样式还是在CSS部分中。

HTML部分:

在这里插入图片描述
下面就是CSS的部分,基本上都是给div设置一些宽、高,以及背景颜色还是位置等等的各种的样式,要注意一下的就是@keyframes
animation的部分,以及A、B两个的CSS部分,虽然A、B两个类基本上差不多一样但是为了JS部分能更好的切换就多写了一点。

CSS部分:
在这里插入图片描述
再接下来就是JQuery的部分,在写JQuery代码之前要引入JQuery的脚本文件。然后就是就是键盘按下事件,上下左右的键码值分别对应的是38、40、37、39,W对应的是87、S对应的83。通过AddClass给div1添加A或者B的类,达到小汽车旋转的效果,RemoveClass移除添加添加的类,这样就可以实现多次点击而不会影响运行的效果。

JQuery部分:
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_44542115/article/details/88919286
今日推荐