<!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>
