js实现一个破损的人行道游戏代码-html代码-BFW代码库

js实现一个破损的人行道游戏代码

代码语言：html

所属分类：游戏

代码描述：js实现一个破损的人行道游戏代码，行人过来时及时修补人行道防止行人掉下摔伤。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        *{
        margin:0;
        padding: 0;
        box-sizing: border-box;
        }
        :root{
        --cannon: 100px;
        --elements:20;
        --speed:1200ms;
        }
        body{
        background-image: linear-gradient(75deg,white,  lightgray 5%,white 15%, lightgray 55% , lightgray 90%,white);
        background-size: 100%;
        background-attachment: fixed;
        min-height: 300px;
        font-family: arial,sans-serif;
        overflow-x: hidden;
        }
        #corse{
        width: 100%;
        overflow: hidden;
        }
        #container{
        width: calc(var(--cannon) * var(--elements));
        margin-top:10px;
        margin-left: calc(50% - (var(--cannon) * var(--elements)/2));
        text-align: center;
        background-size:var(--cannon) var(--cannon);
        padding-bottom: 100px;
        position: relative;
        }
        .running{
        font-size: var(--cannon);
        width: var(--cannon);
        display: inline-block;
        line-height: var(--cannon);
        animation-name: run;
        animation-iteration-count:infinite;
        animation-direction:alternate ;
        animation-timing-function:linear; ease-in-out;
        animation-duration: calc(var(--speed) / 5);
        position:absolute;
        transition: var(--speed) linear;
        } 
        .left{
        transform:scaleX(-1);
        display: inline-block;
        filter:drop-shadow(-5px 5px 5px rgba(0,0,0,.7));
        }
        .right{
        display: inline-block;
        filter:drop-shadow(5px 5px 5px rgba(0,0,0,.7));
        }   
        @keyframes run {
        0% {transform: translateY(-4px)  rotate(-4deg);}
        100% {transform:translateY(0px)  rotate(+4deg);.........完整代码请登录后点击上方下载按钮下载查看