js贪食蛇--2

以前做过一个简单的贪食蛇，这个相对与以前的改进了下，加入了超级食物及区分了蛇头、蛇身、蛇尾，设计思想基本一样

试玩http://snailanger.free3v.net/snake.html

js

var sx = 12;//定义蛇的位置
var sy = 13;
var fx;//定义食物位置
var fy;
var map;//全局二维数组
var canvas;//游戏画布
var canvasdiv;//画布对象
var food;//食物对象
var manyFoods;//所有食物数组
var tempfood;//临时食物对象
var snake;//蛇对象
var tempsnake;//临时蛇对象
var snakeBody;//蛇身体数组
var step_x = 1;//移动参数
var step_y = 0;
var run;//Interval对象
var score = 0;//分数
var eatcount = 0;//所吃食物数
var speed = 150;//速度
//游戏画布
canvas = {
	createCanvas:function(){
        canvasdiv = document.createElement("div");  
        canvasdiv.className = "canvas";  
        document.documentElement.appendChild(canvasdiv); 
        return true;
   }
};
//蛇
snake = {
	createSnakeBody:function(flag){ //创建一个蛇
		var snakes = document.createElement("div");
		switch(flag){
			case 0: snakes.className = "snaketag"; break; //蛇头
			case 1: snakes.className = "snakebody"; break; //蛇身
			case 2: snakes.className = "snakehead"; break; //蛇尾
			default:snakes.className = "snakehead";
		}
		snakes.style.left = sx * 15 + 1 + "px";
		snakes.style.top = sy * 15 + 1 + "px";
		snakes.setAttribute("current_x",sy);
		snakes.setAttribute("current_y",sx);
		return snakes;
	},
	setSnakeBody:function(){ //设置蛇的各部位
		snakeBody[0].className = "snaketag";
		for(var i=1;i<snakeBody.length-1;i++){
			snakeBody[i].className = "snakebody";
		}
	}
};
//食物
food = {
	createFood:function(flag,tscore,classname){ //创建一个食物，flag：食物类型，tscore：食物分数，classname：食物样式
		this.createFoodLocation();
		var foods = document.createElement("span");
		foods.className = classname;
		foods.setAttribute("score",tscore); 
		foods.setAttribute("foodtype",flag);
		foods.setAttribute("fx",fx);
		foods.setAttribute("fy",fy);
		foods.style.left = fx * 15 + 1 + "px";
		foods.style.top = fy * 15 + 1+ "px";
		return foods;
	},
	createFoodLocation:function(){ //生成食物位置
		fx = parseInt(Math.random()*29);
		fy = parseInt(Math.random()*29);
		if(!map[fy][fx]==0){ //如果该位置为蛇或食物，则重新生成
			this.createFoodLocation();
		}
	}
};
//蛇前进
function forward(){
	sx += step_x; //获得前方位置坐标
	sy += step_y;
	if(sx>29 || sx<0 || sy>29 || sy<0){ //是否碰到边框，如是，游戏结束
		gameOver();
	}
	var nextPosition = map[sy][sx]; //前方位置在地图中的标记
	switch(nextPosition){
        case 0: //为空
            go(); //前进一步
            break;
        case 1: //蛇身体
            gameOver(); //游戏结束
            break;
        case 2: //食物1
            eat(nextPosition); //吃掉
            break;
        case 3: //食物2
            eat(nextPosition); //吃掉
            break;
	}
}
//蛇前进一步
function go(){
	var temp_x = snakeBody[0].getAttribute("current_x");//获取蛇尾巴在地图中坐标
	var temp_y = snakeBody[0].getAttribute("current_y");
	map[temp_x][temp_y] = 0; //将尾巴子地图中位置置空
	canvasdiv.removeChild(snakeBody[0]); //将尾巴从地图中删除
	snakeBody.shift(); //将尾巴从蛇身删除
	createSnake(); //在前方生成一节蛇，同时将最后一节作为新的尾巴
}
//吃食物
function eat(flag){
	var temp_food;
	if(flag==2){ //食物1
		if(temp_food=removeFood(0)){ //删除食物，并返回所删食物对象
			createFood(0,100,"food",2); //生成新的食物1
			score += temp_food.getAttribute("score")*1; //计算该食物分数 
		}
	}else if(flag==3){ //食物2
		if(temp_food=removeFood(1)){ //删除食物，并返回所删食物对象
			score += temp_food.getAttribute("score")*1; //计算该食物分数 
		}
	}
	createSnake(); //在当前食物位置生成一节蛇
	++eatcount; //所吃食物数增加
	if(eatcount%3==0){ //每吃掉3个食物,速度加7
		speed -= 7;
		begin(); //以新的速度运动
	}
	document.getElementById("count").innerHTML = score;
}
//生成一节蛇
function createSnake(flag){
	 tempsnake = snake.createSnakeBody(flag); //生成一个蛇元素
	 snakeBody.push(tempsnake); //添加到蛇身数组中
	 snake.setSnakeBody(); //修改蛇身，蛇尾，蛇头
	 canvasdiv.appendChild(tempsnake);//添加到画布中
	 map[sy][sx] = 1; //地图中该位置置1.表示是蛇
}
//生成一个食物
function createFood(type,scores,cname,val){
	 tempfood = food.createFood(type,scores,cname); //生成一个食物元素
	 canvasdiv.appendChild(tempfood); //添加到画布中
	 manyFoods.push(tempfood); //添加到食物数组中
	 map[fy][fx] = val; //地图中该为置置成相应标记
	 if (parseInt(Math.random() * 4) == 1 && manyFoods.length == 1) { //是否生成特殊食物
		if (manyFoods.length == 1) {
			createFood(1, 500, "superfood", 3); //生成特殊食物
		    setTimeout("removeFood(1)",3500); //特殊食物在指定时间后消失
		}
	}
}
//删除食物
function removeFood(flag,type){
	for(var i=0;i<manyFoods.length;i++){
		if(manyFoods[i].getAttribute("foodtype")==flag){ //如果数组中取出的食物与所删食物类型相同，则删除
			tempfood = manyFoods[i]; //保存所删的食物
			canvasdiv.removeChild(manyFoods[i]); //从画布中移除
			manyFoods.splice(i,1); //从食物数组中删掉
			return tempfood; //返回删掉的食物元素
		}
	}
	return null;
}
//游戏结束
function gameOver(){
    if (confirm('Game Over,是否重新开始？')) {  
        reStart();  
    }  
}
//键盘事件
function keyDown(e){
	 var keycode;
         if(e){
             keycode = e.keyCode;
         }else{
             keycode = window.event.keyCode;
         }
	switch(keycode){
		case 37: //左
		    changeDirect(-1,0);
		    break;
		case 38: //上
		    changeDirect(0,-1);
		    break;
		case 39: //右
		    changeDirect(1,0);
		    break;
		case 40: //下
		    changeDirect(0,1);
		    break;
		case 83: //s暂停
		    stop();
		    break;
	}
}
//设置运动方向
function changeDirect(fix_x,fix_y){
	isstop = true; //启用暂停标记
	if(!(fix_x+step_x==0 || fix_y+step_y==0)){ //判断是否是相反方向
	    step_x = fix_x; //设置运动参数
	    step_y = fix_y;
	}
	begin(); //以新的方向运动
}
//游戏初始化
function init(){
	map = new Array(); //初始化地图数组
	for(var i=0;i<30;i++){
		map.push(new Array());
		for(var j=0;j<30;j++){
			map[i].push(0);
		}
	}
	snakeBody = new Array();
	manyFoods = new Array();
	for(var i=12;i<15;i++){ //生成蛇
		sx = i;
        createSnake(i-12);
	}
	createFood(0,100,"food",2); //生成食物
}
//开始运动
function begin(){
	if(run != null){ //如果当前正在运动，则清掉
		window.clearInterval(run);
	}
        run = window.setInterval('forward()', speed);
}
//暂停
function stop(){
	window.clearInterval(run);
}
//重新开始
function reStart(){
	window.clearInterval(run);
	location.reload(true);
}
document.onkeydown = keyDown; //绑定事件
if(canvas.createCanvas()){ //运行游戏
	init();
}

