以下技术文章为 博客园 记忆中的马肠河 原创，转载请标明原创作者及出处，以示尊重！！
作者：记忆中的马肠河
原文：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版贪食蛇**是一种基于JavaScript编程语言和jQuery库实现的经典游戏——贪食蛇。在网页环境中，这种实现方式让玩家可以在浏览器上直接玩到这个熟悉的小游戏。以下将详细解析JS版贪食蛇的实现原理和相关知识点。 ...
一小段javascript编写的贪食蛇代码
网页简单实现贪食蛇 纯html+js实现的贪食蛇
在贪食蛇游戏中，JavaScript的主要工作包括： 1. **初始化游戏状态**：设置蛇的位置、食物的位置、游戏速度等。 2. **处理用户输入**：监听键盘事件，根据用户输入改变蛇的方向。 3. **游戏逻辑**：计算蛇的移动，...
本文将深入解析一个基于JavaScript实现的贪食蛇游戏，通过分析压缩包中的四个文件——my.css、说明.htm、my.html和my.js，我们将了解其背后的关键技术和编程思想。 首先，my.html是游戏的主页面，它定义了游戏界面...
【贪食蛇.zip】是一个包含了使用Html5、Canvas和JavaScript技术开发的经典小游戏——贪食蛇的源代码包。这个小游戏的实现充分利用了现代Web技术，让玩家在浏览器环境中即可体验到传统的游戏乐趣。 首先，我们要了解...
在这个项目中，我们将探讨如何使用HTML、CSS以及JavaScript这三个核心的Web技术来实现一个跨平台的贪食蛇游戏。 首先，我们需要理解HTML（HyperText Markup Language）的作用。HTML是网页的基础结构，用于定义页面...
这是用jQuery写的贪食蛇，动态加载地图
在本项目中，我们主要探讨如何使用JavaScript语言来制作一款经典的贪食蛇游戏。JavaScript是一种广泛应用于网页开发的脚本语言，它允许开发者在浏览器端动态地修改网页内容，实现丰富的交互效果。在这个项目中，我们...
本项目以"简单创意的html5贪食蛇小游戏代码"为主题，将介绍如何使用HTML5、CSS3和JavaScript来构建一个在线版本的贪食蛇游戏。 首先，我们需要理解HTML5中的Canvas元素。Canvas是HTML5中用于绘制图形的一个二维绘图...
《使用JavaScript实现贪食蛇游戏》 贪食蛇游戏，作为一个经典的计算机程序，深受程序员和游戏爱好者的喜爱。它的核心机制简单，但实现起来却能涵盖不少编程基础和技巧。在JavaScript这一流行的Web开发语言中，我们...
纯js的贪食蛇游戏，并可以保存游戏分数。
JavaScript（简称JS）是一种广泛用于网页和网络应用的编程语言，尤其在前端...通过分析和实现这个JS编写的贪食蛇程序，开发者不仅可以提升JavaScript编程技能，还能锻炼逻辑思维能力，为后续更复杂的项目打下坚实基础。
在本项目中，我们将探讨如何使用JavaScript来实现一个经典的网页版贪食蛇小游戏。JavaScript是一种广泛应用于网页开发的脚本语言，它允许我们为网页添加交互性和动态效果。在这个项目中，我们将主要关注以下几个关键...
总结来说，"html5魅族首页贪食蛇游戏特效"是一个结合了HTML5 Canvas、JavaScript和CSS3的实例，展示了如何使用这些技术创建一个互动性强、视觉效果好的网页游戏。开发者可以从中学到HTML5的核心特性和实际应用，对于...
在现代网页技术日益发达的今天，使用JavaScript（JS）编写贪食蛇游戏，不仅可以锻炼编程技能，还能让我们更好地理解前端开发中的事件处理、DOM操作以及动画原理。下面，我们将详细探讨如何利用JS实现一个基本的贪食...
HTML5的canvas元素是Web开发中的一个强大工具，它允许开发者在网页上绘制图形，创建交互式的2D游戏，如本例中的“简洁版贪食蛇小游戏”。这个游戏是利用JavaScript来控制和渲染游戏逻辑，因此它涉及到的主要知识点...
javascript写的贪食蛇的代码，可以用。。。。。。。。。。。。
.贪食蛇 儿时的回忆..