当前位置:博客首页>>javacript >> 阅读正文

js版贪吃蛇

作者: 郑晓 分类: javacript 发布于: 2016-10-27 19:00 浏览:6,332 评论(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=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()})()

运行截图:
javascript-snake

       

本文采用知识共享署名-非商业性使用 3.0 中国大陆许可协议进行许可,转载时请注明出处及相应链接。

本文永久链接: https://www.zh30.com/js-snake.html

js版贪吃蛇:目前有10 条留言

用户评论头像 嚼蜡发表于 2017年11月09日 20:51[回复]

有点意思,我刚好路过

用户评论头像 zhaib发表于 2017年11月06日 16:02[回复]

挺好的

用户评论头像 有见识的麻花发表于 2017年05月10日 22:40[回复]

厉害了!

用户评论头像 严谨的帅哥发表于 2016年12月17日 15:32[回复]

Nightsong.cc 晚歌的个人博客

用户评论头像 三五营销发表于 2016年12月15日 15:42[回复]

挺好的,祝你快乐

用户评论头像 fanniebaby发表于 2016年11月09日 22:41[回复]

这个不错。

用户评论头像 华夏九州套图发表于 2016年11月03日 14:51[回复]

我只是来随便看看!

    用户评论头像 殷勤的锅饼发表于 2016年11月12日 11:00[回复]

    第三方

用户评论头像 一生一世套图发表于 2016年11月02日 10:31[回复]

三天不来手痒痒!

用户评论头像 增达任务网发表于 2016年10月28日 14:03[回复]

相当不错,自愧不如!

发表评论

change vcode