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

代码语言：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);}
        }
        #line1,#line2{
        border-bottom: 10px dotted black;
        z-index: 2;
        }
        #line1>div,#line2>div{
        display:inline-block;
        vertical-align: top;
        width: var(--cannon);
        padding: 2px;
        }
        #line1>div>div,#line2>div>div{
        background-color:rgba(0,0,0,.2);
        width: 100%;
        height: var(--cannon);
        border-bottom: 10px solid black;
        border-radius: calc(var(--cannon) / 2)  calc(var(--cannon) / 2) 0 0;
        }
        [forat]{
        height: calc(var(--cannon) + 10px) !important;
        }
        input[type=button]:hover{
        background-color: rgba(0,128,0,.4);
        }
        input[type=button],input[type=button]:disabled{
        width:  calc(var(--cannon) *2);
        height: var(--cannon);
        font-size: 48px;
        color:black;
        background-color: transparent;
        border:none;
        background-color: rgba(0,0,0,.1);
        transition;.2s;
        border:1px solid transparent;
        cursor:pointer;
        position:relative;
        }
        input[type=button]:disabled,input[type=button]:disabled:hover{
        box-shadow: inset 2px 2px 5px gray;
        border-color: black white white black;
        font-weight: bold;
        cursor:default;
        }
        [perill]{
        background-color: red !important;
        box-shadow: 0 0 20px red;
        box-sizing: border-box;
        border:2px solid white;
        }
        [tapat]{
        border-bottom: 20px solid green !important;
        }
        #comands{
        z-index: 1;
        overflow: visible;}
        #playGame{
        position:absolute;
        background-color: rgba(0,128,0,.9);
        width: 200px;
        left:50%;
        margin-left:-102px;
        padding:15px 0px;
        color:white;
        font-size: 24px;
        z-index: 4;
        margin-top:50px;
        left:-210px;
        transition:opacity 1s ease-out .50s;
        box-shadow: 0px 0px 20px 5px rgb(0,128,0);
        border-radius: 20px;
        border:2px solid white;
        opacity: 0;
        }
        #count{
        position:absolute;
        background-color: rgba(255,0,0,.9);
        width: 80px;
        left:50%;
        margin-left:-42px;
        padding:5px 0px;
        color:white;
        font-size: 18px;
        z-index: 4;
        margin-top:-20px;
        left:50T;
        transition: .25s  ease-out .25s;
        border-radius: 5px;
        border:2px solid white;
        }
        #playGame>button{
        background-color: white;
        padding:0 20px;
        line-height: 20px;
        border-radius: 10px;
        }
        h1{
        font-size: 18px;
        font-weight: normal;
        }
        #suport{
        position:absolute;
        height: 20px;
        width: 100px;
        background-color: orange;
        left: 50%;
        margin-top:-10px;
        transform-origin: left center;
        }
    </style>



</head>

<body>
    <h1>Broken walkways. <small>(Version: 0)</small></h1>
    <div id="corse">
        <div id="container">
            <div id="line1"></div>
            <div id="playGame">GAME OVER<br><button onclick="initial()" id="play">Play</button></div>
            <div id="comands">
                <div><input type="button" value="↖"><input type="button" value="↗"></div>
                <!--<div id="suport"></div>-->
                <div><input type="button" value=&.........完整代码请登录后点击上方下载按钮下载查看