今天无聊想用JS做一个贪吃蛇，做之前想应该挺简单的，结果是脑子太笨，做是做出来了，还有bug![]("{#ZC_BLOG_HOST#}zb_users/emotion/default/yell.png"/)，就当玩玩吧，很久不用js了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>贪吃蛇</title>
<style type="text/css">
.wrap {
width: 410px;
margin: 0 auto;
}
.header {
text-align: center;
}
.box {
width: 400px;
height: 400px;
border: 1px solid #000;
margin: 0 auto;
position: relative;
}
.snake {
width: 20px;
height: 20px;
background: black;
position: absolute;
}
.food {
width: 20px;
height: 20px;
background: #ff0000;
position: absolute;
}
.score{
color: #ff0000;
}
</style>
<script src="jquery.js"></script>
<script type="text/javascript">
$(function () {
var snakeChain = \[\];//存放蛇
var posArr = \[\];//存放蛇的位置信息
var speed = 200;//步长
var maxWidth = $(".box").width();//游戏窗口宽度
var maxHeight = $(".box").height();//游戏窗口高度
var oTimer = null;//计时器
var score=0;
var direction = 'right';//蛇运动方向，初始往右走
var oldDirection = 39;//记录上一次的按键编号，防止蛇反方向走
craeteSnake();//创建蛇
createFood();//创建食物
//用方向键控制运动方向
$(document).keydown(function (ev) {
var keyCode = ev.keyCode;
if (Math.abs(keyCode - oldDirection) != 2) {
switch (keyCode) {
case 38:
direction = 'up';
break;
case 40:
direction = 'down';
break;
case 37:
direction = 'left';
break;
case 39:
direction = 'right';
break;
}
oldDirection = keyCode;
}
});
$(".start").click(function () {
clearInterval(oTimer);
oTimer = setInterval(run, speed);
});
$(".pause").click(function () {
clearInterval(oTimer);
oTimer = null;
});
function craeteSnake() {
var $snake = $("<div></div>");
$snake.appendTo(".box");
//蛇的初始化位置
var left = Math.random() \* maxWidth / $(".snake").width();
var top = Math.random() \* maxHeight / $(".snake").height();
snakeChain.push($snake);
var pos={left: parseInt(left), top: parseInt(top)};
posArr.push(pos);
setPosition($snake,pos);
/\*for (var i = 3; i >=0; i--) {
var $snake = $("<div></div>");
$snake.appendTo(".box");
snakeChain.push($snake);
var pos={left:i,top:0};
posArr.push(pos);
}
for(var i=0;i<snakeChain.length;i++){
setPosition(snakeChain\[i\],posArr\[i\]);
}\*/
console.log(posArr);
}
function createFood() {
var $item = $("<div></div>");
var left = Math.random() \* maxWidth / $(".snake").width();
var top = Math.random() \* maxHeight / $(".snake").height();
var flag = true;
$(".snake").each(function () {
if (parseInt($(this).css("left")) left && parseInt($(this).css("top")) top) {
flag = false;
}
});
if (flag) {
$item.appendTo(".box");
foodPos={left:parseInt(left),top:parseInt(top)};
setPosition($item,foodPos);
console.log("食物生成成功");
} else {
console.log("位置重复，重新生成食物位置...");
createFood();
}
}
function run() {
var pos = {left:posArr\[0\].left,top:posArr\[0\].top};
switch (direction) {
case 'left':
pos.left=posArr\[0\].left-1;
break;
case 'right':
pos.left=posArr\[0\].left+1;
break;
case'up':
pos.top=posArr\[0\].top-1;
break;
case'down':
pos.top=posArr\[0\].top+1;
break;
}
//更新蛇头
setPosition(snakeChain\[0\],pos);
//插入新的蛇头位置
posArr.unshift(pos);
//删除蛇尾位置
posArr.pop();
//更新蛇身位置
for (var i = 1; i < snakeChain.length; i++) {
setPosition(snakeChain\[i\],posArr\[i\])
}
//判断是否撞上墙壁
if (posArr\[0\].left<0 || (posArr\[0\].left) \* 20 >= maxWidth
|| posArr\[0\].top< 0 || (posArr\[0\].top) \* 20 >= maxHeight) {
clearInterval(oTimer);
$(".start").unbind();
alert("游戏结束");
return;
}
//判断是否撞上身体
for (var i = 1; i < posArr.length; i++) {
if (posArr\[0\].left == posArr\[i\].left &&
posArr\[0\].top == posArr\[i\].top) {
clearInterval(oTimer);
$(".start").unbind();
alert("游戏结束");
return;
}
}
if(isImpact(snakeChain\[0\],$(".food"))){
eat();
}
}
function eat() {
snakeChain.push($(".food"));
var oFood=$(".food");
oFood.removeClass("food");
oFood.addClass("snake");
posArr.push({left:0,top:0});
score++;
$(".score").html(score);
console.log("吃到了食物，重新生成食物...");
createFood();
}
function setPosition(obj,pos) {
obj.css({
left: (pos.left \* $(".snake").width()) + 'px',
top: (pos.top \* $(".snake").height()) + 'px'
});
}
function isImpact(obj1, obj2) {
var l1 = obj1.offset().left;
var l2 = obj1.offset().left + obj1.width();
var t1 = obj1.offset().top;
var t2 = obj1.offset().top + obj1.height();
var l3 = obj2.offset().left;
var l4 = obj2.offset().left + obj2.width();
var t3 = obj2.offset().top;
var t4 = obj2.offset().top + obj2.height();
if (l1 >= l4 || l2 <= l3 || t1 >= t4 || t2 <= t3) {
return false;
} else {
return true;
}
}
});
</script>
</head>
<body>
<div>
<div>
<button>开始</button>
<button>暂停</button>
<span>分数：</span>
<span>0</span>
</div>
<div>
</div>
</div>
</body>
</html>