js版贪吃蛇
作者: 郑晓 分类: javacript 发布于: 2016-10-27 19:00 浏览:5,978 评论(10)
参考网上某代码写的js版贪吃蛇,贪吃蛇整个过程分为三部分,地图的生成、食物的随机显示,蛇的显示和移动。运行时按键盘上下左右进行方向控制,蛇头撞到边界或自己时游戏结束。目前已知的问题为:生成食物时未排除生成到蛇身上的可能。
(function() {
var t = null;
var map = null;
var food={x:0,y:0,div:null};
var snake={
//初始化时的蛇身部分
snakeBody : [[1,2,null], [2,2,null], [3,2,null], [4,2,null]],
direct : "right"
};
var config = {
width:200,
height:200,
px:10, //单位块大小
mapColor:"#dddddd",
foodColor:"#555555",
snakeColor:"#666666",
position:'absolute',
speed:100
};
var showMap = function() {
var div = document.createElement("div");
div.style.width = config.width + "px";
div.style.height= config.height + "px";
div.style.backgroundColor = config.mapColor;
div.style.position = config.position;
document.getElementsByTagName("body")[0].appendChild(div);
map = div;
};
var showFood = function() {
var x = Math.floor(Math.random()*config.width/config.px);
var y = Math.floor(Math.random()*config.height/config.px);
food.x = x;
food.y = y;
if(food.div == null) {
var div = document.createElement("div");
div.style.width = config.px + "px";
div.style.height= config.px + "px";
div.style.backgroundColor = config.foodColor;
div.style.position = config.position;
div.style.left = x * config.px + "px";
div.style.top = y * config.px + "px";
map.appendChild(div);
food.div = div;
} else {
food.div.style.left = x * config.px + "px";
food.div.style.top = y * config.px + "px";
}
};
var showSnake = function() {
for(var i=0;i<snake.snakeBody.length; i++) {
if(snake.snakeBody[i][2] == null) {
var div = document.createElement("div");
div.style.width = config.px + "px";
div.style.height= config.px + "px";
div.style.backgroundColor = config.snakeColor;
div.style.position = config.position;
div.style.left = snake.snakeBody[i][0] * config.px + "px";
div.style.top = snake.snakeBody[i][1] * config.px + "px";
snake.snakeBody[i][2] = div;
map.appendChild(div);
} else {
snake.snakeBody[i][2].style.left = snake.snakeBody[i][0] * config.px + "px";
snake.snakeBody[i][2].style.top = snake.snakeBody[i][1] * config.px + "px";
}
}
};
var moveSnake = function() {
var snakeLength = snake.snakeBody.length;
for(var i=0; i<snakeLength-1; i++) {
snake.snakeBody[i][0] = snake.snakeBody[i+1][0];
snake.snakeBody[i][1] = snake.snakeBody[i+1][1];
}
//头部向前移动一步(区分方向)
if(snake.direct == "right") {
snake.snakeBody[snakeLength - 1][0] += 1;
} else if(snake.direct == "left") {
snake.snakeBody[snakeLength - 1][0] -= 1;
} else if(snake.direct == "up") {
snake.snakeBody[snakeLength - 1][1] -= 1;
} else if(snake.direct == "down") {
snake.snakeBody[snakeLength - 1][1] += 1;
}
for(var i=0; i<snakeLength-1; i++) {
if(snake.snakeBody[i][0] == snake.snakeBody[snakeLength - 1][0] && snake.snakeBody[i][1] == snake.snakeBody[snakeLength - 1][1]) {
alert("game over");
clearInterval(t);
return;
}
}
//吃到食物
if(snake.snakeBody[snakeLength - 1][0] == food.x && snake.snakeBody[snakeLength - 1][1] == food.y) {
//蛇长加1
snake.snakeBody.push([food.x, food.y, null])
//刷新食物
showFood();
}
if(snake.snakeBody[snakeLength-1][0]>=config.width/config.px || snake.snakeBody[snakeLength-1][0]<0 ||
snake.snakeBody[snakeLength-1][1]>=config.height/config.px || snake.snakeBody[snakeLength-1][1] <0) {
alert("game over");
clearInterval(t);
return;
}
showSnake();
};
var startGame = function() {
showMap();
showFood();
showSnake();
t = setInterval(function(){moveSnake()}, config.speed);
window.onkeydown = function() {
if(37 == event.keyCode) {
snake.direct = "left";
} else if(38 == event.keyCode) {
snake.direct = "up";
} else if(39 == event.keyCode) {
snake.direct = "right";
} else if(40 == event.keyCode) {
snake.direct = "down";
}
}
};
startGame()
})()
var t = null;
var map = null;
var food={x:0,y:0,div:null};
var snake={
//初始化时的蛇身部分
snakeBody : [[1,2,null], [2,2,null], [3,2,null], [4,2,null]],
direct : "right"
};
var config = {
width:200,
height:200,
px:10, //单位块大小
mapColor:"#dddddd",
foodColor:"#555555",
snakeColor:"#666666",
position:'absolute',
speed:100
};
var showMap = function() {
var div = document.createElement("div");
div.style.width = config.width + "px";
div.style.height= config.height + "px";
div.style.backgroundColor = config.mapColor;
div.style.position = config.position;
document.getElementsByTagName("body")[0].appendChild(div);
map = div;
};
var showFood = function() {
var x = Math.floor(Math.random()*config.width/config.px);
var y = Math.floor(Math.random()*config.height/config.px);
food.x = x;
food.y = y;
if(food.div == null) {
var div = document.createElement("div");
div.style.width = config.px + "px";
div.style.height= config.px + "px";
div.style.backgroundColor = config.foodColor;
div.style.position = config.position;
div.style.left = x * config.px + "px";
div.style.top = y * config.px + "px";
map.appendChild(div);
food.div = div;
} else {
food.div.style.left = x * config.px + "px";
food.div.style.top = y * config.px + "px";
}
};
var showSnake = function() {
for(var i=0;i<snake.snakeBody.length; i++) {
if(snake.snakeBody[i][2] == null) {
var div = document.createElement("div");
div.style.width = config.px + "px";
div.style.height= config.px + "px";
div.style.backgroundColor = config.snakeColor;
div.style.position = config.position;
div.style.left = snake.snakeBody[i][0] * config.px + "px";
div.style.top = snake.snakeBody[i][1] * config.px + "px";
snake.snakeBody[i][2] = div;
map.appendChild(div);
} else {
snake.snakeBody[i][2].style.left = snake.snakeBody[i][0] * config.px + "px";
snake.snakeBody[i][2].style.top = snake.snakeBody[i][1] * config.px + "px";
}
}
};
var moveSnake = function() {
var snakeLength = snake.snakeBody.length;
for(var i=0; i<snakeLength-1; i++) {
snake.snakeBody[i][0] = snake.snakeBody[i+1][0];
snake.snakeBody[i][1] = snake.snakeBody[i+1][1];
}
//头部向前移动一步(区分方向)
if(snake.direct == "right") {
snake.snakeBody[snakeLength - 1][0] += 1;
} else if(snake.direct == "left") {
snake.snakeBody[snakeLength - 1][0] -= 1;
} else if(snake.direct == "up") {
snake.snakeBody[snakeLength - 1][1] -= 1;
} else if(snake.direct == "down") {
snake.snakeBody[snakeLength - 1][1] += 1;
}
for(var i=0; i<snakeLength-1; i++) {
if(snake.snakeBody[i][0] == snake.snakeBody[snakeLength - 1][0] && snake.snakeBody[i][1] == snake.snakeBody[snakeLength - 1][1]) {
alert("game over");
clearInterval(t);
return;
}
}
//吃到食物
if(snake.snakeBody[snakeLength - 1][0] == food.x && snake.snakeBody[snakeLength - 1][1] == food.y) {
//蛇长加1
snake.snakeBody.push([food.x, food.y, null])
//刷新食物
showFood();
}
if(snake.snakeBody[snakeLength-1][0]>=config.width/config.px || snake.snakeBody[snakeLength-1][0]<0 ||
snake.snakeBody[snakeLength-1][1]>=config.height/config.px || snake.snakeBody[snakeLength-1][1] <0) {
alert("game over");
clearInterval(t);
return;
}
showSnake();
};
var startGame = function() {
showMap();
showFood();
showSnake();
t = setInterval(function(){moveSnake()}, config.speed);
window.onkeydown = function() {
if(37 == event.keyCode) {
snake.direct = "left";
} else if(38 == event.keyCode) {
snake.direct = "up";
} else if(39 == event.keyCode) {
snake.direct = "right";
} else if(40 == event.keyCode) {
snake.direct = "down";
}
}
};
startGame()
})()
运行截图:
本文采用知识共享署名-非商业性使用 3.0 中国大陆许可协议进行许可,转载时请注明出处及相应链接。
本文永久链接: https://www.zh30.com/js-snake.html
js版贪吃蛇:目前有10 条留言
有点意思,我刚好路过
挺好的
厉害了!
Nightsong.cc 晚歌的个人博客
挺好的,祝你快乐
这个不错。
我只是来随便看看!
第三方
三天不来手痒痒!
相当不错,自愧不如!