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

使用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

html实现神墓逃亡小游戏（自适应）相关推荐

地图标识符号大全_【好玩微信小游戏大全】虫虫逃亡：烧脑游戏佳作！强烈推荐！...
沐沐带你发现好游戏! 只有你想不到, 没有我找不到的好游戏! 「良心好游戏推荐」搜罗了好玩的微信小游戏大全, 模拟经营游戏.恐怖游戏.消除游戏.休闲游戏.益智游戏.解密游戏.烧脑游戏.解谜游戏大全. ...
qt练习7 定时爆炸小游戏
本小游戏有3个重点. 1.信号与槽的使用 2.定时函数的使用 3.gif图片的显示下面是布局: 当点击START后,数码管倒计时显示.其中可以按下stop来暂停时间减少. 如下是widget.h代码 ...
Android 经典欧美小游戏 guess who
本来是要做iOS开发的,因为一些世事无常和机缘巧合与测试工作还有安卓系统结下了不解之缘,前不久找到了guess who 源码,又加入了一些自己的元素最终完成了这个简单的小游戏. <?xml ve ...
微信小游戏开发Canvas资源汇总
Demo: 微信小程序demo组件:股票分时图微信小程序小组件:仿直播点赞气泡效果,基于Canvas 优质demo推荐:二维码生成器:使用canvas与纯JS版二维码生成微信小程序学习用完整dem ...
【iVX 初级工程师培训教程 10篇文拿证】03 事件及猜数字小游戏
目录 [iVX 初级工程师培训教程 10篇文拿证]01 了解 iVX 完成新年贺卡 [iVX 初级工程师培训教程 10篇文拿证]02 数值绑定及自适应网站制作 [iVX 初级工程师培训教程 10篇文拿 ...
轻松学习 Flex 布局的小游戏
轻松学习 Flex 布局的小游戏 Flexbox Froggy,帮助你学习前端 Flex 布局的小游戏,难度不高,趣味性极强! Flexbox Froggy(弹性盒小青蛙)是一个帮助你快速学习前端 F ...
点击list view中一行内容可以在combox中显示_java版飞机大战小游戏详细教程（零基础小白也可以分分钟学会！）...
一:游戏展示飞机大战小游戏我们都玩过,通过移动飞机来打敌机,这里给大家展示一下游戏成果:呜呜呜由于gif只能上传5M大小,所以就不能给大家展示操作了,如果大家有兴趣可以自己自己做出来再玩哟. 这里面 ...
星益小游戏平台源码内置80多个在线小游戏
简介: 星益小游戏平台源码是一款星益在线小游戏可的网站源码,本程序由小星合集整理制作,共计80个小游戏. 内置了80个在线小游戏,直接就能玩耍,上传到空间用! 本程序大部分都是自适应,但是使用电脑端体 ...
超强在线小游戏网源码内置80个小游戏上传空间直接用
介绍: 内置了80个在线小游戏,直接就能玩耍,上传到空间用! 本程序大部分都是自适应,但是使用电脑端体验更佳~ 网盘下载地址: http://kekewl.cc/a4ykR5CKvBV0 图片:

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

html实现神墓逃亡小游戏（自适应）相关推荐

最新文章

热门文章