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,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAGpJREFUOE/tU7ENACAIg/+PxmgESUWD0VEHF2gpFJguHwNeknyG8wQiksMzN9j4iCgE98QanIQpiSr4BIsh7ix9PsRabHJiZWO0B6rWDEfvlawnhpuILZsiXxGT8BZ8/JqgzQUlnyhIHWYBz5dHEcECbOcAAAAASUVORK5CYII=);
          opacity: 0;
          transition: 0.1s;
        }
        
        .bear_wrapper.alert::after {
          top: 0px;
          opacity: 1;
        }
        
        .bear_wrapper > div {
          position: absolute;
          bottom: 0px;
          height: 32px;
          width: 32px;
        }
        
        .right {
          transform: scale(-1, 1);
        }
        
        .tree {
          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAA8CAYAAAAgwDn8AAAAAXNSR0IArs4c6QAAAS1JREFUaEPtmOESgjAMg+H9H1pPlDv1gKZL2NZe/ctWm3xxK66L/vMwSq7Kr5QW+zQWVoDV+L/xEvMkRUDnpxXgdV4qREEgrAC2cQkJhkBYAerGKRItBMIKuLvxJhIeAmEF9G7cRQIhEFbA6MYhElcEwgqYrfFLEkcESoDyjeug1o/pKQmcGdg7WsgRv0CLGt+42CRBvSGLejsPnf/7otQCRjsPkaibmP2lNuzPew/MlnkLzkbiG0cJsCwTP89HwDKod8SQS7ZmIYua4vklCQRT7+hAIwQyzI1uHBJSs5Ai5M4aNQs5DbtteZ6beLbTxoXshaEEuCwTL05BYPckWpTynEJsKllyyEB52iO1WfSfKdUDtbkEvB2gTKQ2F4EiQOavIlQRqghtGRg6SjwBzME8OQGJzeQAAAAASUVORK5CYII=);
        }
        
        .tree.gold {
          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAA8CAYAAAAgwDn8AAAAAXNSR0IArs4c6QAAATBJREFUaEPtmssRwyAMRE1h6SLt5JR20kUKSyYHcsDGK8zyEbO5wii7egKJGYeN/Hu/np+zkLf7IzD/khrsJ8ytASQ8zTqLBI2AWwOlwtkkqgm4NVArnEXiMgG3BtjCa0kUE3BroLXwqyTMBNwa6C28lAQk4NbAaOFWElkCbg3MJhyR2BGQAeZz6yBW+o5Yj0Augb1Ly/pig30gGnJroLdwdOuk65CAWwOjhVtJqBM3vvZ34dftA7PVPCIbSfzPgAyglJHX1yOAEtS7xDQLjRrirB047tMshM4Oaz13JjQLsTJsjaNZyJqp1vvW6cS9OyybTJABdkoL4/knMMvMU5j4bZ1bqNR5ur/2ErDO/TmdcBpFBmWg8gsuEVAJqYTQNQPWVUIqIZXQ+afGKD+1o8QX8/PsAUSbdP0AAAAASUVORK5CYII=);
        }
        
        .tree.navy {
          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAA8CAYAAAAgwDn8AAAAAXNSR0IArs4c6QAAAStJREFUaEPtmlEOwjAMQ+lpOQbiGJwWJMSEtNE5bbx0Kea3U2bnJU0LlAv7c70/d0M+boX5Smqwt7C0BpDwddpJJHgE0hpoFU4m4SeQ1oBXOIlEP4G0BtjCnSTaCaQ1cLTwThJ2AmkNRAtvJIEJpDUwWriRRJ1AWgNnEw5IbAnIAPO+9SPW6h4xIYFaAqNLy3hjw3NgMZTWQLRw4/6/PIYJpDUwWriRhCbxwbv+Nvy8c+BsNY/Qfkh8e0AGUMrI6/MRQAmKLjGdhUYd4owTWGch1DL09UpP6CxEzzQKqLMQylDU+jyTOHrCkgkV+Ms6+YXscDLAzmhrPF1oWjNGe36zjfZG9u5ixnN/TR7+Zg4ZkwHfP7hEwD0I1QOoSdG6mlhNjGoErKuE/ryEXs8pr9lOa2KxAAAAAElFTkSuQmCC);
        }
        
        .tree.white {
          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAA8CAYAAAAgwDn8AAAAAXNSR0IArs4c6QAAASZJREFUaEPtmsEOwyAMQ8f/fzTTDt2BjjohHhDkXoOonZeGILW8yE+ttT5tWUopzFdSN/sIS2sACW+zziJBI5DWgFc4m0SYQFoDUeEsEsME0hpgC4+ScBNIa+DfwkdJmAmkNTBbuJcEJJDWwGrhVhJdAmkN7CYckbgRkAHmdevHXu094jwCvQTOLi3rjQ2eA5ehtAZmC0dd5xZH31xaA6uFW0noJEYlyI6few7sVvOI3EXi+w3IAEoZOX4eAZSg2SWmWWjVEGc9ga91cBqdXTo0A6uFW41oFkLdix3XLMTO6Oh+55zEu3UbL5EiA96UkdfnJ7DLzOMFc04X8jpv10ebgHXu7+mE0ygyKAPBP7hEQCWkEkJtBsRVQiohldDzr8YoP9FR4g3ng/Atg0wpIgAAAABJRU5ErkJggg==);
        }
        
        .talking_tree {
          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAA8CAYAAAAgwDn8AAAAAXNSR0IArs4c6QAAAWZJREFUaEPtl1ESgyAMROX+h7bTqp3iCFmSFQxN/6wQsvuChLTwf6sQMjGXpAbbE3MrQEr8bDzFPEoQ0PnHCmh1niqEQcCtAGviFBIWAm4FsBM3kdAQcCvg7sRVJFoIuBXQO/EmEggBtwJGJw6RqBFwK+BpiVdJXBEIAcwb10WszPQpCZQM7F1ayCd+gQYpb1zWSoJyQwb1dh76/h+DphYw2nmIRJzE1p2qmD/vOfC0mpfgfEj84ggBkmXk9/MRkAzqXWLIIRu9kESN8b5KAsHUu3SgFgJp5rLE13V7TCnXXPpfsl4R79JsuBdSLFjVoIgHC6iWzLHwF+GJiOT8+b0inq0XUiwIkWgwpCiAslkVpdEKLdu/9F5ohACK84TaVpF4EwgBKutIk24jQMpPDEPfxOKKvAH/dx8oeWf9CCANZZGbafIeNQRYtkUQIByEJhNNk2MPbA6YTDRNDgJBwFh/UUKEEnoBualyOSdvZPEAAAAASUVORK5CYII=);
        }
        
        .talking_tree.white {
          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAA8CAYAAAAgwDn8AAAAAXNSR0IArs4c6QAAAWZJREFUaEPtmsENwjAMRemlK7EF6zAD67AFK/UCAimVSHC/HTtJXcyRtM7/fk7iSJ1Oxr9lWZ5bIed5niynNA32FubWABKeZ92KhBkBtwakwq1JqAm4NaAVbkWimoBbA9bCtSTEBNwaaC28lgSbgFsDvYVLSUACbg2MFs4lQRJwa2BvwhGJgkAYsLxu/YiV3yOOR4BKYO/S4t7Y4DmQDLk10Fs42nXycUjArYHRwrkk4iRuvO0X4Y97Duyt5hHZRGJdA2EApcx4/HgEUIJ6l1j0QqOaOO4JnJ77n17ocb99TJ8v168kUf+jNSWNR60Jdi8knXCYAbTbJCNJYE4ECc/HpfHUvZB0QmRIGo80gDKPhKRx61Kj5m12Enc3YJV5bW1zCRd34jBQmzqj96ZWBIz0wTBxoYEpavRAsY3WzqMtQW7fT+mD3SgyFgaUX3AFgSihKCG0zYDxKKEooSih7U+NUX60rcQLuHomAMi6N0QAAAAASUVORK5CYII=);
        }
        
        .talking_tree.navy {
          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAA8CAYAAAAgwDn8AAAAAXNSR0IArs4c6QAAAXdJREFUaEPtmjEOwjAMRenCVZk4ABNi4gBMXJUFpKoRIsV823GSOpiRtM7/fk7iqp121r/D5fkz5P08WU5pGmwW5tYAEp6n3YiEHQG3BqTCjUmUE3BroFS4EQk9AbcGrIUXkpATcGugtnAlCT4BtwZaCxeSwATcGugtnEmCJuDWwNaEAxJrAmHA8nnrS6zsOWJAAlQCW5cW84kNnwPJkFsDrYUz9/90GSbg1kBv4UwScRJX3vXX4cc9B7ZW8wjtQuK9BsIASpnx+HgEUIJal1j0Qr2aOOYJ/H+90ON2mk3vj9ePHFH/oyUljkesCXYvJJ4QOBDHYxsAu02aOOnLiaDM5+PieKW9kHhCJgl2QkgDRvu8uDSkyNL1tU7i9gaMMl9c20oSE3yzrgxsvVYo.........完整代码请登录后点击上方下载按钮下载查看