html实现神墓逃亡小游戏（自适应）

最新推荐文章于 2023-08-10 10:42:52 发布

web前端*先森

最新推荐文章于 2023-08-10 10:42:52 发布

阅读量1.7k

点赞数

分类专栏：神墓逃亡文章标签： html java servlet

本文链接：https://blog.csdn.net/qq_27939089/article/details/125997781

版权

神墓逃亡专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用html+css+js实现以前神墓逃亡小游戏，不需要下载，只需要点击链接就可以体验，手机电脑都可以运行，源码链接在文章末尾，需要的请自取

效果图：

目录结构：

html部分：

<!DOCTYPE html>
<html>
   <head>
       <title>H5神庙逃亡自适应手机游戏</title>
       <meta charset="UTF-8">
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
       <meta name="viewport"
           content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
       <meta name="apple-mobile-web-app-capable" content="yes">
       <meta name="apple-mobile-web-app-status-bar-style" content="black">
       <meta name="apple-touch-fullscreen" content="yes" />
       <link rel="apple-touch-icon" sizes="256x256" href="icon256.png">
       <link rel="stylesheet" href="css/index.css">
       <meta name="HandheldFriendly" content="true" />
       <meta name="mobile-web-app-capable" content="yes">
       <link rel="shortcut icon" sizes="256x256" href="icon256.png">
       <script type="text/javascript" src="./js/game.js"></script>
       <script type="text/javascript" src="./js/developer.js"></script>
       <script src="game.js"></script>

   </head>
   <body>
       <div id="container"></div>
       <script type="text/javascript">
           var SpilData = {
               id: '576742227280298086',
               pauseGame: function() {
                   if (typeof GEMIOLI !== 'undefined' && GEMIOLI.Application)
                       GEMIOLI.Application.dispatchEvent({
                           type: 'blur'
                       });
               },
               resumeGame: function() {
                   if (typeof GEMIOLI !== 'undefined' && GEMIOLI.Application)
                       GEMIOLI.Application.dispatchEvent({
                           type: 'focus'
                       });
               },
               onLoad: function(callback) {
                   if (SpilData.apiInstance)
                       callback();
                   else
                       this.callbacks.push(callback);
               },
               callbacks: []
           };
           GameAPI.loadAPI(function(apiInstance) {
               if (window.console && window.console.log) {
                   console.log('GameAPI version ' + apiInstance.version + ' loaded!');
               }
               SpilData.apiInstance = apiInstance;
               SpilData.moreGamesAction = apiInstance.Branding.getLink('more_games').action;
               SpilData.logoData = apiInstance.Branding.getLogo();
               for (var i = 0; i < SpilData.callbacks.length; ++i) {
                   SpilData.callbacks[i].call(SpilData);
               }
               SpilData.callbacks = [];
           }, SpilData);
           window.addEventListener('scroll', function() {
               if (document.activeElement === document.body && window.scrollY > 0) {
                   document.body.scrollTop = 0;
               }
           }, true);
       </script>

</body>
</html>

css部分：

#container {
   background: #000000;
   width: 100%;
   height: 100%;
}

html,
body {
   background: #000000;
   margin: 0;
   padding: 0;
   width: 100%;
   height: 100%;
   touch-action: none;
   user-select: none;
   -ms-touch-action: none;
   -moz-user-select: none;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   -khtml-user-select: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
overflow: hidden;
}

canvas {
   touch-action-delay: none;
   touch-action: none;
   -ms-touch-action: none;
}

#info {
   position: absolute;
   top: 0px;
   width: 100%;
   color: #ffffff;
   padding: 5px;
   font-family: Monospace;
   font-size: 13px;
   font-weight: bold;
   text-align: center;
}

a {
color: #ffffff;
}
其他代码太多了，需要的请自行下载源码：

https://download.csdn.net/download/qq_27939089/86262113