前言
贪吃蛇是个很简单的小游戏，但是却很有趣，下面是我用JavaScript写的一个贪吃蛇的代码：
代码如下：
<html xmlns="http://www.w3.org/1999/xhtml">标签：body,function,javascript,var,贪吃蛇,snake,way,之四,newDiv From： https://blog.51cto.com/u_15906220/5920655
<head runat="server">
<title>无标题页</title>
<script type="text/javascript">
function //创建单元格
var newDiv = document.createElement("div");
newDiv.style.position = "absolute";
newDiv.style.width = cellWidth + "px";
newDiv.style.height = cellWidth + "px";
newDiv.style.background = "#999933";
newDiv.style.border = "solid 1px #666633";
newDiv.style.top = 100 + cellWidth*y + "px";
newDiv.style.left = document.body.clientWidth/2 - boardWidth/2*cellWidth + x*cellWidth + "px";
document.getElementById("content").appendChild(newDiv);
return newDiv;
}
function //随机产生食物
var foodX = Math.round(Math.random()*(boardWidth-1));
var foodY = Math.round(Math.random()*(boardWidth-1));
for(var i=0; i<snake.body.length; i++){
if(snake.body[i].x==foodX && snake.body[i].y==foodY){
productFood();
return;
}
}
board[foodX][foodY].style.background = "#333300";
board[foodX][foodY].isFood = true;
}
function //移动——计算下一步的显示区域
var newX, newY;
newX = newY = 0;
switch(snake.way){
case "right" : newX = snake.body[0].x < boardWidth-1 ? snake.body[0].x+1 : 0;
newY = snake.body[0].y;
setStyle();
break;
case "left" : newX = snake.body[0].x > 0 ? snake.body[0].x-1 : boardWidth-1;
newY = snake.body[0].y;
setStyle();
break;
case "up" : newX = snake.body[0].x;
newY = snake.body[0].y > 0 ? snake.body[0].y-1 : boardWidth-1;
setStyle();
break;
case "down" : newX = snake.body[0].x;
newY = snake.body[0].y < boardWidth-1 ? snake.body[0].y+1 : 0;
setStyle();
break;
}
function //闭包
for(var i=0; i<snake.body.length; i++){
if(snake.body[i].x==newX && snake.body[i].y==newY){
clearInterval(loop);
alert("游戏结束，你吃掉了自己的身体");
return;
}
}
snake.body.splice(0,0,{x:newX, y:newY});
board[newX][newY].style.background = "#333300";
if(board[newX][newY].isFood){
board[newX][newY].isFood = false;
productFood();
}
else{
var cell = snake.body.pop();
board[cell.x][cell.y].style.background = "#999933";
}
}
}
function //更改区域设置
document.body.focus();
board = null;
boardWidth = val;
snake.body = [{x:0, y:0}];
snake.way = "left";
clearInterval(loop);
main();
}
function //更改速度设置
document.body.focus();
board = null;
snake.moveSpeed = val;
snake.body = [{x:0, y:0}];
snake.way = "left";
clearInterval(loop);
main();
}
var //单元格宽度高度
var //区域宽度高度
var //区域
var //蛇
body:[{x:0, y:0}],
way:"left",
moveSpeed:500
};
var //循环
function main(){
//清空body
if(document.getElementById("content")){
document.getElementById("content").innerHTML = "";
}
else{
var newDiv = document.createElement("div");
newDiv.id = "content";
document.body.appendChild(newDiv);
}
//画盘
board = new Array(boardWidth);
for(var x=0; x<boardWidth; x++){
board[x] = new Array(boardWidth);
for(var y=0; y<boardWidth; y++){
(function(){
var _x = x;
var _y = y;
setTimeout(function(){
board[_x][_y] = createCell(_x, _y);
}, _x*69);
})();
}
}
//捕获方向键
document.body.onkeydown = function(){
var oldWay = snake.way;
switch(event.keyCode){
case 38 : snake.way = (snake.way=="left" || snake.way=="right") ? "up" : snake.way; break;
case 40 : snake.way = (snake.way=="left" || snake.way=="right") ? "down" : snake.way; break;
case 37 : snake.way = (snake.way=="up" || snake.way=="down") ? "left" : snake.way; break;
case 39 : snake.way = (snake.way=="up" || snake.way=="down") ? "right" : snake.way; break;
}
if(oldWay != snake.way) move();
}
//延迟开始，等待加载
setTimeout(function(){
productFood();
loop = setInterval(function(){
move();
}, snake.moveSpeed);
}, boardWidth*100);
}
window.onload = main;
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="select">
20*20：<input id="Radio1" name="boardOnly" onclick="changeBoard(20)" checked="checked" type="radio" /><br />
30*30：<input id="Radio2" name="boardOnly" onclick="changeBoard(30)" type="radio" /><br />
<br /><br />
拖拉机司机：<input id="Radio4" name="speedOnly" onclick="changeSpeed(300)" checked="checked" type="radio" /><br />
汽车司机：<input id="Radio5" name="speedOnly" onclick="changeSpeed(200)" type="radio" /><br />
火车司机：<input id="Radio6" name="speedOnly" onclick="changeSpeed(100)" type="radio" /><br />
飞机司机：<input id="Radio7" name="speedOnly" onclick="changeSpeed(30)" type="radio" /><br />
飞船司机：<input id="Radio8" name="speedOnly" onclick="changeSpeed(10)" type="radio" /><br />
</div>
</form>
</body>
</html>