贪吃蛇

leeqihero123 2016-04-01 12:03:29

<html>

<head>

<meta charset="utf-8"/>

</head>

<body>

<canvas id='画布' width='200' height='200' style="border:1px solid #c3c3c3;"></canvas>

</body>

<script>

var 画布 = document.getElementById('画布'),

	方块边长=10;

    绘画环境 = 画布.getContext('2d');

var 地图宽度=20;

var 地图高度=20;

var 空地数组=[];

var 上次按键编码=0;

var 蛇头当前位置=Math.random()*地图宽度*地图高度>>0;

var 蛇=[];

蛇.unshift(蛇头当前位置);

var 食物的位置=Math.random()*地图宽度*地图高度>>0;

var 蛇头纵坐标=蛇头当前位置/地图宽度>>0;

var 蛇头横坐标=蛇头当前位置%地图宽度;

function 走(方向编码)

{

	switch(方向编码){

        case 38: //上

            蛇头纵坐标--;

            break;

        case 40: //下

            蛇头纵坐标++;

            break;

        case 37: //左

            蛇头横坐标--;

            break;

        case 39: //右

            蛇头横坐标++;

            break;}

			if(蛇头横坐标>地图宽度 || 蛇头横坐标<0 || 蛇头纵坐标<0 || 蛇头纵坐标>地图高度)

		{

			alert("游戏结束");

			window.location.href=window.location.href;

		}

		上次按键编码=方向编码;

		绘画环境.fillStyle="white";

		绘画环境.fillRect(0,0,画布.width,画布.height);

		蛇头当前位置=蛇头横坐标+蛇头纵坐标*地图宽度;

		蛇.unshift(蛇头当前位置);

		if(蛇头当前位置==食物的位置)

		{

			食物的位置=空地数组[Math.random()*空地数组.length>>0];

		}

		else

		{

			蛇.pop();

		}

		空地数组=[];

		for(var i=0;i<地图宽度*地图高度;i++)

		{

			for(var j in 蛇)

			{

				if(i!=j)空地数组.push(i);

			}

		}

		显示蛇();

		显示食物();	

}

document.onkeydown = function(当前事件){

        var 当前事件 = window.event ? window.event : 当前事件;

		if(当前事件.keyCode+上次按键编码==78 || 当前事件.keyCode+上次按键编码==76) return 0;

        走(当前事件.keyCode);	

}

function 显示蛇()

{

	绘画环境.fillStyle="red";

	for(var j in 蛇)

		{

			var 蛇纵坐标=蛇[j]/地图宽度>>0;

			var 蛇横坐标=蛇[j]%地图宽度;

			绘画环境.fillRect(蛇横坐标*方块边长,蛇纵坐标*方块边长,方块边长,方块边长);

		}

}

function 显示食物()

{

	var 食物纵坐标=食物的位置/地图宽度>>0;

	var 食物横坐标=食物的位置%地图宽度;

	绘画环境.fillStyle="black";

	绘画环境.fillRect(食物横坐标*方块边长,食物纵坐标*方块边长,方块边长,方块边长);

}

setInterval("走(上次按键编码)",1000);

</script>

</html>