使用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;
}
其他代码太多了,需要的请自行下载源码: