<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>贪吃蛇</title>
<style>
#map {
width: 400px;
height: 400px;
border: 1px solid black;
}
/*地图的样式*/
.divMap {
width: 18px;
height: 18px;
margin: 1px;
background-color: yellow;
float: left;
}
/*//蛇身的样式*/
.divSnake {
width: 18px;
height: 18px;
margin: 1px;
background-color: red;
float: left;
}
/*//食物的样式*/
.divFood {
width: 18px;
height: 18px;
margin: 1px;
background-color: green;
float: left;
}
</style>
<script>
var mapX = 20,
mapY = 20; //地图边界，横向和纵向的div小格数量
var arrMap = new Array(); //地图数组
var snakeX = [4, 5, 6],
snakeY = [2, 2, 2]; //蛇身
var foodX = 9,
foodY = 3; //食物
var keyCode = 39; //蛇身移动方向，默认向右
//创建地图
function createMap() {
var map = document.getElementById("map");
for(y = 0; y < mapY; y++) {
//第一层循环，y表示纵向轴
arrMap[y] = new Array();
for(x = 0; x < mapX; x++) {
//第二层循环，x表示横向轴
var div = document.createElement("div"); //div小格
div.className = "divMap"; //初始化样式
arrMap[y][x] = div; //将小格放入地图数组
map.appendChild(div); //页面绘制
}
}
}
//创建蛇身
function createSnake() {
var result; //判断是否需要重新生成食物
//改变地图中一串连续的div的底色
for(i = 0; i < snakeX.length; i++) {
arrMap[snakeY[i]][snakeX[i]].className = "divSnake";
}
}
//创建食物
function createFood() {
result = false;
do {
foodX = parseInt(Math.random() * mapX);
foodY = parseInt(Math.random() * mapY);
//判断食物不能出现在蛇身上
for(i = 0; i < snakeX.length; i++) {
if(snakeX[i] == foodX && snakeY[i] == foodY) {
result = true; //重叠了，需要从新生成一个食物
break;
}
}
} while (result);
arrMap[foodY][foodX].className = "divFood"
}
//清除蛇身
function claerSnake() {
for(i = 0; i < snakeX.length; i++) {
arrMap[snakeY[i]][snakeX[i]].className = "divMap";
}
}
//蛇身运动
function snakeMove() {
//清除蛇身
claerSnake();
for(i = 0; i < snakeX.length - 1; i++) {
snakeX[i] = snakeX[i + 1];
snakeY[i] = snakeY[i + 1];
}
// snakeX[snakeX.length - 1]++; //向右移动
//每次移动。舌头增加1格，keyCode匹配键盘方向键
switch(keyCode) {
case 37: //向右
snakeX[snakeX.length - 1]--;
break;
case 38: //向上
snakeY[snakeY.length - 1]--;
break;
case 39: //向右
snakeX[snakeX.length - 1]++;
break;
case 40: //向上
snakeY[snakeY.length - 1]++;
break;
}
//吃掉食物
if(snakeX[snakeX.length - 1] == foodX && snakeY[snakeY.length - 1] == foodY) {
//吃到食物
snakeX[snakeX.length] = snakeX[snakeX.length - 1];
snakeY[snakeY.length] = snakeY[snakeY.length - 1];
//重新排列
for(i = snakeX.length - 1; i > 0; i--) {
snakeX[i] = snakeX[i - 1];
snakeY[i] = snakeY[i - 1];
}
createFood(); //重新生成下一个食物
}
//超出游戏边框
if(snakeX[snakeX.length - 1] < 0 ||
snakeX[snakeX.length - 1] > mapX - 1 ||
snakeY[snakeY.length - 1] < 0 ||
snakeY[snakeY.length - 1] > mapY - 1) {
clearInterval(move); //停止移动
alert("游戏结束");
return;
}
createSnake(); //创建蛇身
}
function keyDown() {
var newKey = event.keyCode; //键盘按键
if(keyCode == 37 && newKey == 39 ||
keyCode == 39 && newKey == 37 ||
keyCode == 38 && newKey == 40 ||
keyCode == 40 && newKey == 38
) {
//禁止掉头
return;
} else if(newKey >= 37 && newKey <= 40) {
//用户按了某个方向键
keyCode = newKey;
} else {
//其他按键
}
}
//运行
window.onload = function() {
createMap(); //创建地图
createSnake(); //蛇身
createFood(); //创建食物
move = setInterval("snakeMove()", 200); //每个两百秒蛇身移动
document.onkeydown = keyDown; //捕获方向键
}
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