css

body {  
    font-size: 14px;  
}  
.info_div{  
    margin: 100px;  
    float: right;  
}  
.info_div span{  
    margin: 10px;  
    display: block;  
}  
.count{
	font-size:33px
}
.canvas{  
    width: 450px;  
    height: 450px;  
    position: absolute;
    left:50%;
    margin-left:-220px;
    border:1px solid gray
}  
table{  
    width: 450px;  
    height: 450px;  
    border-collapse:collapse;  
    overflow: hidden;  
}  
table,tr,td{  
    border: 1px solid gray;  
}  
.snakebody{  
    background-color: red;  
}  
.snakehead{
	background-color: blue;  
}
.snaketag{
	background-color: gray; 
}
.snakebody,.snakehead,.snaketag{
	width: 13px;  
    height: 13px;  
    position: absolute;  
}
.food{  
    background-color: green;  
    width: 11px;  
    height: 11px;  
    position: absolute;  
}
.superfood{  
    background-color: black;  
    width: 11px;  
    height: 11px;  
    position: absolute;  
}

html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">

		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<title>snake</title>
		<meta name="description" content="">
		<meta name="author" content="Thinkpad">
        <link rel="stylesheet" type="text/css" href="snake.css" />
		<script type="text/javascript" src="snake.js"></script>
	</head>

	<body>
		<div class="info_div">  
            <span>按上、下、左、右控制蛇移动</span>  
            <span>按S键暂停游戏，按方向键继续</span>  
            <span>得分：<span class="count" id="count">0</span> </span> 
        </div>
	</body>
</html>