您的位置：首页 > 其它

贪吃蛇

2015-11-27 10:57 387 查看

<!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, speed;
speed = 100;
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];
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);
//move(fanx);
EatFood();
GetFood();
}
}

//吃到食物
function EatFood() {
if (foodleft == moveH && foodtop == moveZ) {
$(".divfood").addClass("divshe").removeClass("divfood");
}
speed = 104 - $(".divshe").length * 1;
clearInterval(s);
s = setInterval("ChangeMove()", speed);

}

//移动
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"));
})
for (var i = 1; i < arryl.length - 1; i++) {
if (moveH == parseInt(arryl[i]) && moveZ == parseInt(arryt[i])) {
alert("die");
window.location.href = window.location.href;
}
}
$(".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()", speed);
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航