以下技术文章为 博客园 记忆中的马肠河 原创，转载请标明原创作者及出处，以示尊重！！
作者：记忆中的马肠河
原文：http://www.cnblogs.com/zhangwei412827/archive/2013/03/25/2980180.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>贪吃蛇 作者:记忆中的马肠河</title>
<script type="text/javascript">
window.onload = function () {
var snake = {
//移动方向
fangxiang: "left",
//蛇身
snakeBody: [],
box: document.getElementById("snakeBox"),
//移动
move: function () {
var timer = "";
//判断是否GameOver
var isFailed = function () {
//判断蛇头是否碰到蛇身
var isHeadRunIntoBody=function(){
var t=false;
for(var i=0;i<snake.snakeBody.length-1;i++){
if(snake.snakeBody[snake.snakeBody.length-1].x==snake.snakeBody[i].x&&
snake.snakeBody[snake.snakeBody.length-1].y==snake.snakeBody[i].y
){
t=true;
break;
}
}
return t;
}
//判断条件：是否蛇身碰到蛇头、是否蛇头碰到墙壁
if (
isHeadRunIntoBody()||
snake.snakeBody[snake.snakeBody.length - 1].x > snake.box.offsetLeft + parseInt(snake.box.style.borderWidth) + snake.box.clientWidth - 10
|| snake.snakeBody[snake.snakeBody.length - 1].x < snake.box.offsetLeft + parseInt(snake.box.style.borderWidth)
|| snake.snakeBody[snake.snakeBody.length - 1].y < snake.box.offsetTop + parseInt(snake.box.style.borderWidth)
|| snake.snakeBody[snake.snakeBody.length - 1].y > snake.box.offsetTop + parseInt(snake.box.style.borderWidth) + snake.box.clientWidth - 10
) {
//清除定时器
clearTimeout(timer);
alert("Game over!");
return false;
}
}
//存放蛇头
var snakeHead = snake.snakeBody[snake.snakeBody.length - 1];
//去除蛇尾
var sheWei = snake.snakeBody.shift();
switch (snake.fangxiang) {
case "up":
sheWei.x = snakeHead.x;
sheWei.y = snakeHead.y - 10;
break;
case "down":
sheWei.x = snakeHead.x;
sheWei.y = snakeHead.y + 10;
break;
case "left":
sheWei.x = snakeHead.x - 10;
sheWei.y = snakeHead.y;
break;
case "right":
sheWei.x = snakeHead.x + 10;
sheWei.y = snakeHead.y;
break;
default:
break;
}
//把蛇尾放到蛇头
snake.snakeBody.push(sheWei);
//每次移动蛇身，都去吃食物.
snake.eatFood();
//是否失败
var ISF = isFailed();
//如果失败，不再绘制；
if (!ISF && ISF != undefined) {
return;
} else {
snake.drawSnake();
}
//蛇身移动的定时器
timer = setTimeout(snake.move, 500);
},
drawSnake: function () {
//清空已绘制的蛇身
var bc = snake.box.childNodes;
for (var i = 0, len = bc.length; i < len; i++) {
var tn = bc[i];
if (tn) {
var tng = tn.tagName;
if (tng) {
var id = bc[i].getAttribute("id")
if (tng.toLowerCase() == "div" && id != "foodDiv") {
snake.box.removeChild(bc[i]);
//没删除一个节点索引退一步
i-=1;
}
}
}
}
//判断是否是第一次加载蛇身，如果是，则添加蛇头
if (snake.snakeBody.length == 0) {
var a = {};
do{
a.x = Math.floor(19 * Math.random()) * 10 + snake.box.offsetLeft + parseInt(snake.box.style.borderWidth);
a.y = Math.floor(19 * Math.random()) * 10 + snake.box.offsetTop + parseInt(snake.box.style.borderWidth);
}while((function(){
//第一次添加蛇头的时候不能让蛇头挨着边框
if(a.x==snake.box.offsetLeft + parseInt(snake.box.style.borderWidth)
||a.x+10==snake.box.offsetLeft + parseInt(snake.box.style.borderWidth)+snake.box.clientWidth
||a.y==snake.box.offsetTop+parseInt(snake.box.style.borderWidth)
||a.y+10==snake.box.offsetTop+parseInt(snake.box.style.borderWidth)+snake.box.clientHeight
){
return true;
}else{
return false;
}
})());
snake.snakeBody.push(a);
}
//遍历存放蛇的数组并绘制在页面上
for (var b in snake.snakeBody) {
var d = document.createElement("div");
d.style.backgroundColor = 'red'; d.style.border = "0px solid green"; d.style.position = 'absolute'; d.style.zIndex = '1';
d.style.width = '10px'; d.style.height = '10px';
d.style.left = snake.snakeBody[b].x + "px"; d.style.top = snake.snakeBody[b].y + "px";
snake.box.appendChild(d);
}
return snake;
},
eatFood: function () {
var foodObj = food.getFood();
//判断蛇头是否与食物重合，如果是，则把食物作为蛇头
if (
snake.snakeBody[snake.snakeBody.length - 1].x == foodObj.offsetLeft
&& snake.snakeBody[snake.snakeBody.length - 1].y == foodObj.offsetTop
) {
var o = {};
switch (snake.fangxiang) {
case "left":
o.x = snake.snakeBody[snake.snakeBody.length - 1].x - 10;
o.y = snake.snakeBody[snake.snakeBody.length - 1].y;
break;
case "right":
o.x = snake.snakeBody[snake.snakeBody.length - 1].x + 10;
o.y = snake.snakeBody[snake.snakeBody.length - 1].y;
break;
case "up":
o.x = snake.snakeBody[snake.snakeBody.length - 1].x;
o.y = snake.snakeBody[snake.snakeBody.length - 1].y - 10;
break;
case "down":
o.x = snake.snakeBody[snake.snakeBody.length - 1].x;
o.y = snake.snakeBody[snake.snakeBody.length - 1].y + 10;
break;
default:
break;
}
//把原来的食物删除
snake.box.removeChild(foodObj);
//把吃到的食物加到蛇头
snake.snakeBody.push(o);
//重新绘制食物
food.foodMake();
}
}
}
var food = {
//生成食物
foodMake: function () {
//定义食物出现的位置
var x, y;
do {
x = Math.floor(19 * Math.random()) * 10 + snake.box.offsetLeft + parseInt(snake.box.style.borderWidth);
y = Math.floor(19 * Math.random()) * 10 + snake.box.offsetTop + parseInt(snake.box.style.borderWidth);
} while ((function () {
//蛇身是否在该位置，如果蛇身和食物重合则重新生成食物
var t = false;
for (var o in snake.snakeBody) {
t = snake.snakeBody[o].x == x && snake.snakeBody[o].y == y
if (t) {
break;
}
}
return t;
})());
var d = document.createElement("div");
d.style.backgroundColor = 'red'; d.style.border = "0px solid green"; d.style.position = 'absolute'; d.style.zIndex = '1';
d.style.width = '10px'; d.style.height = '10px'; d.setAttribute("id", "foodDiv"); //设置食物的ID用于区别蛇身
d.style.top = x + "px"; d.style.left = y + "px";
return snake.box.appendChild(d); //返回新生成的食物
},
//得到食物
getFood: function () {
return document.getElementById("foodDiv");
}
}
//先绘制食物
food.foodMake();
//绘制并移动蛇身
snake.drawSnake().move();
//控制方向键
document.onkeydown = function (event) {
var e = event || window.event;
switch (e.keyCode) {
case 37:
if (snake.fangxiang != "right") {
snake.fangxiang = "left";
}
break;
case 38:
if (snake.fangxiang != "down") {
snake.fangxiang = "up";
}
break;
case 39:
if (snake.fangxiang != "left") {
snake.fangxiang = "right";
}
break;
case 40:
if (snake.fangxiang != "up") {
snake.fangxiang = "down";
}
default:
break;
}
}
}
</script>
</head>
<body style='text-align: center'>
<div id='snakeBox' style='border: 1px solid black; width: 200px; height: 200px'>
</div>
</body>
</html>
相关推荐
JS版贪食蛇jquery。JS版贪食蛇jquery。JS版贪食蛇jquery。JS版贪食蛇jquery。
一小段javascript编写的贪食蛇代码
网页简单实现贪食蛇 纯html+js实现的贪食蛇
用html与JavaScript 开发贪食蛇，主要是JS
这是一款简单的贪食蛇游戏
这是用jQuery写的贪食蛇，动态加载地图
使用JavaScript实现一个网页版贪食蛇小游戏
该资源是一个用Html5画布制作的贪食蛇小游戏，其中包含了一个Javascript文件和一个html文件。下载解压后可直接运行html文件
javascript制作贪食蛇游戏，手工书写代码，一目了然，易于阅读和学习理解，采用HbuilderX编辑，文件为HTML。
纯js的贪食蛇游戏，并可以保存游戏分数。
html5魅族首页贪食蛇游戏特效是一款创意风格的魅族发布会贪食蛇游戏源码下载。
用JS编写的贪食蛇游戏 代码分享.zip 用JS编写的贪食蛇游戏 代码分享.zip 用JS编写的贪食蛇游戏 代码分享.zip
HTML5 canvas简洁版贪食蛇小游戏，界面简单。
javascript写的贪食蛇的代码，可以用。。。。。。。。。。。。
.贪食蛇 儿时的回忆..
1、静态网页制作贪食蛇。 2、使用JavaScript、HMTL等技术。 3、界面简单无美化，功能强大。
贪食蛇 贪吃蛇 基础 很有意思
JS编写的贪食蛇程序，是学习JS很不错的材料，和大家分享下~~
该游戏是通过原生js和jquery来实现的，贪食蛇和背景是table标签来实现的，食物为背景图片，蛇头随方向改变而改变；无需下载依赖，下载解压即可运行。 能学到什么： jquery的一些方法以及原生js的部分基础使用等。 ...