JQuery实现简单的贪吃蛇游戏代码
来源：原创
时间：2015-08-26
作者：脚本小站
分类：JS/JQuery
下面这段代码是用jquery实现简单的贪吃蛇代码，很有意思，复制代码即可演示，jquery要换成自己的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>snake</title>
<script src="./jquery-1.7.2.min.js"></script>
<style>
#map table{border-collapse: collapse;border:1px solid lightgray;}
#map table td{width:10px;height:10px;}
.snake{background:lightgreen;}
.food{background: pink;}
</style>
</head>
<body>
<div id="map"></div>
<button>开始</button>
</body>
<script>
var size = 50; //默认地图大小
var snake = []; //这个是我们的小蛇
var x=0,y=1;
var mask = true; //优化按键 用于判断
var timmer; //定时器
var speed = 50; //小蛇速度
var eatself = false; //判断是否吃了自己
var pos; //食物坐标
//相关事件
$(function(){
init(size);
draw();
food();
});
$("button").one('click',function(){
move();
});
//键盘事件
$(document).keydown(function(e){
switch(e.keyCode){
case 37:
if(y != 1 && mask){
//左
x = 0 , y = -1;
mask = false;
}
break;
case 38:
if(x != 1 && mask){
//上
x = -1 , y = 0;
mask = false;
}
break;
case 39:
if(y != -1 && mask){
//右
x = 0 , y = 1;
mask = false;
}
break;
case 40:
if(x != -1 && mask){
//下
x = 1 , y = 0;
mask = false;
}
break;
}
});
//画地图
function init(size){
var arr = [];
arr.push('<table>');
for(var i=0;i<size;i++){
arr.push('<tr>');
for(var j=0;j<size;j++){
arr.push('<td id="box_'+i+'_'+j+'"></td>');
}
arr.push('</tr>');
}
arr.push('</table>');
//将上面的数组拼接成字符串添加到地图区域
$("#map").html(arr.join(''));
//初始化小蛇
for(var k=0;k<3;k++){
snake[snake.length] = [3,k+3];
}
}
function draw(){
//清除掉所有的颜色
$("td").removeClass('snake');
//给小蛇上色
for(var i=0;i<snake.length;i++){
$("#box_"+snake[i][0]+"_"+snake[i][1]).addClass('snake');
}
}
//移动小蛇
function move(){
timmer = setInterval(function(){
//小蛇即将到达的位置
var row = snake[snake.length-1][0] + x;
var col = snake[snake.length-1][1] + y;
if(pos[0] == row && pos[1] == col){
//如果吃屎了，那么不弹出
$("#box_"+row+"_"+col).removeClass('food');
food();
}else{
//没有吃食物才弹出第一个
snake.shift();
}
//判断是否吃了自己 eatself = true
for(var i in snake){
if(snake[i][0] == row && snake[i][1] == col){
//吃了自己
eatself = true;
}
}
//判断小蛇是否还在地图里面
if(col < 0 || col >=size || row < 0 || row >=size || eatself){
alert('亲！你为啥想不开呢？');
clearInterval(timmer);
}else{
snake.push([row,col]);
draw();
mask = true;
}
},speed);
}
//随机产生食物
function food(){
var x = Math.floor(Math.random() * size);
var y = Math.floor(Math.random() * size);
//食物不能出现在蛇身上
for(var i in snake){
if(snake[i][0] == x && snake[i][1] == y){
var mask = true;
}
}
if(mask){
food();
}else{
pos = [x,y];
$("#box_"+x+"_"+y).addClass('food');
}
}
</script>
</html>