js+css实现小人漫游世界小游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：js+css实现小人漫游世界小游戏代码，使用箭头键或通过拖动屏幕上的箭头控件来漫游。按Enter键或单击星号按钮进行查看。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        * {
          box-sizing: border-box;
          padding: 0;
          margin: 0;
          user-select: none;
        }
        
        p, h1, h2, h3, h4 {
          display: inline-block;
          margin-block-start: 0em;
          margin-block-end: 0em;
          margin-inline-start: 0px;
          margin-inline-end: 0px;
          padding-inline-start: 0px;
        }
        
        body {
          background-color: #006781;
          font-family: Arial, Helvetica, sans-serif;
          overscroll-behavior: contain;
        }
        
        .location {
          position: absolute;
          top: 50px;
          width: 600px;
          max-width: 100%;
          height: 10px;
          background-color: white;
          z-index: 50;
        }
        
        .location_mark {
          position: absolute;
          display: flex;
          width: 100%;
          height: 100%;
        }
        
        .location_mark > div {
          flex-grow: 1;
          height: 100%;
          background-color: #c3ac83;
        }
        
        .location_mark > div:nth-child(odd) {
          background-color: transparent;
        }
        
        .location_mark > div:hover {
          background-color: #7ce6f0;
          cursor: pointer;
        }
        
        .pointer {
          width: 24px;
          height: 30px;
          position: absolute;
          bottom: 5px;
          background-size: 24px 30px;
          background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAeCAYAAAA2Lt7lAAAAAXNSR0IArs4c6QAAANNJREFUSEvNVkEOwCAIg/8/2mVODJJVwRmyHVUoLZXJRFTo/eO2jPYlanru3swBKGXEYX4Ks+uWLDon651BOgDoi3t5ycCdCTmkSSwOqHJrzXd7IHFEVHOnAAyVd3MbF6nKBncdc9FxgJNNfpUoHQBJhAoJ34MvAOKK1dQMqcaton4PymqqhdITaYB/NDlI4GZQQ+C4jiZE/4kUAAE/0gv3NN2VaAbwiYlNbJ8cuuAtqSIAISYo8YxBGsAUaFW5h0EawACk3KAfDNDVrkMt2o5zV+wF49ygD5b06E8AAAAASUVORK5CYII=);
          transform-origin: center bottom;
        }
        
        .display_wrapper,
        .wrapper,
        .inner_wrapper {
          position: absolute;
          top: 0px;
          left: 0px;
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        
        .wrapper {
          overflow: hidden;
        }
        
        .display_wrapper {
          pointer-events: none;
          transition: 0.3s;
          flex-direction: column;
          z-index: 100;
        }
        
        .img_display {
          image-rendering: pixelated;
        }
        
        .display_wrapper.display button,
        .display_wrapper.display .close {
          pointer-events: auto;
          opacity: 1;
        }
        
        .display_wrapper.display {
          pointer-events: auto;
          background-color: #032041d7;
        }
        
        .inner_wrapper {
          pointer-events: none;
          top: 100%;
          transition: 0.3s;
          flex-direction: column;
        }
        
        .display_wrapper.display .inner_wrapper {
          top: 0px;
        }
        
        .display_wrapper button {
          padding: 14px 18px;
          border: 0px;
          background-color: #c3ac83;
          border-radius: 50px;
          margin-top: 20px;
          font-size: 18px;
          cursor: pointer;
        }
        
        .display_wrapper button.close {
          background-color: white;
          margin-top: 40px;
        }
        
        .display_wrapper button:hover {
          background-color: #7ce6f0;
        }
        
        .circle::before {
          content: '';
          width: 220px;
          height: 440px;
          position: absolute; 
          left: 0px;
          border-top-left-radius: 220px;
          border-bottom-left-radius: 220px;
          background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANwAAAAgCAYAAAB5ChbjAAAAAXNSR0IArs4c6QAAAR1JREFUeF7t3LENAkEMBEA+pyZKoFhKoCZyEEifUIBteYcGfJ69lR4QHNfH833xIkCgROBQuBJnQwj8BBTORSBQKKBwhdhGEVA4d4BAgcDrfjs8UhZAG0HgK6Bw7gGBQgGFK8Q2ioDCuQMECgTOop2jfGhSgG5EroDC5WZv8wYBhWtANzJXQOFys7d5ocB/0byHK8Q3Kk9A4fIyt3GjgMI14hudJ6BweZnbuFFA4Rrxjc4TULi8zG3cKKBwjfhG5wkoXF7mNh4g4IvvASE4Qo6AwuVkbdMBAgo3IARHyBFQuJysbTpIwA9QB4XhKPsFFG5/xjYcJKBwg8JwlP0CCrc/YxsOFPCfJgNDcaS9Agq3N1ubDRRQuIGhONJegQ8XhXQZhyzAIAAAAABJRU5ErkJggg==);
          background-size: 220px 32px;
          background-repeat: repeat-y;
          opacity: 0.4;
          transition: 2s;
        }
        
        .element {
          position: absolute;
          transform-origin: bottom center;
          color: hotpink;
          display: flex;
          flex-direction: column;
          background-color: transparent !important;
        }
        
        .element.change {
          color: black;
        }
        
        .bear {
          position: absolute;
          background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOAAAAAgCAYAAAALxXRVAAAAAXNSR0IArs4c6QAAA15JREFUeF7tXNGShCAM0///6L05Vx1hKW1KEUdyjytrIE1aqO6tC//IABkYxsA6DJnAZIAMLCUDfgRejrHS9eNr2jjN9MQvB0DjNYp/zRa94z8VPg34G+7ZE8BUBtAWW7gemoBEA34+Kc66fofmn+cTlMYdny9Lsepeb7MBE38Y/5Imi3HpEP+p8GlAoQJOnACmMgBQAbskILMBgYkWh7ZWQOK3MQDwnwOZhKfNjvin1RLP0YDGCqgJTLsOCDBE8NLW0HAEoAFTBkLiIcW/1pFMgL1nQEB41cCPxtcMJl2PWv+N+MUmQ+uWHDD+VPg0oKzsrpnPYKhR+FMZwNrl7JWAzFvQvAJdMnvSHb2rC3o3vsEw1SFAJQwxXsMW1IRv3ZEc84he/1vwaUCeAV1nvrcYQKqA3sdt6FHEbEBWgDYGoisAOhvil7uQXgNG8U8DsgK6KmCUAEcbYDS+24DSGQwtwV4CRuO/WIDH0pJmjLYl0/gAKvBU+DQgK6DkHRrwwkyvBCQ+hvi0ImZhXfOSpaRM4mcv42olRrmO8n+WoSAdOCrgNoUoHTwVnwYUhBsV+EsbXvsZVjKT0fg04JeBqDggb8JU34DRnvMdCbPy3FAT4qPwGwvP+XUgA5uew6HzAvCrTRkprtZC6ZiHSw8BvYjkLKrp2rt+9QxoJVwbBxDvIrwXPir0gMDTgCmJLj0ExOEZBrxsoY6SXNWkViEN7wQ+8veArUb0JqBW3Dx+Bv6Lwivcx6SHfP6tPKDd76fjqxWQBoyxQKvwWmcB4NOA+/FvPwMm1EcnALMBbxTA6C3Y7PhVA1IHbQzkiZAG/OWTBqxUgDb5LQtQiaeIAw1IA0qeCjUAYLx8PiHzcOCH4GpncBqQBqQBywwMMyB0CD8HKy9uRGUg7YUa6YeTQPeP608FWRWi1pRwxN1UASUdBMYf0oH0HFBbv/kX8VIbmgbcD0zvS0CmZgwNWI9/iwGTAFzSkmTa6vM7RwVC8b3jtb5C/i8aplw/UFmsfGm8FyuhVYeGcdH4Lv1rr4X9T9JKqGsCBhas+DTgnowzTi0xroUBjSsaL4MEtiHW+1rHWXGtukJ52u7bGpzSInoRgBI2avxb1//WdUXrBOKJBoym356p45H73hESVt+pPPruEE9/6kRWXWvZA88AAAAASUVORK5CYII=);
          background-repeat: no-repeat;
          background-size: 224px 32px;
          bottom: 0px;
          left: 0px;
          width: 224px;
          height: 32px;
          z-index: 1;
          transform-origin: center bottom;
        }
        
        .bear_wrapper {
          position: absolute;
          width: 32px;
          height: 64px;
          overflow: hidden;
          transform-origin: center bottom;
        }
        
        .bear_wrapper::after {
          position: absolute;
          top: 10px;
          color:  white;
          width: 32px;
          height: 32px;
          image-rendering: pixelated;
          background-repeat: no-repeat !important;
          background-size: 32px !important; 
          content: '';
          background-image: url(data:image/png;base64,iVBORw0KGgoA.........完整代码请登录后点击上方下载按钮下载查看