<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5激流勇进迷宫逃生小游戏源码</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: url("images/qq.jpg");
}
canvas {
display:block;
/*margin: 40px auto 20px;*/
border: 1px solid #333;
box-shadow: 0 0 16px 2px rgba(0,0,0,0.8);
margin:0px auto;
}
p, a {
font-family: Helvetica, Arial, sans-serif;
font-size: 19px;
color: #777;
display: block;
width: 400px;
margin: 0 auto;
text-align: center;
text-decoration:none;
margin-top: 15px;
}
.info {
margin:14px auto;
text-align: justify;
font-size: 18px;
color: #999;
}
.startGame{
position: relative;
width: 400px;
height: 400px;
margin:0px auto;
background: url("images/123.jpg");
}
.startGame a{
display: block;
width: 100px;
height: 40px;
line-height: 40px;
position: absolute;
left:50%;
margin-left: -50px;
bottom: 20px;
color:white;
border:1px solid white;
}
a {
color:#3377ee;
}
</style>
</head>
<body>
<div class="kbBox" id="kbBox"></div>
<div class="startGame" id="startGame">
<a href="javascript:void(0)" id="enterGame">进入游戏</a>
</div>
<div class="gameId" id="gameId" style="display: none;">
<canvas id="canvas"></canvas>
<p>游戏玩法:使用左键、右键和上箭头键移动。</p>
</div>
<script src="game.js"></script>
<script>
window.onload = function () {
var height = document.documentElement.clientHeight;
var kbBox = document.getElementById("kbBox");
var top = height - 400;
console.log(top);
kbBox.setAttribute("style","height:"+top/2+"px");
var startGameId = document.getElementById("startGame");
var enterGameId = document.getElementById("enterGame");
var gameId = document.getElementById("gameId");
enterGameId.onclick = function () {
gameId.setAttribute("style","display:block");
startGameId.setAttribute("style","display:none");
Loop();
}
}
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>更多源码:<a href="http://www.96flw.com/" target="_blank">www.96flw.com</a></p>
</div>
</body>
</html>