原生js实现火车变轨通行引导游戏代码-html代码-BFW代码库

原生js实现火车变轨通行引导游戏代码

代码语言：html

所属分类：游戏

代码描述：原生js实现火车变轨通行引导游戏代码，在图中点击鼠标变动错乱的轨道让火车可以通行。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Coustard&amp;display=block'>

    <style>
        body {
          margin: 0;
          background-color: #252021;
          height: 100vh;
          display: flex;
          align-items: center;
          text-transform: uppercase;
          overflow: hidden;
        }
        
        .canvas-container {
          position: relative;
          width: 100vmin;
          height: 100vmin;
          display: block;
          text-align: center;
          margin: 0 auto;
        }
        .canvas-container a {
          display: none;
          position: absolute;
          right: 5%;
          top: 5%;
        }
        .canvas-container canvas {
          height: 100%;
        }
        
        .modal {
          position: absolute;
          width: 130px;
          height: 183px;
          font-size: 14px;
          background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/21151/ticket.svg);
          background-repeat: no-repeat;
          background-size: contain;
          color: #019897;
          text-align: center;
          left: 50%;
          top: 50%;
          font-family: "Coustard", serif;
          transform: translateX(-50%) translateY(-50%);
          padding: 20px;
          transition: 0.2s all;
        }
        
        .modal__gameover,
        .modal__win {
          display: none;
        }
        .modal__gameover .modal__title,
        .modal__win .modal__title {
          padding: 40px 0 25px;
        }
        
        .modal__loading {
          display: none;
        }
        
        .game--active .canvas-container a {
          display: block;
        }
        .game--active .modal {
          pointer-events: none;
          opacity: 0;
          transform: translateX(-50%) translateY(0);
        }
        
        .game--over .modal__gameover {
          display: block;
        }
        .game--over .modal__main,
        .game--over .modal__win {
          display: none;
        }
        
        .game--win .modal__win {
          display: block;
        }
        .game--win .modal__gameover,
        .game--win .modal__main {
          display: none;
        }
        
        .game--loading .modal__main {
          display: none;
        }
        .game--loading .modal__loading {
          display: block;
        }
        
        .modal__title {
          padding: 10px 0 17px;
          margin: 0;
          color: #f38073;
          line-height: 1.1;
          font-weight: normal;
        }
        
        .modal__text {
          margin: 2.5em 0;
        }
        
        .modal__controls {
          display: flex;
          justify-content: center;
          margin: 17px 0 10px;
        }
        
        .btn {
          font-family: "Coustard", serif;
          display: inline-block;
          line-height: 40px;
          background-color: #d8d1c6;
          padding: 0 20px;
          color: #252021;
          cursor: pointer;
          text-transform: none;
        }
        .btn:hover {
          background-color: #c3b9a8;
        }
        
        input[type=range] {
          -webkit-appearance: none;
          background-color: transparent;
        }
        
        input[type=range]::-webkit-slider-runnable-track {
          width: 129px;
          height: 6px;
          background-color: #01aead;
          border: none;
          border-radius: 3px;
        }
        
        input[type=range]::-moz-range-track {
          width: 129px;
          height: 6px;
          background-color: #01aead;
          border: none;
          border-radius: 3px;
        }
        
        input[type=range]::-ms-track {
          width: 129px;
          height: 6px;
          background-color: #01aead;
          border: none;
          border-radius: 3px;
          margin: 5px 0;
        }
        
        input[type=range]::-webkit-slider-thumb {
          -webkit-appearance: none;
          border: none;
          height: 16px;
          width: 16px;
          border-radius: 50%;
          background-color: #f38073;
          margin-top: -5px;
        }
        
        input[type=range]::-moz-range-thumb {
          -webkit-appearance: none;
          border: none;
          height: 16px;
          width: 16px;
          border-radius: 50%;
          background-color: #f38073;
          margin-top: -5px;
        }
        
        input[type=range]::-ms-thumb {
          margin-top: 0;
        }
        
        /*input[type=range]::-ms-fill-lower {
          background: #2a6495;
          border: 0.2px solid #010101;
          border-radius: 2.6px;
          box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        }
        input[type=range]::-ms-fill-upper {
          background: #3071a9;
          border: 0.2px solid #010101;
          border-radius: 2.6px;
          box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        }*/
        input[type=range]:focus {
        .........完整代码请登录后点击上方下载按钮下载查看