我认为这可能是一个可能的灵魂。
您的页面中已经有一个#terrain
元素,因此只需将与游戏相关的 HTML 代码部分包装到一个子容器中,添加一些 CSS 即可。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Life of an unlucky person</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://jquery-rotate.googlecode.com/files/jquery.rotate.1-1.js"></script>
</head>
<body>
<div id='wrapper'>
<div id="playarea">
<p>Left/Right arrow keys to move, space to sit down.</p><br />
<img src='http://www.dotcomaftereverything.com/jquery/sprites/spritePerson.png' id='img' />
<img id='sitting' src='http://www.dotcomaftereverything.com/jquery/sprites/spriteSitting.png' />
<img id='tree' src='http://www.dotcomaftereverything.com/jquery/sprites/spriteTree.png' />
</div>
<div id='terrain'></div>
</div>
</body>
</html>
CSS
body {
margin: 0;
padding: 0;
background-color: lightblue;
}
#playarea {
position: relative;
width: 100%;
height: 70%;
}
#playarea p {
margin: 0;
}
#img {
position: relative;
margin-top: 375px;
}
#sitting {
position: relative;
margin-top: 375px;
}
#tree {
position: relative;
margin-top: 100px;
margin-left: 700px;
}
#terrain {
width: 100%;
height: 100px;
background-color: green;
}
JS
$(window).on('load resize', function () {
var playarea = $('#playarea'),
terrain = $('#terrain'),
pageHeight = $(window).height(),
areaHeight = playarea.height();
terrain.css('height', (pageHeight - areaHeight) + 'px');
});
$(document).ready(function () {
var sitting = $('#sitting'),
image = $('#img');
sitting.hide();
$(document).keydown(function (e) {
var keyCode = e.keyCode || e.which,
arrow = {
left: 37,
up: 38,
right: 39,
down: 40,
space: 32
};
switch (keyCode) {
case arrow.left:
if (!sitting.is(':visible')) {
image.add(sitting).stop(true).animate({
left: '-=60px'
}, 300, "linear");
}
break;
case arrow.up:
break;
case arrow.right:
if (!sitting.is(':visible')) {
image.add(sitting).stop(true).animate({
left: '+=60px'
}, 300, "linear");
}
break;
case arrow.down:
break;
case arrow.space:
image.fadeToggle(-100, function () {
sitting.fadeToggle(-100);
});
break;
}
});
$('#sit').click(function () {});
});
这是一个活生生的例子