标签：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
#div-container {
height: 200px;
width: 200px;
position: relative;
border: 1px solid black;
}
.divshe {
height: 5px;
width: 5px;
background-color: black;
position: absolute;
left: 0px;
top: 0px;
}
.divfood {
position: absolute;
height: 5px;
width: 5px;
background-color: black;
}
</style>
</head>
<body>
<div id="div-container">
<div id="div-she" class="divshe" tabindex="1" style="left:20px;"></div>
<div class="divshe" tabindex="1" style="left:15px;"></div>
<div class="divshe" tabindex="1" style="left:10px;"></div>
<div class="divshe" tabindex="1" style="left:5px;"></div>
</div>
</body>
</html>
<script type="text/javascript">
var she = $("#div-she");
var foodleft, foodtop, moveH, moveZ;
var flag = "d";
var height = $("#div-container").height() * 1;
var width = $("#div-container").width() * 1;
//键盘上下左右操作
window.document.onkeydown = function (e) {
e = event || e;
var press = e.keyCode;
moveH = parseInt(she.css("left"));
moveZ = parseInt(she.css("top"));
var a = [37, 38, 39, 40];
console.log(a.indexOf(press))
if (a.indexOf(press) >= 0) {
flag = press == 37 && flag != "d" ? "a" : press == 38 && flag != "s" ? "w" : press == 39 && flag != "a" ? "d" : press == 40 && flag != "w" ? "s" : flag;
var fanx = flag == "a" ? "left" : flag == "w" ? "top" : flag == "d" ? "left" : flag == "s" ? "top" : "";
var px = flag == "a" ? moveH : flag == "w" ? moveZ : flag == "d" ? moveH : flag == "s" ? moveZ : 0;
she.css(fanx, px);
EatFood();
GetFood();
}
}
//吃到食物
function EatFood() {
if (foodleft == moveH && foodtop == moveZ) {
$(".divfood").addClass("divshe").removeClass("divfood");
}
}
//移动
function move() {
if (moveH < 0 || moveH > height - 5 || moveZ < 0 || moveZ > width - 5) {
alert("die");
window.location.href = window.location.href;
}
var arryl = [], arryt = [];
$(".divshe").each(function () {
arryl.push($(this).css("left"));
arryt.push($(this).css("top"));
})
//console.log(arryl)
$(".divshe").each(function () {
$(this).css({ left: arryl[$(this).index() - 1], top: arryt[$(this).index() - 1] })
})
}
//出现食物
function GetFood() {
if (!$(".divfood").is(":visible")) {
var left = parseInt(Math.random() * 40) * 5;
var top = parseInt(Math.random() * 40) * 5;
foodleft = left;
foodtop = top;
var div = "<div class=‘divfood‘ style=‘left:" + left + "px;top:" + top + "px‘></div>";
$("#div-container").append(div);
}
}
//改变移动方向
function ChangeMove() {
moveH = parseInt(she.css("left"));
moveZ = parseInt(she.css("top"));
move();
var fanx = flag == "a" ? "left" : flag == "w" ? "top" : flag == "d" ? "left" : flag == "s" ? "top" : "";
var px = flag == "a" ? moveH - 5 : flag == "w" ? moveZ - 5 : flag == "d" ? moveH + 5 : flag == "s" ? moveZ + 5 : 0;
she.css(fanx, px);
EatFood(moveH, moveZ);
GetFood();
}
//设置运行速度
var s = setInterval("ChangeMove()", 100);
</script>
标签：
原文地址：http://www.cnblogs.com/-maomao/p/4999976.html
